[LiquidPrintOneParticipant]

I am currently using the following code to hide my cart when it is empty

jQuery(function($) {
if($('.x-cart .inner').html()=="0 Items") {
    $('.x-menu-item-woocommerce').css('display','none');
} 
});

While it works great how do I make it to where when they add something to the cart it shows immediately? As of right now they have to refresh or go to another page to see the cart. If they add something to their cart from the store page and decide they want to checkout after looking JUST on that page (so no reloading or navigating to other pages) they have no way of checking out as far as they can see. It is causing some users to leave, not many granted but I would like to prevent some of the force quits! 🙂 Thanks!

[Rue NelModerator]

Hello There,

Thanks for writing in! Please make sure that AJAX add to cart button is enabled in WooCommerce > Settings > Products > Display tab. And then you need to update your your JS code:

(function($) {

  var element = $('.x-cart .inner');

  if(element.html() == "0 Items") {
    $('.x-menu-item-woocommerce').css('display','none');
  } 

  element.on('change', function(){
    if(element.html() == "0 Items") {
      $('.x-menu-item-woocommerce').css('display','block');
    }
  });

})(jQuery);

We would loved to know if this has work for you. Thank you.

[LiquidPrintOneParticipant]

Thanks for the help, while I do have my Ajax cart button enabled the code does not seem to be working.

http://pihydrographics.com/product-category/film-specials/

I also tried changing the code to this and it did not work so i reverted back to yours…

(function($) {

  var element = $('.x-cart .inner');

  if(element.html() == "0 Items") {
    $('.x-menu-item-woocommerce').css('display','none');
  } 

  element.on('change', function(){
    if(element.html() != "0 Items") {
      $('.x-menu-item-woocommerce').css('display','block');
    }
  });

})(jQuery);

[RadModerator]

Hi there,

There is another jQuery error the is preventing your code from working. But I’m not able to trace what causes it since your have caching and minified files.

Would you mind clearing your cache and disable it while we’re testing?

Thanks!

[LiquidPrintOneParticipant]

Ok, I have removed caching and un-minified my JS, also was able to fix the JS error I had (It was from a coming soon plugin that i replaced with “WooCommerce Coming Soon”)

Let me know if you need anything else.

Thanks!

[RadModerator]

Hi there,

Thanks, please change your code to this,

(function($) {

  var element = $('.x-cart .inner');

var cart_int = setInterval ( function() {
  if(element.html() == "0 Items") {
    $('.x-menu-item-woocommerce').css('display','none');
  } else {
    $('.x-menu-item-woocommerce').css('display','block');
    clearInterval ( cart_int );
  } 
}, 1000 );

})(jQuery);

Cheers!

[LiquidPrintOneParticipant]

That does not seem to be working…

[Nabeel AModerator]

Hi again,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[LiquidPrintOneParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

I’ve tried to log into your site but it’s not working. After login, if I go to yoursite.com/wp-admin, it redirects me to 404 not found error page. Please confirm the login and admin URL.

Meanwhile, try this jQuery code instead:

(function($) {

  var $element = $('.x-cart .inner'),
      $cartMenu = $('.x-menu-item-woocommerce');
  
  var cart_int = setInterval ( function() {

    if ( $element.text().toLowerCase() == "0 items" || $element.text().toLowerCase() == "0 item" ) {
      $cartMenu.css('display', 'none');
    } else {
      $cartMenu.css('display', 'block');
      clearInterval ( cart_int );
    }
    
  }, 1000 );
  
})(jQuery);

Thank you!

[LiquidPrintOneParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Please try this code instead:

jQuery(function($) {
if($('.x-cart .inner').html()=="0 Items") {
    $('.x-menu-item-woocommerce').css('display','none');
} 
  $(".add_to_cart_button").on("click", function() {
  

    if ( $('.x-menu-item-woocommerce').css('display') == 'none' ){
    $('.x-menu-item-woocommerce').css('display','block');
}
 
});
});

By default it will hide if the cart is empty then it will show after added to cart by ajax is click. See my test of this code on my site:http://screencast-o-matic.com/watch/cDf1nK1ysT

Hope this helps.

[LiquidPrintOneParticipant]

Nice! That worked! Thanks for helping me out!

[ThaiModerator]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts