- This topic has 13 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
hi david,
here is the new topic as requested. following the code from add-to-cart.php
<?php /** * Loop Add to Cart * * This template can be overridden by copying it to yourtheme/woocommerce/loop/add-to-cart.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce\Templates * @version 3.3.0 */ if ( ! defined( 'ABSPATH' ) ) { exit; } global $product; echo apply_filters( 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok. sprintf( '<a href="%s">%s</a>', esc_url( $product->add_to_cart_url() ), esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ), esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ), isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '', esc_html( $product->add_to_cart_text() ) ), $product, $args );Customer Support
Hi there,
on your sites Shop page, i do not see the default Woo button, it is a GB Button ?
hi david, i created a block hook with gb and used the “woocommerce_loop_add_to_cart_link” hook.
but..back to roots. all i want to do is to place an svg-icon before all “add to cart” buttons.
when i use your css solution from #1227769, may its easier to format this. can yopu have a look at the site?`.woocommerce ul.products li.product .button:before {
content: ”;
display: block;
width: 20px;
height: 20px;
background-image: url(‘https://gravo.dndev.at/wp-content/uploads/images/cart.svg’);
margin-right: 1ch;
}You have this CSS:
.woocommerce ul.products li.product, .woocommerce ul.products li.product a { display: flex; flex-direction: column; }Which is making the button a column. Which you don’t want.
Change it to:.woocommerce ul.products li.product { display: flex; flex-direction: column; }ok, done, can you please have a look at the svg icon in the “add to cart” button. should be before the text, not above.
tks in advance
Try this CSS:
.woocommerce ul.products li.product.woocommerce-text-align-left .button { display: flex; } .woocommerce ul.products li.product.woocommerce-text-align-left .button:before { background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; position: relative; top: 5px; }hi david, the following css is working fine for all product archives.
which chnages are necessary thats working for single product pages too?`.woocommerce ul.products li.product .button:before {
content: ”;
display: block;
width: 20px;
height: 20px;
background-image: url(‘https://gravo.dndev.at/wp-content/uploads/images/cart.svg’);
margin-right: 1ch;
}.woocommerce ul.products li.product.woocommerce-text-align-left .button {
display: flex;
}
.woocommerce ul.products li.product.woocommerce-text-align-left .button:before {
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
position: relative;
top: 5px;
}Customer Support
Try this:
.woocommerce div.product form.cart .button:before { content:""; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; position: relative; top: 5px; background-image: url(https://gravo.dndev.at/wp-content/uploads/images/cart.svg); width: 20px; height: 20px; display: block; margin-right: 1ch; } .woocommerce div.product form.cart .button{ display: flex; }hello ying, perfect working, tks.
No Problem, glad to help 🙂
hi ying, following code is in place to hook the icon into the add to cart button in archive and mobile. its there, but not formatted correct. what i am missing? is there a way to simplify this?
tks in advance
`/* hooks cart svg icon in add to cart button single and archive */
.woocommerce div.product form.cart .button:before {
content:””;
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
position: relative;
top: 5px;
background-image: url(https://gravo.dndev.at/wp-content/uploads/images/cart.svg);
width: 20px;
height: 20px;
display: block;
margin-right: 1ch;
}.woocommerce div.product form.cart .button{
display: flex;
}.woocommerce ul.products li.product .button:before {
content: ”;
display: block;
width: 20px;
height: 20px;
background-image: url(https://gravo.dndev.at/wp-content/uploads/images/cart.svg);
margin-right: 1ch;
}.woocommerce ul.products li.product.woocommerce-text-align-left .button {
display: flex;
}
.woocommerce ul.products li.product.woocommerce-text-align-left .button:before {
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
position: relative;
top: 5px;
}hi ying, following code is in place to hook the icon into the add to cart button in archive and mobile.
I’m confused, my code is for the single product page, it’s not related to the archive.
Do you mean the button in your archive doesn’t work well?
If so, add this:
.woocommerce ul.products li.product .button { display: flex; flex-wrap: nowrap; align-items: center; }And change this:
woocommerce ul.products li.product .button:before { content: ''; display: block; width: 20px; height: 20px; background-image: url(https://gravo.dndev.at/wp-content/uploads/images/cart.svg); margin-right: 1ch; }to
woocommerce ul.products li.product .button:before { content: ''; display: block; width: 20px; height: 20px; background-image: url(https://gravo.dndev.at/wp-content/uploads/images/cart.svg); margin-right: 1ch; background-repeat: no-repeat; }hi ying, is working on single and archive now.
tks a lotGlad to hear that 🙂
- You must be logged in to reply to this topic.
