Cart dialog

The Cart dialog block can display a button to the WooCommerce mini cart widget in a Dialog, which is a light-weight alternative for the WC “Mini-cart” block.

Cart

Subtotal: 130.00

View cart Checkout

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.

View cart items 3
Cart

Subtotal: 130.00

View cart Checkout

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 it would be a good idea to turn it into a preset.