The “Woo Mini Cart Widget” allows you to add a customizable mini cart for free in WordPress Elementor websites with WooCommerce. This widget enhances the shopping experience by displaying a compact cart preview, allowing users to view their selected products without leaving the page. You can customize the layout, design, and styling to seamlessly match your site’s aesthetics.
Let’s explore the features of the “Woo Mini Cart Widget” below.
Elementor Woo Mini Cart Tutorial Video
In order to use this widget, firstly you need to install any of our WooCommerce Product Widgets from our widget library.
Add a Free Woo Mini Cart for Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “WooCommerce Mini Cart”
- Hover over the widget in the search results and click install
- Add your “WooCommerce Mini Cart” widget to any Elementor Page
Elementor Woo Mini Cart 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.
Elementor Woo 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.
Elementor Woo Mini Cart 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.
Elementor Woo Mini Cart 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 in Elementor Woo Mini Cart
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.
Elementor Woo Mini Cart Widget Styling
All elements of the widget’s design can be managed using various styling choices. You have the freedom to select colors that harmonize with your website’s aesthetic. Customize the text, icons, fonts, and layout to tailor the widget’s appearance and functionality to your specific preferences.
Elementor Woo Mini Cart Styling
In this section, set the width, height, background, padding, margin, and border of mini cart.
Elementor Woo Mini Cart Header Styling
You can set the background color, padding, border, typography, and title color of cart header.
Elementor Woo Mini Cart Close Icon Styling
Set the icon size, border radius, icon color, and border of cart close button.
Elementor Woo Mini Cart Product Styling
Here, you can set the product gap, padding, margin, background color, and border.
Elementor Woo Mini Cart Product Details Styling
You can set the typography, color, text shadow, and margin.
Elementor Woo Mini Cart Remove Product Button Styling
Set the positioning, padding, icon size, border radius, typography, background, and icon color for remove product button.
Elementor Woo Mini Cart Footer Styling
Style the background color, padding, border, and border color of cart footer.
Elementor Woo Mini Cart Subtotal Styling
You can set the text gap, padding, typography, title color, and text shadow for subtotal element.
Elementor Woo Mini Cart Buttons Styling
Set the button’s layout, text alignment, padding, typography, spacing, gap, and border.
View Cart Button Styling in Elementor Woo Mini Cart
You can set the view cart button width, text color, background color, and text shadow.
Elementor Woo Mini Cart Checkout Button Styling
Set the checkout button width, text color, background color, and text shadow.
Elementor Woo Mini Cart Toggle Button Styling (Pro)
You can set the toggle button alignment, typography, text color, background color, and border.
Elementor Woo Mini Cart Product Count Styling
In this section, set the product count typography, padding, text shadow, border, and text color.
Elementor Woo Mini Cart Empty Message Styling
You can set the empty message typography, color, and spacing.
Usage Examples of Elementor Woo Mini Cart
Here are some live use cases for the WooCommerce Mini Cart Widget.
Free Elementor Woo Mini Cart with a Woo Product Grid
Thank you for using the Woo Mini Cart Widget for Elementor! With its sleek design and seamless functionality, this is the best Woo Mini Cart Widget for Elementor, perfect for displaying a compact, user-friendly cart that enhances the shopping experience. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
