DynamicPress injects an AJAX-powered slide-in mini cart into every page footer when WooCommerce is active. The cart updates instantly when products are added, supports quantity editing, and links through to checkout.
How the Mini Cart is Injected #
The mini cart HTML is rendered via a WordPress footer action hook and loaded once per page. The JavaScript class MiniCart initialises on page load and listens for WooCommerce’s native jQuery events.
| <!– This HTML is automatically added to the page footer: –> <div class=”mini-cart”> <div class=”mini-cart__header”> <div class=”mini-cart__title”>Cart</div> <div class=”mini-cart__close”><i class=”fa-solid fa-xmark”></i></div> </div> <div id=”mini-cart-items” class=”mini-cart__items”></div> <div class=”mini-cart__footer”> <div class=”mini-cart__total-label”>Total Amount</div> <div id=”mini-cart-total-amount” class=”mini-cart__price”>…</div> <div class=”update-cart”>Update Cart</div> <a class=”mini-cart__checkout” href=”/checkout”>Checkout</a> </div> </div> |
Opening the Mini Cart #
The cart opens when any element with the class showMiniCart is clicked. Add this class to any button, icon, or element in Bricks to create a cart trigger.
In Bricks Builder #
- Add a Button, Icon, or Div element.
- In the CSS Classes field, type: showMiniCart
- That element now opens the cart drawer on click (no custom code needed.)
| <!– Any element with this class opens the mini cart: –><button class=”showMiniCart”>Cart (3)</button> <!– Or with an icon: –><div class=”showMiniCart”> <i class=”fa-solid fa-cart-shopping”></i></div> |
| 💡 Tip: You can combine showMiniCart with your own Bricks classes. Add your layout/style class first, then showMiniCart as an additional class. |
Closing the Mini Cart #
The close button inside the cart uses the class mini-cart__close and is built into the injected HTML. The cart toggles the open class on .mini-cart to show and hide.
Building Your Own Add to Cart Button #
DynamicPress listens to WooCommerce’s standard jQuery adding_to_cart and added_to_cart events. This means any standard WooCommerce AJAX add-to-cart button triggers the mini cart automatically.
Required attributes for a custom add-to-cart button: #
| Attribute / Class | What It Does |
| class | Must include add_to_cart_button ajax_add_to_cart — these are the WooCommerce classes that trigger AJAX |
| data-product_id | The WooCommerce product ID (integer) |
| data-product_type | Product type: simple, variable, grouped, or external |
| data-quantity | Quantity to add (default: 1) |
| href | Set to ?add-to-cart={product_id} for non-JS fallback |
| <!– Minimum working custom add-to-cart button: –> <a class=”add_to_cart_button ajax_add_to_cart” data-product_id=”42″ data-product_type=”simple” data-quantity=”1″ href=”?add-to-cart=42″> Add to Cart</a> <!– With a Bricks icon button (use HTML element in Bricks): –> <button class=”add_to_cart_button ajax_add_to_cart brxe-button bricks-button” data-product_id=”{product_id}” data-product_type=”simple” data-quantity=”1″> <svg>…</svg> Add to Cart</button> |
When the button is clicked:
- WooCommerce fires the adding_to_cart jQuery event — DynamicPress hides the SVG icon inside the button and replaces it with a .loader spinner.
- WooCommerce fires the added_to_cart event — DynamicPress restores the icon, removes the spinner, and calls openMiniCart().
- The mini cart drawer slides open showing the updated cart.
- A toast notification appears: ‘Added To The Cart‘ with a View Cart link.
| 📝 Note: The loading spinner is injected dynamically next to any SVG element inside the button.If your button does not contain an SVG, the loading animation is skipped but the cart still opens correctly. |
Mini Cart Internal Class Reference #
These are the classes used inside the mini cart items. You will need them if you customise the mini cart CSS:
| Class / ID | Purpose |
| .mini-cart | The outer cart drawer (gets class ‘open’ when visible) |
| .mini-cart__item | Single cart item row |
| .mini-cart__item-image | Product thumbnail |
| .mini-cart__item-title a | Product name link |
| .mini-cart__attribute-name/value | Variation attribute label and value |
| .mini-cart__quantity-wrapper | Contains quantity controls + delete; holds data-product-id and data-item-key |
| .mini-cart-dynamicpress-quantity-minus | Minus quantity button |
| .mini-cart-dynamicpress-quantity-plus | Plus quantity button |
| .mini-cart__quantity-input | Quantity number input — holds data-price, data-product-id, data-item-key |
| .mini-cart-dynamicpress-delete-item | Delete item button |
| .mini-cart__price | Line total price display (updated after quantity change) |
| .update-cart | Update cart button – sends all updated quantities in one batch |
| #mini-cart-items | Container where cart item HTML is injected via AJAX |
| #mini-cart-total-amount | Cart total price – updated on every quantity/delete action |
| .mini-cart__checkout | Checkout button – links to /checkout |
