fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Circle Progress Bar Featured
Vertical Progress Bar - Featured
custom-cursor-elementor

WooCommerce Mini Cart

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.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “WooCommerce Mini Cart”
  3. Hover over the widget in the search results and click install
  4. Add your “WooCommerce Mini Cart” widget to any Elementor Page

General Settings

1

Transition Duration

Set the transition duration in milliseconds.

2

Enable Toggle Mode

By enabling this viewer can toggle between mini cart view and cart bar.

3

Mini Cart Hide Delay

Set time for mini cart hide delay in milliseconds.

4

Mini Cart Fade-In-Out Delay

Set the duration between fade in and out of mini cart.

Layout Settings

1

Show Cart Title

Show/Hide the cart title text.

2

Cart Title

Type text to show as cart title.

3

Show Cart Close Button

Show/Hide the cart close button.

4

Cart Close Button

Choose icon to show as cart close button.

Toggle Mode Settings

1

Toggle Text

Type text to show as toggle.

2

Show Toggle Icon

Show/Hide the toggle icon.

3

Toggle Icon

Choose an icon for toggle button.

4

Show Cart Total in Toggle

Show/Hide the cart total in toggle mode.

5

Show Product Count

Show/Hide the product count.

Product Layout Settings

1

Show Remove Product Button

Show/Hide the remove product button.

2

Show Product Image

Show/Hide the product image in mini cart.

3

Show Product Quantity

Show/Hide the product quantity.

4

Show Product Quantity Input

Show/Hide the product quantity input.

Cart Footer Layout Settings

1

Show Subtotal

Show/Hide the subtotal section.

2

Show Text

Type text to show as subtotal.

3

Show Checkout Button

Show/Hide the checkout button.

4

Checkout Button Text

Type text to show as checkout button.

5

Show Cart Buttton

Show/Hide the cart button.

6

Cart Button Text

Type text to show as cart button.

7

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.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!