The Cart dialog block can display a button that opens the WooCommerce mini cart widget in a Dialog, which is a light-weight alternative for the WC “Mini-cart” block.
Example mini cart icon for header:
When WooCommerce isn’t activated the block renders nothing.
The inner block for the Cart dialog block is a button that will open the dialog – the button can be customized using any blocks, how ever the main element should remain a <button>
(or use the x-bind="trigger"
attribute to work with the Dialog module) and the element that should display the cart item count should have the .ska-cart-item-count
class.
The block comes with a [&_.woocommerce-mini-cart]
selector that can contain Tailwind classes for styling the contents of the dialog. If you plan to use the mini cart in multiple places (or in the header) it would be a good idea to turn it into a preset.