DEV Community

Cover image for Hiding WooCommerce Cart when empty by Enqueueing JavaScript
Marc
Marc

Posted on

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');
Enter fullscreen mode Exit fullscreen mode

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'] });
    }
});
Enter fullscreen mode Exit fullscreen mode

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.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay