[Resolved] icon in add to cart button

[Heinrich]

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
);

[David]

Hi there,

on your sites Shop page, i do not see the default Woo button, it is a GB Button ?

[Heinrich]

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;
}

[David]

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;
}

[Heinrich]

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

[David]

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;
}

[Heinrich]

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;
}

[Ying]

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;
}

[Heinrich]

hello ying, perfect working, tks.

[Ying]

No Problem, glad to help 🙂

[Heinrich]

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;
}

[Ying]

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;
}

[Heinrich]

hi ying, is working on single and archive now.
tks a lot

[Ying]

Glad to hear that 🙂

[Author]

Posts