Archived topic

Add to cart button SVG icon - Woocommerce

3 replies · Started by FunkyCss on July 12, 2022

Viewing posts 1–4 of 4

July 12, 2022 at 4:34 am #2280336

Hi there, I use this code to rename my button and I would like to add a SVG icon before the text

 // Change add to cart text on single product page
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_add_to_cart_button_text_single' ); 
function woocommerce_add_to_cart_button_text_single() {
    return __( 'Προσθήκη', 'woocommerce' ); 
}

// Change add to cart text on product archives page
add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_add_to_cart_button_text_archives' );  
function woocommerce_add_to_cart_button_text_archives() {
    return __( 'Προσθήκη', 'woocommerce' );
}

But it does not work if I added in fron of my text

July 12, 2022 at 4:52 am #2280348

Hi there,

yeah that filter will only take a text string.

Its tricky, heres a CSS only method:

https://generatepress.com/forums/topic/change-the-add-to-cart-button-to-an-icon-when-viewing-it-from-a-mobile/#post-1227893

Otherwise you need to use the woocommerce_loop_add_to_cart_link filter or overwrite the entire add-to-cart.php template:

https://github.com/woocommerce/woocommerce/blob/3611d4643791bad87a0d3e6e73e031bb80447417/plugins/woocommerce/templates/loop/add-to-cart.php#L31

January 4, 2023 at 2:58 am #2483135

hi david,
i used the woocommerce_loop_add_to_cart_link as suggested. button is really stylish now - with a beautiful icon...
but doesn`t work .-) no action...

the add-to-cart.php is located in the theme directory as mentionend.

what are the missing steps?

tks in advance

January 4, 2023 at 4:23 am #2483219

Hi there,

if you can raise a new topic, and share the code you used in your add-to-cart.php i can take look,
Before submitting the code, can you first highlight it and click the Code button above to preserve its formatting

This archived topic is closed to new replies.

Start building better websites today.