Archived topic

Woocommerce add to cart FA Icon

13 replies · Started by David on July 11, 2017

Viewing posts 1–14 of 14

July 11, 2017 at 10:48 am #347780

Hi guys,

I want to change the woo shop add to basket button to an FA-icon.
Woocommerce snippet allowing you to change the text within the button is as follows:

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );    // 2.1 +
 
function woo_archive_custom_cart_button_text() {
 
        return __( 'Add to Basket', 'woocommerce' );
 
}

Which works fine. However, i want to remove the text and use an FA icon. Which i dont think is possible within the return__ function.

Any advice or alternative methods of swapping the type or appending/prepending the type with an FA ICON would be great.

July 11, 2017 at 2:20 pm #347855

Give this a shot instead:

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );    // 2.1 +
function woo_archive_custom_cart_button_text() {
        return '<i class="fa fa-shopping-basket" aria-hidden="true"></i>';
}

July 11, 2017 at 3:00 pm #347871

Hi Tom - sorry not working. It just displays the code....
tried a few workarounds - no success yet!

July 11, 2017 at 3:23 pm #347879

Try adding that using Code Snippet: https://docs.generatepress.com/article/adding-php/#code-snippets

July 11, 2017 at 3:30 pm #347882

Hi Leo, i did (always use code snippets)!

Sorry didn't make myself clear - it only displays the html code not the output.
Doesn't matter what HTML i put in there i get the same result.

EDIT:
I bet you so thought i had put the code into a page editor =) and you know what i went back and checked i hadn't HA HA

July 11, 2017 at 8:44 pm #347948

Hmm it must be escaped inside WooCommerce.

Where exactly is this filter changing the text? Everywhere there's an add to cart button?

July 12, 2017 at 4:05 am #348096

everywhere except the one specifically for the single product page.

July 12, 2017 at 10:03 am #348246

Hi Tom, found this on stackoverflow - their suggestion is with jQuery - something i have yet to break!

Any thoughts?

July 12, 2017 at 10:04 am #348251

Can you link me to a page with the button?

July 12, 2017 at 10:08 am #348255

This one will do: test page

July 12, 2017 at 11:48 am #348313

So one solution would be to return nothing in the function above: return '';

Then use CSS:

.add_to_cart_button:before {
    content: "\f07a";
    font-family: FontAwesome;
}

July 12, 2017 at 12:01 pm #348326

Thanks Tom - that did the trick just need to see if i can style the button the way i want it.....
FA's for the cart buttons would be nice add-on.....

July 12, 2017 at 7:21 pm #348525

If you need any help with the styling just let me know :)

July 13, 2017 at 7:58 am #348819

Thanks Tom - much appreciated. Case resolved =)

This archived topic is closed to new replies.

Start building better websites today.