--- title: "How to Add a WooCommerce Mini Cart in WordPress?" url: https://nexterwp.com/docs/add-a-woocommerce-mini-cart-in-wordpress/ date: 2026-07-14 modified: 2026-07-14 author: "Aditya Sharma" description: "The Product Mini Cart block in Nexter Blocks adds a slide-in cart drawer to any WordPress page, so shoppers review and update their cart without leaving the page." word_count: 1077 --- # How to Add a WooCommerce Mini Cart in WordPress? The Product Mini Cart block in Nexter Blocks adds a slide-in cart drawer to any page of your WordPress site, letting shoppers review cart contents, adjust quantities, and proceed to checkout without leaving their current page. Unlike WooCommerce's default cart widget, which requires a sidebar widget area, this block can be placed anywhere in the WordPress block editor, including headers built with Nexter Builder. **Best Used For:** - WooCommerce stores that want a persistent cart shortcut in the header or sticky navigation bar - Shops with many product pages where keeping the cart visible reduces abandonment - Stores building a header layout in the Gutenberg editor that need a cart icon with a live count badge ## Required Setup - Make sure the default WordPress block editor is active. - WooCommerce installed and activated. - Nexter Blocks installed and activated. - This block requires a Pro plan. See the Nexter Blocks pricing page and the Free vs Pro comparison for what is included. ## How to Activate the Product Mini Cart Block? - Go to **Nexter > Blocks**. - Search for **Mini Cart** and toggle it on. ![Nexter Blocks admin with the WooCommerce blocks enabled](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-blocks-activate.png) ## Key Features - **Slide-In Cart Drawer**: opens a panel from the side of the screen showing all cart items when a visitor clicks the trigger. This keeps shoppers on their current page while making it easy to review and update the cart. - **Trigger Type (Pro)**: choose between a count badge icon and a labeled text button as the cart opener. Use the count badge in headers where space is limited, and the button type when the cart entry point is inside a page section. - **Quantity Controls (Pro)**: let visitors increase or decrease quantities and remove items directly from the drawer, without opening the full WooCommerce cart page. This reduces the steps between browsing and checkout, which is especially valuable on mobile. - **Full Style Control (Pro)**: customize the typography, colors, borders, spacing, and shadow of every element in the drawer, from the trigger icon to the checkout button, without writing custom CSS. ## How to Use the Product Mini Cart Block? To add the Product Mini Cart block, open a page in the WordPress block editor, click the **+** block inserter, search for **Product Mini Cart**, and place it on your layout. - Open a page in the WordPress block editor. - Click the **+** block inserter icon and search for **Product Mini Cart**. - Click the block to add it to the canvas. ### Trigger Button The Trigger Button panel controls the type of element visitors click to open the cart drawer. From the **Type** dropdown, choose how the cart trigger appears: - Count Badge: display a cart icon with a number overlay showing how many items are in the cart. Use this when adding the mini cart to a header where a compact icon fits better than a full button. - Button: show a labeled text button. Use this when the mini cart sits inside a page section where a clearly labeled button is easier to identify. Enable the **Show Count Badge** toggle to display the current item count directly on the cart icon. This option appears only when Type is set to Count Badge. ### Drawer The Drawer panel controls the size of the slide-in cart panel. In the **Drawer Width** field, set how wide the drawer opens when triggered, between 280px and 800px. This setting is responsive, so set different widths for desktop, tablet, and mobile. In the **Icon Size** field, set the size of the cart icon in the trigger, between 10px and 60px. ### Spacing The Spacing panel controls the padding and margin values for the drawer body and the trigger element. In the **Drawer Body Padding** field, set the inner spacing of the drawer content area. In the **Trigger Padding** field, set the padding around the cart icon or button. In the **Trigger Margin** field, set the outer spacing around the trigger element. All three settings are responsive. ![How to Use the Product Mini Cart Block - settings](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-ed-mini-cart-layout-1.png) ## How to Style the Product Mini Cart Block? To style the Product Mini Cart block, go to the **Style** tab in the Inspector panel. - **Trigger Icon**: change the border, border radius, box shadow, and the background and icon color in Normal and Hover states. This panel appears only when Type is set to Count Badge. - **Trigger Button**: change the typography, border, border radius, and the background and text color in Normal and Hover states. This panel appears only when Type is set to Button. - **Count Badge**: change the typography, background color, text color, border radius, and padding of the item count badge shown on the cart icon. - **Drawer**: change the background color, box shadow, and overlay color of the slide-in drawer panel. - **Drawer Header**: change the background, border, title color, title typography, title icon color, and inner padding of the top section of the drawer. - **Header Count Badge**: change the border radius, background color, and text color of the item count shown in the drawer header area. - **Close Button**: change the border radius and the background and icon color in Normal and Hover states of the button that closes the drawer. - **Item Row**: change the separator color between cart items, the gap between rows, the item inner padding, and the gap between the product thumbnail and content. - **Thumbnail**: change the border, border radius, and size of the product image shown in each cart row, between 40px and 160px. - **Item Title**: change the typography and color in Normal and Hover states of the product title link shown in each cart item row. - **Item Price**: change the text color and typography of the price shown for each cart item. - **Quantity Controls**: change the value typography, value text color, background color, border, and border radius of the quantity input field. Normal and Hover sub-tabs provide separate style control for the increment and decrement buttons. - **Remove Button**: change the icon color in Normal and Hover states. The Hover sub-tab also includes a background color option. - **Drawer Footer**: change the background color, border, and inner padding of the footer area at the bottom of the drawer. - **Subtotal**: change the label color, label typography, amount color, and amount typography for the cart subtotal row shown in the footer. - **View Cart Button**: change the typography, border radius, background color, text color, and border in Normal and Hover states. Also set the button inner padding using the View Cart Padding control. - **Checkout Button**: change the typography, border radius, background color, text color, and border in Normal and Hover states. This is how you can add a WooCommerce mini cart drawer in WordPress with Nexter Blocks. ![How to Style the Product Mini Cart Block - Style tab](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-ed-mini-cart-style-1.png)