Change Ajax Add To Cart icon

[mnvr1991]

Hi!

I’d like to change the shopping cart icon inside the Ajax Add To Cart screen. (the one that shows a shopping cart and then changes to a white check mark ✓.

I tried this css, but that doesn’t seems to work.
.x-cart-notification-icon.added {
content: “\f291”;
}

Is there a way to change the shopping cart icon?

Many thanks.

[ruenel]

Hello Michael,

Thanks for writing in!

The icons were added and hard coded into the theme.

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

If you want to override the icons, please add the following code in your child theme’s functions.php file in Appearance > Theme Editor > functions.php:

if ( ! function_exists( 'x_woocommerce_navbar_cart_ajax_notification' ) ) :
  function x_woocommerce_navbar_cart_ajax_notification() {

    $fa_solid_enable = (bool) x_get_option( 'x_font_awesome_solid_enable' );
    $fa_regular_enable = (bool) x_get_option( 'x_font_awesome_regular_enable' );
    $fa_light_enable = (bool) x_get_option( 'x_font_awesome_light_enable' );
    
    if ( $fa_solid_enable || $fa_regular_enable || $fa_light_enable ){
      // light
      if ( $fa_light_enable ){
        $data_x_icon = 'data-x-icon-l';
      }

      // regular
      if ( $fa_regular_enable ){
        $data_x_icon = 'data-x-icon-o';
      }

      // solid
      if ( $fa_solid_enable ){
        $data_x_icon = 'data-x-icon-s';
      }
    }else{
      // default
      $data_x_icon = 'data-x-icon-l';
    }

    if ( x_is_product_index() && 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 . '="&#xf218;" aria-hidden="true"></i>'
                      . '</div>'
                      . '<div class="x-cart-notification-icon added">'
                        . '<i class="x-icon-check" ' . $data_x_icon . '="&#xf00c;" aria-hidden="true"></i>'
                      . '</div>'
                    . '</div>';
    } else {
      $notification = '';
    }

    echo $notification;

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

You will have to change the . '<i class="x-icon-cart-arrow-down" ' . $data_x_icon . '="&#xf218;" aria-hidden="true"></i>' with a different icon. For example, if you want to change the cart arrow down icon into a cart plus, you can update the line of code into this: . '<i class="x-icon-cart-plus" ' . $data_x_icon . '="&#xf217;" aria-hidden="true"></i>'

Check out the icons here: https://fontawesome.com/icons?d=gallery&q=cart

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

We would love to know if this has worked for you. Thank you.

[mnvr1991]

Hi!

Thanks for your reply. If it’s that hard coded into the theme, I actually don’t want to mess with that for such a small thing.

But thanks anyway!

Best Regards,
Michael

[jade]

Hello Michael,

It is actually possible to do it with just CSS. Please try this:

.x-cart-notification-icon.loading i::before {
    content: "\f291" !important;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[mnvr1991]

@jade

.x-cart-notification-icon.loading i::before { content: “\f291” !important; }

Thanks, Jade! Works like a charm

[jade]

You’re most welcome, Michael.