[Resolved] Add FontAwesome icon to WooCommerce button

[Author]

Posts

[dmitryK-2]

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.

[Christian Cox]

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> ');
});

[dmitryK-2]

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

[dmitryK-2]

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

[Christian Cox]

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

[dmitryK-2]

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

[dmitryK-2]

Рщ 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?

[Christian Cox]

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.

[dmitryK-2]

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 ?

[Christian Cox]

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> ');
});

[dmitryK-2]

Appreciated!

[dmitryK-2]

My issue is resolved now. Thank you!