Enhancing the shopping experience is crucial for any WooCommerce store, and a mini cart can make all the difference. A WooCommerce mini cart allows customers to quickly view their cart items, update quantities, and proceed to checkout without navigating away from their current page. In this guide, you’ll learn how to add a WooCommerce mini cart in Elementor for free, ensuring a seamless and user-friendly shopping journey.
What Makes the WooCommerce Mini Cart Widget Special?
Seamless Accessibility
With just one click, shoppers can instantly access their cart, making the shopping process smoother. This minimizes the gap between browsing and completing a purchase.
Perfect Integration
Built for Elementor users, the WooCommerce Mini Cart Widget integrates flawlessly with the Elementor page builder. This compatibility allows for effortless customization and a cohesive website design.
Real-Time Engagement
The widget updates automatically as customers add or remove items from their cart. This dynamic feature enhances user interaction, encouraging more product exploration and potential upsells.
Combat Cart Abandonment
Cart abandonment is a common issue in e-commerce. By keeping the cart visible and checkout easily accessible, this widget helps lower abandonment rates and significantly improve conversions.
Limitless Customization
With extensive styling options, you can modify the widget’s layout, colors, and typography to seamlessly match your website’s design and branding.
Mobile-Friendly Design
Understanding the needs of mobile users, this widget is fully responsive. It ensures an optimal shopping experience on smartphones and tablets, catering to all device types.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Woo Mini Cart widget to your Elementor website
To add a WooCommerce mini cart in Elementor, install the Woo Mini Cart widget from the Unlimited Elements Widget library.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Woo Mini Cart"
Hover over the widget and click install
Step #3: Add Woo Mini Cart widget to your Elementor page
Now, in the Elementor editor, Find the Woo Mini Cart widget and drag it to the desired part of your page.
General Settings
Transition Duration
Set the transition duration in milliseconds.
Enable Toggle Mode (Pro)
By enabling this viewer can toggle between mini cart view and cart bar.
Mini Cart Hide Delay
Set time for mini cart hide delay in milliseconds.
Mini Cart Fade-In-Out Delay
Set the duration between fade in and out of mini cart.
Layout Settings
Show Cart Title
Show/Hide the cart title text.
Cart Title
Type text to show as cart title.
Show Cart Close Button
Show/Hide the cart close button.
Cart Close Button
Choose icon to show as cart close button.
Toggle Mode Settings (Pro)
Toggle Text
Type text to show as toggle.
Show Toggle Icon
Show/Hide the toggle icon.
Toggle Icon
Choose an icon for toggle button.
Show Cart Total in Toggle
Show/Hide the cart total in toggle mode.
Show Product Count
Show/Hide the product count.
Product Layout Settings
Show Remove Product Button
Show/Hide the remove product button.
Show Product Image
Show/Hide the product image in mini cart.
Show Product Quantity
Show/Hide the product quantity.
Show Product Quantity Input (Pro)
Show/Hide the product quantity input.
Cart Footer Layout Settings
Show Subtotal
Show/Hide the subtotal section.
Show Text
Type text to show as subtotal.
Show Checkout Button (Pro)
Show/Hide the checkout button.
Checkout Button Text (Pro)
Type text to show as checkout button.
Show Cart Buttton
Show/Hide the cart button.
Cart Button Text
Type text to show as cart button.
Empty Message Text
Type text to show as empty message.
Wrapping it Up!
By integrating a WooCommerce mini cart in Elementor, you can improve the shopping experience and boost conversions. With a simple setup, your customers can effortlessly manage their carts without interruptions, making the buying process more convenient. Now that you have your mini cart ready, explore additional ways to enhance your store’s usability and design for an even better customer experience!
