How to Set Up the Product Mini Cart in Elementor
The Product Mini Cart widget allows you to display a compact WooCommerce cart interface inside Elementor product templates. This widget lets customers quickly view items added to their cart without leaving the current page.
The widget dynamically pulls cart data from WooCommerce and displays product items, quantities, and totals inside a mini cart layout. It improves the shopping experience by allowing users to review cart contents instantly.
This widget is commonly used when designing WooCommerce product templates with Elementor Theme Builder.
Part of WooCommerce Elementor Widgets #
The Product Mini Cart widget is part of the WooCommerce widget collection included with Spexo Addons. These widgets allow you to design complete WooCommerce product templates directly inside Elementor.
You can explore the full widget library in the WooCommerce Elementor Widget Collection.
When to Use the Product Mini Cart Widget #
The Product Mini Cart widget is used when you want to display cart contents directly inside a product page or custom WooCommerce layout.
This widget is often placed near purchase sections so users can quickly review items they added to the cart. It works well with widgets that Add Products to the Cart and Display WooCommerce Notices.
Requirements #
Before using the Product Mini Cart widget make sure the required plugins and WooCommerce settings are configured.
- WooCommerce plugin installed and activated
- Products created in your WooCommerce store
- Cart functionality enabled in WooCommerce
- Elementor product template created
- Spexo Addons plugin installed and active
This widget works inside Elementor WooCommerce product templates.
How to Add the Product Mini Cart Widget #
Follow these steps to add the Product Mini Cart widget inside an Elementor WooCommerce template.
- Open the WooCommerce single product template in Elementor.
- Search for the Product Mini Cart widget in the Elementor widget panel.
- Drag the widget into your product page layout.
- The widget will display WooCommerce cart items dynamically.
After adding the widget the mini cart interface will appear inside your WooCommerce product template layout.
Style Settings #
To customize the Product Mini Cart widget appearance open the Style tab in the Elementor panel.
Style #
From this section you can customize text color, background color, typography, and spacing for the mini cart interface.
These options allow you to match the cart interface with the design of your WooCommerce product page.
Common Issues and Fixes #
If the mini cart does not appear confirm that you are editing a WooCommerce product template. This widget will not display cart data on normal pages.
If the cart is empty the mini cart will not show any items until a product is added to the cart.
If the widget does not appear in Elementor review the Widget Configuration Guide and confirm the widget is enabled.
Frequently Asked Questions #
Why is the mini cart empty? #
The mini cart will only display items when a product has been added to the WooCommerce cart.
Can I style the mini cart layout? #
Yes. You can customize colors, typography, and spacing using the Style tab in Elementor.
Does this widget update automatically? #
Yes. The mini cart updates dynamically when products are added or removed from the WooCommerce cart.
Getting stuck? Feel free to Contact Our Support for further assistance.
Navigation:
