The “WooCommerce Mini Cart Widget” can significantly elevates the online shopping experience. It empowers shoppers to effortlessly access their cart contents, make quantity adjustments, and seamlessly proceed to checkout, all without having to navigate away from their current page. Cart abandonment is a prevalent concern in the realm of e-commerce. The WooCommerce Mini Cart Widget addresses this issue by presenting the cart’s contents and facilitating easy access to the checkout page. This user-friendly approach effectively reduces cart abandonment rates, leading to increased sales.
Let’s look at each of the options in the “WooCommerce Mini Cart Widget” below.
In order to use this widget firstly you need to install any of our WooCommerce Product Widget from our widget library.
Install WooCommerce Mini Cart Widget for Elementor #
This widget requires Unlimited Elements PRO 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
General Settings #
Transition Duration
Set the transition duration in milliseconds.
Enable Toggle Mode
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 #
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
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
Show/Hide the checkout button.
Checkout Button Text
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.
WooCommerce 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.
Mini Cart Styling #
In this section, set the width, height, background, padding, margin, and border of mini cart.
Cart Header Styling #
You can set the background color, padding, border, typography, and title color of cart header.
Cart Close Icon Styling #
Set the icon size, border radius, icon color, and border of cart close button.
Product Styling #
Here, you can set the product gap, padding, margin, background color, and border.
Product Details Styling #
You can set the typography, color, text shadow, and margin.
Remove Product Button Styling #
Set the positioning, padding, icon size, border radius, typography, background, and icon color for remove product button.
Cart Footer Styling #
Style the background color, padding, border, and border color of cart footer.
Subtotal Styling #
You can set the text gap, padding, typography, title color, and text shadow for subtotal element.
Buttons Styling #
Set the button’s layout, text alignment, padding, typography, spacing, gap, and border.
View Cart Button Styling #
You can set the view cart button width, text color, background color, and text shadow.
Checkout Button Styling #
Set the checkout button width, text color, background color, and text shadow.
Toggle Button Styling #
You can set the toggle button alignment, typography, text color, background color, and border.
Product Count Styling #
In this section, set the product count typography, padding, text shadow, border, and text color.
Empty Message Styling #
You can set the empty message typography, color, and spacing.
Usage Examples #
Here are some live use cases for the WooCommerce Mini Cart Widget.
