Light version of Font Awesome for add to cart ajax animation

[omid020]

Hello,

Is there any solution for using light version of font awesome in the ajax animation of woocommerce add to cart?

Also I would know how to make .x-cart-notification-icon.added icon transparent same as .x-cart-notification-icon.loading icon. It ried css opticy property for added icon but it displays .x-cart-notification.added:before background color instead of page objects.

Thank you in advance.

[ruenel]

Hello Omid,

Thanks for writing in! What you have in mind requires custom modification of the AJAX cart function. Regretfully custom development is beyond the scope of our support already. I would recommend that you refer to this old thread instead:

• Change Ajax Add To Cart icon

Please note that custom coding is outside the scope of our support already. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Thank you for your understanding.

[omid020]

Hi,

Provided link is very useful but I didn’t find out how to choose icon wight (Light, Regular, Solid and … ) via a php variable for each icon? I just was able to use html modifiers to handle it per icon :

// AJAX ADD CART
===================================================================

if ( ! function_exists( 'x_woocommerce_navbar_cart_ajax_notification' ) ) :
  function x_woocommerce_navbar_cart_ajax_notification() {
    if ( get_option( 'woocommerce_enable_ajax_add_to_cart' ) == 'yes' ) {
      $notification = '<div class="x-cart-notification">'
                      . '<div class="x-cart-notification-icon loading">'
                        . '<i class="x-icon-cart-arrow-down" data-x-icon-l="&#xf290;" aria-hidden="true"></i>'
                      . '</div>'
                      . '<div class="x-cart-notification-icon added">'
                        . '<i class="x-icon-check" data-x-icon-s="&#xf00c;" aria-hidden="true"></i>'
                      . '</div>'
                    . '</div>';
    } else {
      $notification = '';
    }

    echo $notification;

  }
  add_action( 'x_before_site_end', 'x_woocommerce_navbar_cart_ajax_notification' );
endif;

Thanks!

[rad]

Hi Omid,

The icon code from that code are &#xf290 and , you’ll have to replace them and you can find other icons from here https://fontawesome.com/icons?d=gallery&s=regular&m=free, for example,

https://fontawesome.com/icons/comment-alt?style=regular

Then the code that you may add is &#xf27a

Thanks!

[omid020]

Hi @rad ,

First I should declare which I have already solved the issue via presented code in previous post;
Icon codes are same for all styes ( Light, Regular, Solid and … ), for example &#xf290 or f290code is defined for Light, Regular and Solid icons so it can’t help to choose different font style. I would to know how can I switch to different style while using a php variable to determine data-x-icon :

  . '<div class="x-cart-notification-icon loading">'
    . '<i class="x-icon-cart-arrow-down" ' . $data_x_icon . '="&#xf290;"  aria-hidden="true"></i>'
  . '</div>'

Thanks!

[jade]

Hello Omid,

Glad to hear you got it sorted and thanks for sharing your solution.

Cheers!