Your Cart
WooCommerce Mini-Cart block

How to Customize the WooCommerce Mini-Cart Block and Cart Drawer

The WooCommerce Mini-Cart block gives shoppers quick access to cart contents without leaving the page they are viewing. It is commonly placed in a site header on a block-theme site and can open a drawer where customers review or edit products in the cart. This makes it a separate interface from the dedicated Cart page, not a replacement for it.

Its settings cover the cart icon, optional cart-total display, drawer behavior after an add-to-cart action, and visibility on cart and checkout pages. The workflow below focuses on the WordPress Site Editor and WooCommerce block editing experience. Exact paths can vary by theme, and compatibility with payment, shipping, subscription, product-options, membership and other WooCommerce extensions should be checked separately.

What the WooCommerce Mini-Cart Block Does

The Mini-Cart block is a header-oriented cart control. From any page, a shopper can use its cart button to open the drawer, view cart contents and access available cart actions. The block can therefore remain part of the site’s primary navigation while the store also provides a full Cart page and a separate Checkout page.

Mini-Cart drawer versus the full Cart page

The Mini-Cart drawer is a compact, contextual interface opened from the header. The full Cart page is a dedicated page for cart editing. These are different editing contexts: changing the Mini-Cart template does not mean that every element of the full Cart page has been changed. The documented workflow is primarily intended for stores using a compatible block theme and the Site Editor. Stores using classic themes, page-builder-controlled templates or legacy shortcodes may have different editing paths.

How to Add or Configure the Mini-Cart Block

On a compatible block-theme site, open the relevant header template or template part in the WordPress Site Editor. First check whether the header already contains a Mini-Cart block. If it does, select that block and review its settings. If it does not, use the editor to insert a Mini-Cart block in the header, where the exact insertion path depends on the theme.

After selecting or inserting the block, review its available controls rather than assuming that a default configuration suits the store. The main choices concern how the cart is represented, when the drawer opens and where the block appears.

Configure the header cart controls

  • Choose the available cart icon that fits the header design.
  • Decide whether to display the current cart total.
  • Choose whether the drawer opens after a product is added to the cart.
  • Review the appearance settings available for the block.
  • Decide whether to hide or completely remove the Mini-Cart on Cart and Checkout pages.

The last option is a design setting, not a universal WooCommerce requirement. Save the changes, preview the header and check the result with the store’s actual extensions. A change that looks correct in the editor still needs to be tested through the real cart and checkout flow.

How to Edit the Mini-Cart Drawer Template

The expanded drawer is displayed through a dedicated template part called the Mini-Cart Drawer template part. From the selected Mini-Cart block, use the option to edit the Mini-Cart Drawer template. Alternatively, open Appearance > Editor and locate the template part through the command palette or through Patterns > Template Parts.

Once the template part is open, select the relevant nested content and edit the settings the editor exposes. Existing text, buttons and styling can be changed where permitted. After saving, preview the drawer in both of its cart conditions instead of checking only the editor view.

Locked blocks and permitted additions

Many Mini-Cart blocks are locked. They may not be removable or rearrangeable, so the template does not provide unrestricted structural editing. This does not prevent all customization: existing content and settings can still be edited, and additional blocks can be added to the filled or empty state where the editor permits it.

Do not treat a locked block as an invitation to remove it with unsupported code or to override the template behavior. Work within the controls shown by the Site Editor, save the template and verify the front-end behavior. The available controls can depend on the particular block editing context.

Customize the Filled Cart State

The filled state is displayed when products are already in the cart. In the Mini-Cart template part, select the Mini-Cart Contents block and switch to the Filled Mini-Cart state when choosing nested content to edit. This lets you review the part of the drawer that customers use after adding products.

WooCommerce documents controls for the heading presentation in this state. The editor also allows the text of the View my Cart and Go to Checkout buttons to be edited directly. Use those controls to keep the drawer’s wording consistent with the store’s navigation, then add supporting blocks only where the template allows them.

Filled Mini-Cart editing checklist

  • Review the heading styling available in the Filled Mini-Cart state.
  • Check the text and presentation of the View my Cart button.
  • Check the text and presentation of the Go to Checkout button.
  • Test the cart links with products in the cart.
  • Verify the state for logged-in and guest shoppers.

Also test more than one cart condition. Confirm that dynamic cart information remains usable and that links lead to the intended Cart and Checkout pages. Do not assume that a visual edit changes the behavior of the store’s payment, shipping or other extensions.

Customize the Empty Cart State

The empty state appears when the cart contains no products. In the Mini-Cart Contents block, switch to the Empty Mini-Cart state to edit the content shown in that condition. This state should be tested separately because it uses different text and a different primary action from the filled drawer.

WooCommerce documents controls for the empty-cart message and paragraph styling. The Start Shopping button can also be edited directly in the editor, including its text and available presentation settings. Additional blocks may be added where the template permits them, but locked content may limit the available changes.

Empty Mini-Cart editing checklist

  • Review the empty-cart message and its paragraph presentation.
  • Check the text and presentation of the Start Shopping button.
  • Confirm that the shopping action returns visitors to the intended store navigation.
  • Test the empty drawer on desktop and mobile layouts.

Save the template and open the drawer with no products in the cart. Check that the message is clear, the button remains usable and the empty state does not depend on content visible only in the editor.

Should You Hide the Mini-Cart on Cart and Checkout Pages?

WooCommerce provides settings to hide or completely remove the Mini-Cart on Cart and Checkout pages. The reviewed documentation does not state that hiding it is mandatory. The correct choice depends on the store’s navigation design and on testing the complete purchase path.

A design choice, not a mandatory setting

Hiding the Mini-Cart can reduce repeated cart controls on dedicated Cart and Checkout screens. Keeping it visible can preserve a consistent header navigation pattern. These are practical design considerations, not guaranteed usability or conversion outcomes. Test the visible and hidden configurations where practical, then choose the behavior that fits the store.

Before publishing the choice, check payment, shipping, subscription, product-options, membership and other relevant extension flows. Verify that shoppers can still move between cart and checkout as intended. Document the selected behavior so future header changes do not unintentionally make page visibility inconsistent.

Testing and Troubleshooting the Mini-Cart

The Mini-Cart contains dynamic, session-specific cart information, so an editor preview is not enough. Test the saved implementation as a shopper. Use both an empty cart and a filled cart, and check the drawer after adding products. Review the behavior for logged-in and guest shoppers, desktop and mobile layouts, cart links and checkout links.

If the drawer or related WooCommerce pages display stale or inconsistent information, investigate more than the template itself. Missing or unassigned pages, permalink problems, caching, and plugin or theme conflicts are documented possible causes of WooCommerce page display problems. Cart and checkout pages should typically be excluded from caching because they contain dynamic, session-specific content.

Extension compatibility also requires separate attention. The reviewed documentation does not establish that every third-party WooCommerce extension supports the Mini-Cart, Cart or Checkout blocks. Check the relevant extension information and test the store’s actual purchase flow before treating the customization as complete.

Pre-publish test checklist

  1. Open the Mini-Cart with no products and verify the empty message and Start Shopping action.
  2. Add products and verify the Filled Mini-Cart state, cart information and available buttons.
  3. Test logged-in and guest behavior.
  4. Check desktop and mobile layouts.
  5. Test add-to-cart interactions, the Cart link and the Checkout link.
  6. Test payment, shipping, subscription, product-options, membership and other relevant extensions.
  7. Review caching, page assignments, permalinks and possible theme or plugin conflicts if behavior is stale or inconsistent.
  8. Confirm the chosen visibility on Cart and Checkout pages.

Customization is complete only after these checks reflect the store’s real navigation and checkout conditions. If a problem appears, isolate whether it concerns the template, page configuration, caching or an extension interaction before changing more settings.

The practical workflow is straightforward: configure the WooCommerce Mini-Cart block in the header, open the Mini-Cart Drawer template, and customize the Filled Mini-Cart and Empty Mini-Cart states within the controls the Site Editor provides. Treat hiding the block on Cart and Checkout pages as a tested design choice rather than a rule. Finally, verify dynamic behavior, page configuration and extension compatibility before publishing. Explore our WordPress plugins, WooCommerce extensions, themes and membership plans to find the right tools for your website.

Free Worldwide shipping

You can download the products right away at wpbetterplugins.com

Immediate delivery

After the payment is credited, the product is ready for download

International Warranty

Offered in the country of usage

100% Secure Checkout

Stripe / Apple Pay / Google Pay / MasterCard / Visa

Zadzwoń