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

If you want to give a preferred look to the checkout section of your website with the customization and want to use it in the checkout-related part of your website. We have made a well-designed Woo Checkout widget. With the help of this widget, you can customize the checkout 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 checkout section which will attract your customer, and it will be sufficiently useful in your checkout content as well as with the custom style option.

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

The Woo Checkout widget comes with two different types of layout, with custom styling options you can create a pleasant-looking checkout section for your websites.

General Steps

Search for the Woo Checkout 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 Checkout widget. First, click on the Content tab.

1. Content

Woo Checkout

1.1: Layout

Select Style

We have provided four different styles for the checkout. Select your desired style for the checkout. You can watch this video to know more about it. The styles we provided are:

Style 1
Style 2

Left Section Width

With this option, you can set the left section width when you have selected a style 2 in the style menu.

1.1: Extra Options

Update Icons

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

Billing Heading

With this option, you can set the font awesome icon id of the billing heading.

Shipping Heading

With this option, you can set the font awesome icon id of the shipping heading.

Your Order Heading

With this option, you can set the font awesome icon id of your order heading.

Apply Coupon

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

Place Order

With this option, you can set the font awesome icon id of place order.

2.Style

The Style tab is used for customizing the look of all the Woo Checkout widget components such as Returning Customer Login, Create Account, Apply Coupon, Billing Form Heading, Billing Form Label, Billing Form Input Field, Billing Form Textarea, Billing Form, Shipping Form, Order Notes, Order Form Heading, Order Details Form, Order Payment, Stripe Payment, Privacy Policy, Place Order Button, Order Form, and Checkout Background.

Returning Customer Login Style

Set Background, Border, Border Radius, Box Shadow, Text Option (Typography, Text Color), Icon Option (Icon Color), Link Option (Typography, Color), Login Inner Options (Inner Padding, Margin, Background, Border, Border Radius, Box Shadow), Text Options (Typography, Color ), Label Options (Inner Padding, Margin, Typography, Label Color, Required Symbol), Remember Me Option (Typography, Label Color), Input Field Option (Inner Padding, Margin, Typography, Text Color, Background, Border, Border Radius, Box Shadow), Button Option (Padding, Width, Typography, Color, Background, Border, Border Radius, Box Shadow), and Lost your password Options (Inner Padding, Margin, Typography, Text Color) for the Returning Customer Login here.

Create Account Style

Set Padding, Margin, Background, Border, Border Radius, Box Shadow, and Create Account Text (Typography, Color) for the Create Account here.

Apply Coupon Style

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

Billing Form Heading Style

Set Typography, and Heading Color for the Billing Form Heading here.

Billing Form Label Style

Set Inner Padding, Margin, Typography, Label Color, and Required Symbol for the Billing Form Label here.

Billing Form Input Field Style

Set Inner Padding, Margin, Typography, Placeholder Color, Text Color, Background, Border, Border Radius, and Box Shadow for the Billing Form Input Field here.

Billing Form Textarea Style

Set Inner Padding, Margin, Typography, Placeholder Color, Text Color, Background, Border, Border Radius, and Box Shadow for the Billing Form Textarea here.

Billing Form Style

Set Padding, Margin, Background, Border, Border Radius, and Box Shadow for the Billing Form here.

Shipping Form Style

Set Padding, Margin, Background, Border, Border Radius, and Box Shadow for the Shipping Form here.

Order Notes Style

Set Padding, Margin, Typography, Heading Color, Background, Border, Border Radius, and Box Shadow for the Order Notes here.

Order Form Heading Style

Set Typography, and Heading Color for the Order Form Heading here.

Order Details Form Style

Set Padding, Margin, Product Name, Price, Typography, Main Color, Body Text Color, Qty Color, Table Body Typography, Table Footer Text Color, Alignment, Table Footer Typography, Total Color, Total Alignment, Table Footer Typography, Background, Border, Border Radius, Box Shadow, Main Inner Border Option (Border, Border Radius, Box Shadow), Head Inner Border Option (Border, Border Radius, Box Shadow), Overflow Switcher Option, Body Inner Border Option (Border, Border Radius, Box Shadow), and Total Border Option (Border, Border Radius, Box Shadow) for the Order Details Form here.

Order Payment Style

Set Padding, Background, Border, Border Radius, Box Shadow, Payment Label (Typography, Label Color), Payment Description (Padding, Typography, Text Color, Background Color, Border, Border Radius, Box Shadow), and Arrow Switcher Option, Arrow Offset for the Order Payment here.

Stripe Payment Style

Set Padding, Margin, Background, Border, Border Radius, Box Shadow, Input Field Row Outer Padding, Input Field Row Outer Margin, Label Option (Typography, Color), Save Payment Info Option (Checkbox Size), Save Payment Text Option (Typography, Color), and Heading Text Option (Typography, Color) for the Stripe Payment here.

Privacy Policy Style

Set Padding, Typography, Text Color, and Privacy Policy Link (Link Color) for the Privacy Policy here.

Place Order Button Style

Set Padding, Width, Typography, Color, Background, Border, Border Radius, and Box Shadow for the Place Order Button here.

Order Form Style

Set Padding, Margin, Background, Border, Border Radius, Box Shadow, and Overflow Switcher Option for the Order Form here.

Checkout Background Style

Set Padding, Margin, Background, Border, Border Radius, and Box Shadow for the Checkout Background here.

Preview

Here you can see with details how the Style option of the Woo Checkout 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?
Need help?