Skip to content
geekerhub

How to Hide the View Cart Button in WooCommerce Mini Cart

By ali 3 min read

Hide the View Cart button in the WooCommerce mini cart while keeping Checkout visible

WooCommerce displays a mini cart that allows customers to review the products they have added to their shopping cart. By default, the classic mini cart includes two buttons: View Cart and Checkout.

If you want customers to proceed directly to checkout without opening the cart page, you may want to hide the View Cart button while keeping the Checkout button visible.

You can do this easily with custom CSS. In this guide, we’ll look at a few ways to hide the View Cart button in the WooCommerce mini cart.

1. Hide the View Cart Button Using CSS

The easiest way to hide the View Cart button is to add a CSS rule to your WordPress website.

For the classic WooCommerce mini cart, use the following CSS:

.woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
    display: none !important;
}

This selector targets the View Cart link without hiding the Checkout button.

You can add this CSS in one of the following places:

  • Appearance → Customize → Additional CSS, if your theme provides the Customizer.
  • Your child theme’s stylesheet.
  • Your theme’s custom CSS area, if available.

Save your changes and refresh the website to check the mini cart.

2. Hide the View Cart Button in the WooCommerce Block Mini Cart

If your website uses the WooCommerce Cart and Checkout blocks or the newer Mini-Cart block, it may use different HTML classes from the classic mini cart.

For the WooCommerce Mini-Cart block, try this CSS:

.wc-block-mini-cart__footer-cart {
    display: none !important;
}

This targets the View Cart link in the block-based mini cart. It does not target the Checkout button.

Keep in mind that WooCommerce themes and custom mini-cart implementations may use different markup. If this selector does not work, inspect the mini cart with your browser’s developer tools and adjust the selector to match your website.

3. Hide the View Cart Button Using JavaScript

You can also use JavaScript to hide the View Cart button. However, CSS is generally the better option for a simple visibility change.

If you still prefer JavaScript, you can use the following code:

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll(
        '.woocommerce-mini-cart__buttons a.wc-forward:not(.checkout)'
    ).forEach(function (button) {
        button.style.display = 'none';
    });
});

This script finds matching View Cart links when the page loads and hides them. However, WooCommerce may update the mini cart dynamically after customers add or remove products. In that case, the script may need additional handling for dynamically updated content.

For this reason, using CSS is usually simpler and more reliable.

4. Can You Remove the View Cart Button Using a WooCommerce PHP Hook?

You may come across examples that use the woocommerce_widget_shopping_cart_buttons hook as a filter to remove the View Cart button.

However, in the standard WooCommerce classic mini-cart template, woocommerce_widget_shopping_cart_buttons is an action hook, not a filter that provides a buttons array. Therefore, code that tries to remove a view_cart array item through that hook will not work as expected.

If you need to change the mini-cart button markup using PHP, you can create a custom template override in your child theme. The standard WooCommerce template is located at:

woocommerce/templates/cart/mini-cart.php

You can copy the template into your child theme at:

your-child-theme/woocommerce/cart/mini-cart.php

Then edit the copied template and remove the View Cart link while keeping the Checkout link. Be aware that template overrides may need updating when WooCommerce changes its original template, so check for outdated overrides after plugin updates.

Conclusion

Hiding the View Cart button in the WooCommerce mini cart is straightforward. For most websites, adding a small CSS rule is the easiest solution.

Use the selector that matches your mini cart type: the classic WooCommerce mini cart or the newer Mini-Cart block. Both approaches allow you to hide the View Cart button while keeping the Checkout button available to customers.

Related guides