Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How can I get a script to run every time the WooCommerce cart is empty?

In WooCommerce, run the following function on the empty cart hook. So technically this runs every time the woocommerce cart is empty. If I go directlinkdotcom/cart/ while the cart is empty, the script works perfectly. However if I remove items from the cart to make it empty after something was in it, the script does not execute as intended. What am I doing wrong?

function mdoulos_show_custom_empty_cart() {
?>
      <script type="text/javascript" defer>
          let cartTitle = document.querySelector('.entry-title');
          let progressBar = document.querySelector('.pbar-cart');
          let customHeading = document.querySelector('.empty-heading');
          let customDescription = document.querySelector('.empty-description');
          let customTruck = document.querySelector('.empty-truck');
          let cartCategories = customTruck.nextElementSibling;
          let standardNotice = customTruck.nextElementSibling.nextElementSibling;

          cartTitle.style.display = "none";
          progressBar.style.display = "none";
          standardNotice.style.display = "none";
          customHeading.style.display = "block";
          customDescription.style.display = "block";
          customTruck.style.display = "block";
          cartCategories.style.display = "block";
          
      </script>


 <?php
    
}

remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'mdoulos_show_custom_empty_cart', 10 );
Tags:

2

Answers


  1. 0

    I think you may be missing the AJAX functionality that happens behind the scenes when you remove an item. There’s a difference between running your code at page load vs. what runs after you remove some products and eventually end up with an empty cart. This explains what you’re noticing with it working upon page refresh.

    In addition to your code that you’re already using, you may also need something like this:

    function my_cart_updated( $item_id ) {

    // check if cart contents are empty
    if ( WC()->cart->get_cart_contents_count() == 0 ) {
        
        // do whatever you want here
        // ...
    }
}

// add the action
add_action( 'woocommerce_cart_item_removed', 'my_cart_updated' );

    I think something like this may work:

    function my_cart_updated( $item_id ) {

    // check if cart contents are empty
    if ( WC()->cart->get_cart_contents_count() == 0 ) {
    ?>

      <script type="text/javascript" defer>
          let cartTitle = document.querySelector('.entry-title');
          let progressBar = document.querySelector('.pbar-cart');
          let customHeading = document.querySelector('.empty-heading');
          let customDescription = document.querySelector('.empty-description');
          let customTruck = document.querySelector('.empty-truck');
          let cartCategories = customTruck.nextElementSibling;
          let standardNotice = customTruck.nextElementSibling.nextElementSibling;

          cartTitle.style.display = "none";
          progressBar.style.display = "none";
          standardNotice.style.display = "none";
          customHeading.style.display = "block";
          customDescription.style.display = "block";
          customTruck.style.display = "block";
          cartCategories.style.display = "block";
      </script>

    <?php
    }
}

// add the action
add_action( 'woocommerce_cart_item_removed', 'my_cart_updated' );
    Login or Signup to reply.
  2. 0

    Are you trying to remove the functionality of the cart and make your shop redirect "add to cart" button to checkout?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search