[Resolved] Add FontAwesome icon to WooCommerce button

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 3 weeks, 1 day 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-05: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-05: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-05: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-05: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!