Elementor Woo Mini Cart Widget Tutorial

Intro

Elementor WooCommerce Mini Cart Widget by Premium Addons enhances the shopping experience by displaying a mini cart on your website. This widget allows for easy customization, enabling you to adjust its appearance, behavior, and positioning to suit your store’s needs.

Check Elementor WooCommerce Mini Cart Widget demo.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Ensure Woo Mini Cart widget is enabled to find it in the Elementor editor.
• Premium Addons Pro is required for:
  • Trigger Behavior: Redirect to Cart Page
  • Cart Type: Mini-Window
  • Slide and Mini-Window Layout: “Layout 2”
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated.

Before We Get Started

To ensure the Elementor WooCommerce Mini Cart Widget works seamlessly

Users need to disable the default WooCommerce Mini Cart template in Elementor to avoid conflicts from WordPress Dashboard > Elementor > Settings > Integration Tab > Under WooCommerce, set the Mini Cart Template to Disable.

This step is essential to make sure that the Premium Addons mini cart overrides the Elementor mini cart template, allowing for the widget’s unique design and features. Users might need to refresh the cart template cache by adding a new item to their cart.

Key Features

• Trigger
• Mini Cart
• Style Customizations

Trigger

Mini Cart Trigger Settings

• Text: Customize the text displayed on the mini cart trigger.
• Subtotal: Toggle to display or hide the subtotal amount in the cart.
• Icon Type: Choose the type of icon to use (e.g., Icon or Image).
• Select an Icon: Pick an icon from the library or upload a custom image.
• Size and Stroke Width: Adjust the size and stroke width of the icon.

Cart Display Options

• Cart Items Count: Option to display the number of items in the cart.
• When Cart is Empty: Choose to show or hide the mini cart when it is empty.
• Size (PX): Define the size of the mini cart in pixels.
• Horizontal and Vertical Position: Adjust the mini cart’s position on the screen.

Display Customization

• Display: Choose how the cart is displayed (e.g., floating, inline).
• Icon Alignment: Set the alignment of the icon within the mini cart.
• Icon Order: Change the order of the icon and text.
• Text Display: Customize how text is displayed inside the mini cart.
• Cart Spacing and Cart Text Spacing: Adjust the spacing around the cart and the text inside it.

Please note that the Trigger Behavior "Redirect to Cart Page" requires Premium Addons PRO installed and activated on your website.

• Float: Enable or disable the floating cart feature. (Only available in Slide Menu)
• Horizontal and Vertical Position: Adjust the floating cart’s position.
• Trigger Behavior: Determine the action that triggers the mini cart (e.g., click or hover).

Mini Cart Settings

Please note that the Cart Type "Mini Window" and "Layout 2" for both Mini Window and Slide Menu require Premium Addons PRO installed and activated on your website.

• Direction: Set the direction in which the mini cart slides in (horizontal or vertical).
• Transition Effect: Choose the effect for the mini cart transition (e.g., Overlay).
• Layout: Select a layout style (e.g., Layout 1).
• Width: Adjust the width of the mini cart (in pixels).
• Height: Adjust the height of the mini cart (in pixels).
• Overlay: Toggle to enable or disable an overlay when the mini cart is open.
• Overlay Color: Customize the color of the overlay.
• Close On Click Outside Content: Enable or disable the option to close the mini cart when clicking outside of its content.

Header Customization

• Title: Toggle to show or hide the title for the mini cart.
• Title Text: Customize the title text (e.g., “Your Cart”).
• Select an Icon: Choose an icon to display next to the title.
• Icon Position: Set the position of the icon (left or right of the title).
• Size: Adjust the size of the icon (in pixels).

Product Settings

• Thumbnail: Customize the image size, fit, and spacing for product thumbnails in the mini cart.
• Product Info: Options to show or hide controls such as ‘Remove Item’ and ‘Quantity Controls’.
• Icon Size and Controls Size: Adjust the size of the remove and quantity control icons.

Divider and Spacing Options

• Items Divider: Toggle the divider between products on or off.
• Style, Color, and Thickness: Customize the divider style, color, and thickness.
• Items Spacing: Adjust the spacing between items in the mini cart.

Footer

• Subtotal: Toggle to show or hide the subtotal.
• Text: Customize the footer text and use the {{count}} placeholder to display the number of items.
• Order: Set the order of the subtotal and footer elements (e.g., left to right, right to left).
• View Cart: Toggle to show or hide the “View Cart” button.
• Checkout: Toggle to show or hide the “Checkout” button.
• Display: Choose how the buttons are displayed (e.g., inline, stacked).
• Order: Set the order of the “View Cart” and “Checkout” buttons.
• Spacing: Adjust the spacing between footer elements (in pixels).

---

Style Customizations

Trigger Style Settings

• Text Typography: Customize the typography settings (font family, size, weight, style) for the text on the trigger button.
• Subtotal Typography: Adjust typography settings specifically for the subtotal text.
• Count Typography: Modify typography for the item count display.
• Count Border Radius: Set the border radius for the item count badge.
• Color Customization (Normal & Hover States):
  • Cart Text Color: Change the color of the cart text.
  • Subtotal Color: Customize the color of the subtotal text.
  • Icon Color and Stroke: Adjust the color and stroke settings for the icon.

• Count Badge:
  • Color and Background Color: Customize the text color and background color of the count badge.
  • Border Type: Choose a border style (solid, dashed, dotted, etc.) for the badge.
• Container:
  • Background Type: Select the background type (color, gradient, image) for the mini cart container.
  • Border Type and Radius: Define the border style and radius for the container.
  • Padding: Adjust padding on all sides for spacing within the container.

Cart Header Style

• Title Typography and Color: Modify the typography and color settings for the cart title.
• Text Shadow: Add a shadow effect to the cart title text.
• Close Icon Style:
  • Icon Color: Customize the color of the close icon.
  • Background Color: Set the background color for the close icon.
  • Box Shadow: Add a shadow effect around the close icon.
  • Border Type and Radius: Choose a border style and radius for the close icon.

Cart Items Style

• Thumbnail:
  • Box Shadow: Add a shadow effect around product thumbnails.
  • Border Type and Radius: Customize the border style and radius for thumbnails.
• Title:
  • Text Typography: Modify the typography settings for product titles.
  • Color and Hover Color: Set the text color and hover color for product titles.
• Remove Icon:
  • Color and Hover Color: Customize the color and hover state color for the remove icon.
• Price:
  • Typography and Color: Adjust typography settings and text color for the product price.
• Quantity:
  • Typography and Color: Modify typography and color for the quantity label.
• +/- Buttons:
  • Normal and Hover States:
    • Color: Set the color of the buttons in normal and hover states.
    • Background Color: Customize the background color of the buttons.
    • Box Shadow: Apply shadow effects around the buttons.
    • Border Type: Choose the border style for the buttons.

Quantity Container Style

• Background Color: Define a background color for the quantity container.
• Box Shadow: Add a shadow effect to the quantity container.
• Border Type and Radius: Choose the border style and radius for the quantity container.
• Padding: Adjust the padding for the quantity container.

Containers Style

• Items Container:
  • Background Type: Choose the background type for the item’s container.
  • Border Type and Padding: Define the border style and add padding around the item’s container.
• Mini Cart Container:
  • Background Type: Select the background type for the mini cart.
  • Border Type and Padding: Set the border style and padding for the mini cart container.

Cart Footer Style

• Subtotal Text and Amount:
  • Typography and Color: Adjust the typography and color settings for both the subtotal text and amount.
• Background Type: Choose a background type for the cart footer.
• Padding: Set the padding around the footer content.
• Cart CTA:
  • Typography and Text Shadow: Customize the typography and add a text shadow for the call-to-action button.
  • Normal and Hover States: Define the style for both states of the CTA.
• View Cart and Checkout Buttons:
  • Color and Background Type: Set the text color and background type for the ‘View Cart’ and ‘Checkout’ buttons.
  • Box Shadow: Add shadow effects around the buttons.
  • Border Type, Radius, and Padding: Customize the border type, radius, and padding for the buttons.
  • Container Margin: Set the margin around the container to control its spacing relative to other elements on the page. You can adjust the top, right, bottom, and left margins independently to achieve the desired layout.
• Container:
  • Background Type: Choose the background type for the container (e.g., solid color, gradient, or image).
  • Border Type: Select a border style for the container, such as solid, dashed, or none.
  • Padding: Customize the padding inside the container to control the spacing around the content within.

---

Conclusion

The Elementor WooCommerce Mini Cart Widget by Premium Addons offers a versatile solution for online stores, providing customizable options to enhance the user experience. By tailoring the widget’s settings to your preferences, you can ensure a seamless shopping experience for your customers.

---

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.