Archived topic

icon in add to cart button

13 replies · Started by Heinrich on January 4, 2023

Viewing posts 1–14 of 14

January 4, 2023 at 4:36 am #2483232

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

January 4, 2023 at 4:42 am #2483246

Hi there,

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

January 5, 2023 at 12:18 am #2484267

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

January 5, 2023 at 4:49 am #2484498

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

January 5, 2023 at 6:37 am #2484609

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

January 5, 2023 at 6:42 am #2484618

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

January 5, 2023 at 8:02 am #2484846

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

January 5, 2023 at 11:18 am #2485026

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

January 5, 2023 at 12:13 pm #2485077

hello ying, perfect working, tks.

January 5, 2023 at 12:43 pm #2485100

No Problem, glad to help :)

January 7, 2023 at 9:26 am #2487189

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

January 7, 2023 at 12:44 pm #2487307

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

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

January 9, 2023 at 1:01 pm #2489389

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

January 9, 2023 at 3:04 pm #2489468

Glad to hear that :)

This archived topic is closed to new replies.

Start building better websites today.