Hiding WooCommerce Cart when empty by Enqueueing JavaScript

WooCommerce is a powerful, open-source eCommerce plugin designed for WordPress that transforms your website into a fully functional online store. Its user-friendly interface and extensive library of customizable themes and plugins make it an ideal choice for businesses of all sizes, whether you're launching a small boutique or a large-scale retail operation.

One common challenge developers face is hiding the cart icon when the cart is empty. It's surprising how frequently this issue comes up, given its simplicity, but here's why it happens:

WooCommerce uses dynamic data to control how the cart icon displays. If there are items in the cart, WooCommerce updates the cart element dynamically using a data attribute, such as data-cart-items-count. However, this dynamic update creates a timing issue. For example, you might add a CSS rule like:

[data-cart-items-count="0"] {
display: none;
}

But the cart icon still briefly appears before the data attribute updates, leading to an undesirable flicker.

The Solution: JavaScript!

To solve this, we need JavaScript to dynamically control the cart's visibility. Since WordPress relies on enqueuing for loading scripts properly, here's how you can implement the solution:

Step 1: Enqueue Your JavaScript

In your theme's functions.php file, add the following code to enqueue your custom JavaScript file:

function enqueue_custom_script() {
    wp_enqueue_script(
        'custom-cart-script', // Handle name
        get_stylesheet_directory_uri() . '/path/to/js/script.js', // Path to the JS file
        array('jquery'), // Dependencies
        '1.0.0', // Version
        true // Load in the footer
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_script');

Make sure the file path matches your theme's structure.

Step 2: Add the JavaScript Code

In the JavaScript file you just enqueued, add the following code:

document.addEventListener('DOMContentLoaded', function () {
    const miniCart = document.querySelector('.wc-block-mini-cart'); // Update selector as needed

    if (miniCart) {
        // Initially hide the mini-cart
        miniCart.style.display = 'none';

        const updateVisibility = () => {
            const itemCount = miniCart.getAttribute('data-cart-items-count');
            miniCart.style.display = itemCount === '0' ? 'none' : 'block';
        };

        // Run the visibility check on page load
        updateVisibility();

        // Monitor changes to the mini-cart for dynamic updates
        const observer = new MutationObserver(updateVisibility);
        observer.observe(miniCart, { attributes: true, attributeFilter: ['data-cart-items-count'] });
    }
});

How It Works

• The script waits for the DOM to fully load.
• It selects the cart icon (update the selector to match your theme's cart element).
• Initially, the cart is hidden.
• The updateVisibility function checks the data-cart-items-count attribute and toggles the cart's visibility.
• A MutationObserver watches for attribute changes to dynamically update the cart as needed.
• With this setup, your cart icon will only appear when there's at least one item in the cart, eliminating the flicker issue caused by delayed data updates.

Let me know if this helped you! I'd also love to hear what kind of WooCommerce sites you're building and how you're using this fantastic plugin.

The above is the detailed content of Hiding WooCommerce Cart when empty by Enqueueing JavaScript. For more information, please follow other related articles on the PHP Chinese website!