[Resolved] Add FontAwesome icon to WooCommerce button

Hi, we have a longer queue than usual at the moment, the wait time is around 20 hours, please hold on while we reply to tickets in the order they are opened. Sorry for this temporary inconvenience.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to add a FontAwesome icon to the WooCommerce Add to Cart button.

Solution: Add the following code to your WordPress Archive's Loop JS editor:

jQuery(document).ready(function(){
  jQuery('a.add_to_cart_button').prepend('<i class="fa fa-cart-plus" aria-hidden="true"></i> ');
});

Add the following code to your filters JS editor:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
  jQuery("html, body").animate( {scrollTop: 0}, "fast");
  jQuery('a.add_to_cart_button, .cart button.button.alt').prepend('<i class="fa fa-cart-plus" aria-hidden="true"></i> ');
});

This topic contains 11 replies, has 2 voices.

Last updated by dmitryK-2 5 months ago.

Assigned support staff: Christian Cox.

Author
Posts
#1131095

I am trying to: use instructions from https://toolset.com/forums/topic/using-font-awesome-icons-in-woocommerce-add-to-cart-button/ thread. No luck.

Link to a page where the issue can be seen: hidden link

I expected to see: I've added

[wpv-woo-buy-or-select add_to_cart_text="<script>jQuery('a.add_to_cart_button').prepend('<i class="fa fa-cart-plus" aria-hidden="true"></i> ');</script>" show_quantity_in_button='yes' link_to_product_text="" group_add_to_cart_text="" external_add_to_cart_text=""]

Instead, I got: FA Basket not showing up.

#1131482

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Hi, the script should not go in the wpv-woo-buy-or-select shortcode. It should go in the JS panel of your template or Layout.
Remove the script information from the shortcode like this:

[wpv-woo-buy-or-select add_to_cart_text="Add to cart" show_quantity_in_button='yes' link_to_product_text="" group_add_to_cart_text="" external_add_to_cart_text=""]

Then add it in the JS panel without the script tags, and wrap it in a jQuery document ready handler:

jQuery(document).ready(function(){
  jQuery('a.add_to_cart_button').prepend('<i class="fa fa-cart-plus" aria-hidden="true"></i> ');
});
#1131512

Hi Cristian, I've tryed to. insert it in all places on my test site - no good. Can you please have a look inside admin panel?

I've putted it in:
1. Toolset > Layouts CSS & JS > JS editor
2. Toolset > WordPress Archive > ID1670 > JS Editor of Filter, JS Editor of LoopOutput
3. Toolset > ContentTemplate. > ID1691 > Edit with DiviBuilder > section Code

#1131968

Hi Cristian, can we proceed? I still need assistance to find the right place for this code.

#1132090

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

I'll be glad to take a look. Please provide login credentials in the private reply fields here.

#1132587

I've tested the credentials provided in last private massage - been able to logon . We can continue !

#1132701

Рщ Cristian, one more observation for you - in case product is variable - everything. is works on. archive page, in case it is single with quantity - not works! may this help for you?

#1132793

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Okay I have removed the jQuery code everywhere except the WordPress Archive Loop JS editor. I also modified the code to work with the single Product buttons:

jQuery(document).ready(function(){
  jQuery('a.add_to_cart_button, .cart button.button.alt').prepend('<i class="fa fa-cart-plus" aria-hidden="true"></i> ');
});

Please check now and let me know if the problem is not resolved.

#1132834

Ok, can you please take a look at soapmaker.pro/shop
It all good in case we see page 1 of catalogue. Please switch to page 2 or next --- cart disappears . Can we fix it ?

#1132844

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

This page is updated with AJAX:
hidden link

After the results update, you must trigger the JavaScript code once again to insert the icons. On the QAS site, I can see this code in the WordPress Archive filter JS panel:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
  jQuery("html, body").animate( {scrollTop: 0}, "fast");
});

If that code is on the live site too, you can add your icon script in the pagination callback to trigger the update:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
  jQuery("html, body").animate( {scrollTop: 0}, "fast");
  jQuery('a.add_to_cart_button, .cart button.button.alt').prepend('<i class="fa fa-cart-plus" aria-hidden="true"></i> ');
});
#1132845

Appreciated!

#1132865

My issue is resolved now. Thank you!