How to disable Add to Cart button if cart is not empty in WooCommerce?

by

Are you looking for a way to prevent customers from adding multiple products to their cart at once on your WooCommerce store?
Maybe you can only process one order at a time, no matter what the products are. In this tutorial, we’ll walk you through how to hide the “Add to Cart” button and replace it with a message if the cart is not empty. This way, customers will see a message stating “Before you can add another product to your cart, please complete your purchase that currently exists in your cart.” instead of the “Add to Cart” button when they have already added an item to their cart. We’ll also cover how to handle cases where the theme uses ajax “Add to Cart” buttons. Follow along to learn how to set this up on your own store!

First we’ll make every product non purchasable when other product exists in the cart.

add_filter( 'woocommerce_is_purchasable', 'products_no_purchasable_when_other_product_in_cart', 99, 1 );
function products_no_purchasable_when_other_product_in_cart( $is_purchasable ) {
    if ( WC()->cart->get_cart_contents_count() > 0) {
        $is_purchasable = false;
    }
    return $is_purchasable;
}

This function alone is enough to prevent users from adding more than one product in the cart. But they would still be able to see and click the “Add to cart” button.

The “Add to cart” button is typically seen in 2 places: on the product page and inside of the product loop, meaning archive pages, shop pages, related products etc.

When the button is displayed inside the loop, we can use filter and replace the the text and the url of the button. In the function below, we replace “Add to cart” text with a long message explaining why a customer can’t buy the product and the url is linking to the checkout page.

// On WooCommerce shop and archives pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'change_add_to_cart_button_in_a_loop', 10, 3 );
function change_add_to_cart_button_in_a_loop( $sprintf, $product, $args ) {
    // When cart NOT empty
    if ( WC()->cart->get_cart_contents_count() > 0 ) {
        $button_text = 'Before you can add another product to your cart, please complete your purchase that currently exists in your cart.';
        // Button URL
        $new_button_url =  wc_get_page_permalink( 'checkout'  );
        // New link + text
        $sprintf = sprintf(
            '<a href="%s" class="%s">%s</a>',
            esc_url( $new_button_url ),
            esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
            esc_html( $button_text )
        );
    }

    return $sprintf;
}

On the product page, the button will be removed automatically when the product is not purchasable and we are making sure it’s not purchasable in the first code snippet. Now we only have to fill the void with some message explaining why the “Add to cart” button is not there. We do it using woocommerce_single_product_summary hook. You can use any other hook on the product page to move this message around.

add_action( 'woocommerce_single_product_summary', 'message_when_other_product_already_in_cart', 10 );
function message_when_other_product_already_in_cart() {
    if ( WC()->cart->get_cart_contents_count() > 0) {
        $message = 'Before you can add another product to your cart, please complete your purchase that currently exists in your cart.';
        echo '<p>'.$message.'</p>';
    }
}

And finally, most themes will have ajax “add to cart” buttons. This means the page is not reloaded after you add or remove a product from the cart. For example, you are on the shop page and add one product in the cart. The buttons on other products will still be visible. Or when you open a small cart in the header and remove the product from the cart, the shop/product page won’t enable “add to cart” buttons automatically. That’s why we add a simple javasctipt that will reload the page when added_to_cart or removed_from_cart javascript events are triggered. We add this code only to WooCommerce pages.

add_action( 'wp_footer', 'custom_footer_scripts' );
function custom_footer_scripts() {
    if ( is_woocommerce() ) {
        ?>
        <script>
            jQuery( document.body ).on( 'added_to_cart', function() {
                window.location = window.location.href;
            });
            jQuery( document.body ).on( 'removed_from_cart', function() {
                window.location = window.location.href;
            });

        </script>
        <?php
    }
}

Tested on the Storefront theme and with WooCommerce 7.2.2

Leave a Comment