Woo Cart

< All Topics
Widget Used
Woo Cart
Demo URL
Click Here
Tutorial Videos
Official Video

If you want to give a superior look to the cart section of your website with the customization and want to use it in the cart-related part of your website. We have made a well-designed Woo Cart widget. With the help of this widget, you can customize the cart section of your many shopping websites. For example, electronic, real estate, study, etc…
Note: you must have the WooCommerce plugin installed in your WordPress to use this widget feature.

Pro tip
Why not add this widget to your website/product? Because using this widget you can customize your website cart section which will attract your customer, and it will be sufficiently useful in your cart content as well as with the custom style option.

How to use the Woo Cart Widget of The Plus Addons For Elementor

The Woo Cart Widget comes with custom styling options, you can create a pleasant-looking cart section for your websites.

General Steps

Search for the Woo Cart element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Woo Cart widget. First, click on the Content tab.

1. Content

Woo Cart

1.1: Layout

Select Layout

We have provided two different layouts for the cart. Select your desired layout for the cart. The layouts we provided are:

Default
Custom

Sortable Repeater

We have given three options for a custom layout. Select your desired option for a custom layout. you can set the field where you want to set it, such as the top, middle, bottom, and add and remove it. The options we provided are:

Cart Data
Cart Total
Checkout Button

Cart Data/Cart Total Width

With this option, you can set the width of the cart data and the cart total option.

Button Text

With this option, you can set the button name of the checkout button option.

Checkout Button Width

With this option, you can set the width of the checkout button option.

1.2: Cart with Items

Display Cart

By enabling this option, you can see the style and coupon option of the cart.

Hide Coupon Option

By enabling this option, you can hide the option to set the coupon code.

Upsell/cross-sell Area

By enabling this option, you can see the option to set the full width of the upsell/cross-sell area.

Full Width

By enabling this option, you can set the full width of the upsell/cross-sell area.

Display Cart Total

By enabling this option, you can see the total of the cart.

Full-Width Cart Total

By enabling this option, you can set the full width of the cart total.

1.3: Empty Cart

Empty Cart Icon

We have provided two different types for the empty cart icon. Select your desired type for the cart. you can set the icon or image when the cart item is empty. The types we provided are:

Default
Custom

Upload Image

With this option, you can set a custom image for an empty cart.

Empty Cart Message

With this option, you can set a custom message for an empty cart.

1.4: Extra Options

Update Icons

With this option, you can replace default icons with another font awesome icon using the below options.

Apply Coupon

With this option, you can set the font awesome icon id of the apply coupon.

Update Cart

With this option, you can set the font awesome icon id of the update cart.

Cart Total

With this option, you can set the font awesome icon id of the cart total.

Proceed To Checkout

With this option, you can set the font awesome icon id of the proceed to checkout.

2.Style

The Style tab is used for customizing the look of all the Woo Cart widget components such as Empty Cart, Product List, Apply Coupon, Update Cart Button, Cart Total, Cart Change Address, Sell Product, Proceed to Checkout Button, Notices/Messages, and Content Background.

Empty Cart Style

Set Empty Cart Icon (Size, Color), Empty Cart Text (Typography, Color, Offset), Return To Shop Button (Typography, Button Width), Color, Background, Border, Border Radius, and Box Shadow for the Empty Cart here.

Product List Style

Set Margin, Padding, Alignment, Background, Border Type, Border Radius, Box Shadow, Product Table Heading (Typography, Heading Color, Background), Product Inner Table Heading Border, Product Inner Table Border, Remove Item Options (Color, Background Color), Product Image Options (Image Max Size, Border, Border Radius, Box Shadow), Product Title Options(Typography, Color), Product Price Options (Typography, Color), Product Quantity Options (Quantity Indicator Style Select Option – (Style 1: Typography, Color, Background, Border, Border Radius), (Style 2: (Product Quantity Plus Minus Options: Size, Color), (Quantity Box Options: Padding, Background, Border, Border Radius, Box Shadow))), and Product Sub Total Options (Typography, Color, Alignment) for the Product List here.

Apply Coupon Style

Set Typography, Input Width, Placeholder Color, Inner Padding, Margin, Text Color, Background, Border, Border Radius, Box Shadow, and Apply Coupon Button Option(Padding, Margin, Button Width, Typography, Color, Background, Border, Border Radius, Box Shadow) for the Apply Coupon here.

Update Cart Button Style

Set Padding, Margin, Button Width, Typography, Color, Background, Border, Border Radius, and Box Shadow for the Update Cart Button here.

Cart Total Style

Set Padding, Margin, Background, Border, Border Radius, Box Shadow, Heading Option (Alignment, Typography, Color, Background, Border), Cart Total Inner Text Option (Table Raw Alignment, Table Data Alignment, Typography, Heading Color, Label Color, Price Color, Border), and Cart Total (Total Alignment, Price Alignment, Border) for the Cart Total here.

Cart Change Address Style

Set Typography, Color, Address Form Option (Padding, Margin, Background, Border, Border Radius, Box Shadow), Form Field Option (Typography, Color, Placeholder Color, Background, Border, Border Radius, Box Shadow), and Address Button Update (Padding, Button Width, Typography, Color, Background, Border, Border Radius, Box Shadow) for the Cart Change Address here.

Sell Product Style

Set Padding, Background, Border, Border Radius, Box Shadow, Sell Product Heading (Typography, Color), Sell Product Inner Box Size(Max Size), Sell Product Title (Typography, Color), Sell Product Price (Typography, Color), and Sell Product Button (Padding, Button Width, Typography, Color, Background, Border, Border Radius, Box Shadow) for the Sell Product here.

Proceed to Checkout Button Style

Set Padding, Margin, Alignment, Button Width, Typography, Color, Background, Border, Border Radius, and Box Shadow for the Proceed to Checkout Button here.

Notices/Messages Style

Set Padding, Background, Border, Border Radius, Box Shadow, Cart Message Text (Typography, Color), Icon Options (Size, Color), and Undo Product Options (Typography, Text Color) for the Notices/Messages here.

Content Background Style

Set Padding, Margin, Height Select Option, Min Height, Background, Border, Border Radius, and Box Shadow for the Content Background here.

Preview

Here you can see with details how the Style option of the Woo Cart Widget works.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?