In this documentation, we will show you how to customize the WooCommerce Mini Cart widget presented by the Element Pack Pro add-on.

Insert WooCommerce Mini Cart Widget

1. Search by the WC – Mini Cart widget name.
2. The widget will appear, Check the Element Pack Pro logo on top right corner.
3. Select the widget then Drag and Drop it on the editor page.

The default view of WooCommerce Mini Cart widget

The Mini Cart displays the Total Price and Icon.

After Clicking on the Mini Cart appears the Offcanvas. The Offcanvas displays the Title, Before And After Message, and Empty Products Message.

The WooCommerce Mini Cart with Products

After Adding any Products the Mini Cart displays the Quantity of Products and Total price.

The Offcanvas displays the Products with Image, Title and Quantity, Total Amount, and Two Buttons to View Cart and Checkout.

Content Tab Customization

Mini Cart Section

Go to Content > Mini Cart

1. Show Price Amount: Enable the switcher to show the Total Price of the Products after adding to Cart.
2. Show Cart Icon: Enable the toggle switcher to show the Cart Icon.
3. Icon: Set the cart icon different presets are available.
4. Show Badge: Enable the switcher to show the Badge. It demonstrate the Count of total products.
5. Alignment: Set the position for the Cart, Left, Center, Right.
6. Icon Spacing: Set the spacing for the Icon.

Offcanvas Section

Go to Content > Offcanvas

1. Cart Title: Set the Title for the Cart.
2. Custom Content Before: Enable the toggle switcher to show to custom content before.
3. Custom Content After: Enable the toggle switcher to show to custom content before.
4. Overlay: It allows to show the overlay cart.
5. Animations: Set different kind of animations for the cart sliding.
6. Flip: It will flip the cart to opposite direction.

7. Close Button: Enable the switcher to demonstrate the Close button.
8. Close on Click Background: Enable the switcher to close it by clicking on the Background.
9. Close on Press ESC: It allows to close the Cart by pressing on ESC Button.
10. Width: Set the width for the Cart.
11. Height: Set the height for the Cart.
12. Trigger to Cart Update: Enable the switcher to update the cart on triggering.

Custom Content Before Section

Go to Content > Custom Content Before

1. Custom Content Before: Set the content Before Text.

Custom Content After Section

Go to Content > Custom Content After

1. Custom Content After: Set the content After Text.

Style Tab Customization

Mini Cart Section

Go to Style > Mini Cart

1. Mini Cart Customization:

• Color: Select the Color for the Background.
• Background Color: Set the Background color for the Cart.
• Border Type: Choose the border type for the Mini cart area.
• Border Radius: Set the border radius.
• Padding: Set the padding for the cart.
• Typography: Choose the typography for the Text.

2. Cart Icon:

• Color: Choose the Color for the Cart Icon.
• Typography: Choose the typography for the Icon. It changes the size according to the Cart Size.

3. Cart Badge:

• Color: Set the color for the Badge.
• Background: Set the background color for the cart.
• Typography: Choose the typography for the badge.

Offcanvas Section

Go to Style > Offcanvas

Product List

1. Cart Title

• Cart Title Color: Set the color for the Cart Title.
• Cart Before Color: Set the Cart Before text.
• Typography: Set the typography for the title.

2. Product Cart

• Title Color: Set the color for the Product Title.
• Title Hover Color: Choose the hover color for the Title.
• Typography: Set the typography for the this.
• Item Border Color: Choose the Item Border color.

4. Image

• Border Type: Choose the border type for the Image.
• Image Border Radius: Set the border corner edges rounded.

5. Subtotal

• Subtotal Color: Choose the subtotal color.
• Tax Color: Set the Tax Color.
• Typography: Set the typography for the Subtotal.

6. View Cart Button

• Color: Set the color for the View Cart Button text.
• Hover Color: Set the hover color for the View Cart Button text.
• Background Color: Set the Background color for the View Cart Button.
• Hover Background Color: Set the Hover Background color for the View Cart Button.
• Border Type: Choose the border type for the Button. Different type are available dotted, dashed, grove, none, etc.
• Border Radius: Set the border radius for the button.
• Padding: Choose the padding for the border.
• Box Shadow: Make a box shadow for the button.
• Typography: Set the typography for the box.

7. Checkout Buttons

• Color: Choose the color for the Checkout buttons.
• Hover Color: Select the hover color for the buttons.
• Background Color: Set the background color of the button.
• Hover Background Color: Select the hover background color.
• Border Type: Set the border type.
• Border Radius: Make the border radius.
• Padding: Set the padding for inner space of the button.
• Box Shadow: Make a Box shadow for the Buttons.
• Typography: Choose the typography of the buttons.

8. Product Remove Button

• Color: Choose the color for the Product Remove buttons.
• Hover Color: Select the hover color for the buttons.
• Background Color: Set the background color of the button.
• Hover Background Color: Select the hover background color.
• Border Type: Set the border type.
• Border Radius: Make the border radius.
• Padding: Set the padding for inner space of the button.
• Box Shadow: Make a Box shadow for the Buttons.

Offcanvas Close Button Section

Go to Style > Offcanvas Close Button

Normal

1. Color: Choose the Color for the offcanvas close button.
2. Background: Select the Background Color.
3. Box Shadow: Make a shadow for the button.
4. Border Type: Choose the border type.
5. Radius: Make the border radius.
6. Padding: Set the inner spacing of the button.

Hover

1. Color: Choose the color for the offcanvas close button.
2. Background: Choose the background color.

Video Assist

Thanks for watching the WooCommerce Mini Cart Widget Video Tutorial. Please visit the demo page for examples.

Thanks for being with us.