Search code examples
phpjquerywoocommerceiconsfont-awesome

WooCommerce quantity minus and plus icons are not showing

I'm having some trouble displaying the + and - quantity icons on the WooCommerce product page.

error

After much research I discovered that for some strange reason WordPress is giving the class name to the object in question wrong (setting 'fas fa-plus-circle' instead of 'fa fa-plus-circle') and that is why it is not showing the icon.

error2

I have tried a thousand ways to change the class to the correct one using JavaScript and PHP in theme file editor (for info I'm using Astra theme).

error4

I also tried to fix it with the HTML widget from Elementor, but I am unable to make it work like that neither.

error3

I would be very grateful for any help.

Solution

  • The following code will handle multiple plus / minus FontAwesome icons, if there are multiple quantity fields, like in product loops (archive pages…) or in cart page... This jQuery code is enqueued and work for "minus-circle" and "plus-circle" FontAwesome icons.

    The code replace everywhere the selector class fas with fa for "minus-circle" and "plus-circle" FontAwesome icons:

    add_action('template_redirect', 'fontawesome_5_free_quantity_buttons_js', 10);
function fontawesome_5_free_quantity_buttons_js() {
    wc_enqueue_js("$('i.fa-minus-circle,i.fa-plus-circle').each( function(index) {
    if( $(this).hasClass('fas') && ! $(this).hasClass('fa') ) {
        $(this).removeClass('fas').addClass('fa');
    }
    });");
}

    Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

    Explanation: The plugin or the custom code that is generating thoses plus / minus FontAwesome icons, uses FontAwesome 6 free (fas)… WooCommerce enables and use by default FontAwesome 5 Free (fa).