[Support request] Add to cart button SVG icon – Woocommerce

[FunkyCss]

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

[David]

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

[Heinrich]

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

[David]

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

[Author]

Posts