Checkout Widget
Use the widget to customize checkout on your site.
Content
General
Choose between One and Two columns layout.
Billing Details
Title Alignment: Choose between Start, Center and End alignment for desktop, tablet and mobile.
Form Items
Here in the Content tab you can add Labels and Placeholders to the items or add Default Value in the Advanced tab.
Shipping Details
Title: Add the needed title here.
Form Items
Here in the Content tab you can add Labels and Placeholders to the items or add Default Value in the Advanced tab.
Additional Information
Additional Information: Slide to SHOW to enable additional information.
Items
Here in the Content tab you can add Label and Placeholder to the item or add Default Value in the Advanced tab.
Your Order
Title: Add the needed title here.
Alignment: Choose between Start, Center and End alignment for desktop, tablet and mobile.
Coupon
Coupon: Slide to SHOW to enable coupon.
Title Alignment: Choose between Start, Center and End title alignment for desktop, tablet and mobile.
Button Alignment: Choose between Start, Center and End button alignment for desktop, tablet and mobile.
Please note that this setting will only affect screen sizes Tablet and below.
Payment
Terms and Conditions
Message: Add the needed message here.
Link Text: Add the link text here.
Purchase Button
Alignment: Choose between Start, Center,End and Justify button alignment for desktop, tablet and mobile.
Style
Sections
Background Color: Choose background color.
Border Color: Set border color.
Gap Between: Set a gap between sections for desktop, tablet and mobile.
Padding: Set paddings for desktop, tablet and mobile.
Border Radius: Set a border radius for desktop, tablet and mobile.
Border Type: Choose the desired border type from the dropdown and set it.
Box Shadow: Choose desired settings from the dropdown.
Typography
Titles
Typography: Set a Typography using settings from the dropdown.
Color: Choose the titles’ color.
Text Shadow: Choose desired settings from the dropdown.
Spacing: Set a spacing between titles and forms for desktop, tablet and mobile.
Secondary Titles
Typography: Set a Typography using settings from the dropdown.
Color: Choose the secondary titles’ color.
Text Shadow: Choose desired settings from the dropdown.
Spacing: Set a spacing between titles and forms for desktop, tablet and mobile.
Descriptions
Typography: Set a Typography using settings from the dropdown.
Color: Choose the description color.
Spacing: Set a spacing for desktop, tablet and mobile.
Messages
Typography: Set a Typography using settings from the dropdown.
Color: Choose the messages’ color.
Checkboxes
Typography: Set a Typography using settings from the dropdown.
Color: Choose checkboxes color.
Radio Buttons
Typography: Set a Typography using settings from the dropdown.
Color: Choose radio buttons color.
Links
Typography: Set a Typography using settings from the dropdown.
Color: Choose the links color for Normal and Hover modes.
Forms
Columns Gap: Set columns gap for desktop, tablet and mobile.
Rows Gap: Set rows gap for desktop, tablet and mobile.
Labels
Typography: Set a Typography using settings from the dropdown.
Color: Choose the labels’ color.
Spacing: Set a spacing between labels and fields for desktop, tablet and mobile.
Fields
Typography: Set a Typography using settings from the dropdown.
Set the Normal and Focus modes.
Color: Set the color.
Background Color: Choose background color.
Border Color: Set border color.
Border Radius: Set a border radius for desktop, tablet and mobile.
Box Shadow: Choose desired settings from the dropdown.
Padding: Set paddings for desktop, tablet and mobile.
Border Type: Choose the desired border type from the dropdown and set it.
Buttons
Typography: Set a Typography using settings from the dropdown.
Set the Normal and Focus modes.
Color: Set the color.
Background Type: Choose background type between Color and Gradient.
Background Color: Choose background color.
Border Color: Set border color.
Border Radius: Set a border radius for desktop, tablet and mobile.
Text Shadow: Choose desired settings from the dropdown.
Box Shadow: Choose desired settings from the dropdown.
Padding: Set paddings for desktop, tablet and mobile.
Border Type: Choose the desired border type from the dropdown and set it.
Customize
Select sections of the checkout to customize.
You can set Billing details, Shipping address, Additional information, Order summary, Coupon and Payment.
Customize: Billing Detail
Section
Background Color: Choose background color.
Border Color: Set border color.
Gap Between: Set a gap between fields for desktop, tablet and mobile.
Padding: Set paddings for desktop, tablet and mobile.
Border Radius: Set a border radius for desktop, tablet and mobile.
Border Type: Choose the desired border type from the dropdown and set it.
Box Shadow: Choose desired settings from the dropdown.
Title
Typography: Set a Typography using settings from the dropdown.
Color: Choose the title color.
Text Shadow: Choose desired settings from the dropdown.
Checkbox
Typography: Set a Typography using settings from the dropdown.
Color: Choose the checkbox color.
Customize: Shipping Address
Section
Background Color: Choose background color.
Border Color: Set border color.
Gap Between: Set a gap between fields for desktop, tablet and mobile.
Padding: Set paddings for desktop, tablet and mobile.
Border Radius: Set a border radius for desktop, tablet and mobile.
Border Type: Choose the desired border type from the dropdown and set it.
Box Shadow: Choose desired settings from the dropdown.
Checkboxes
Typography: Set a Typography using settings from the dropdown.
Color: Choose the checkbox color.
Customize: Additional Information
Section
Background Color: Choose background color.
Border Color: Set border color.
Gap Between: Set a gap between sections for desktop, tablet and mobile.
Padding: Set paddings for desktop, tablet and mobile.
Border Radius: Set a border radius for desktop, tablet and mobile.
Border Type: Choose the desired border type from the dropdown and set it.
Box Shadow: Choose desired settings from the dropdown.
Labels
Typography: Set a Typography using settings from the dropdown.
Color: Choose the labels color.
Customize: Order Summary
Section
Background Color: Choose background color.
Border Color: Set border color.
Gap Between: Set a gap for desktop, tablet and mobile.
Padding: Set paddings for desktop, tablet and mobile.
Border Radius: Set a border radius for desktop, tablet and mobile.
Border Type: Choose the desired border type from the dropdown and set it.
Box Shadow: Choose desired settings from the dropdown.
Title
Typography: Set a Typography using settings from the dropdown.
Color: Choose the titles’ color.
Text Shadow: Choose desired settings from the dropdown.
Table Titles
Typography: Set a Typography using settings from the dropdown.
Color: Choose the titles’ color.
Background Color: Choose the titles’ background color.
Table Items
Typography: Set a Typography using settings from the dropdown.
Color: Choose the items’ color.
Background Color: Choose the items’ background color.
Rows Gap: Set a gap between rows for desktop, tablet and mobile.
Table Totals
Typography: Set a Typography using settings from the dropdown.
Color: Choose the totals’ color.
Background Color: Choose the totals’ background color.
Variations
Typography: Set a Typography using settings from the dropdown.
Color: Choose the variations color.
Message
Typography: Set a Typography using settings from the dropdown.
Color: Choose the message color.
Radio Button
Typography: Set a Typography using settings from the dropdown.
Color: Choose the button color.
Customize: Coupon
Section
Background Color: Choose background color.
Border Color: Set border color.
Gap Between: Set a gap between sections for desktop, tablet and mobile. Padding: Set paddings for desktop, tablet and mobile.
Border Radius: Set a border radius for desktop, tablet and mobile.
Border Type: Choose the desired border type from the dropdown and set it.
Box Shadow: Choose desired settings from the dropdown.
Secondary Title
Typography: Set a Typography using settings from the dropdown.
Color: Choose the secondary title color.
Links
Typography: Set a Typography using settings from the dropdown.
Color: Choose the links color for Normal and Hover modes.
Customize: Payment
Section
Background Color: Choose background color.
Border Color: Set border color.
Gap Between: Set a gap between sections for desktop, tablet and mobile. Padding: Set paddings for desktop, tablet and mobile.
Border Radius: Set a border radius for desktop, tablet and mobile.
Border Type: Choose the desired border type from the dropdown and set it.
Box Shadow: Choose desired settings from the dropdown.
Info Box
Background Color: Choose the info box background color.
Description
Typography: Set a Typography using settings from the dropdown.
Color: Choose the description color.
Message
Typography: Set a Typography using settings from the dropdown.
Color: Choose the message color.
Checkbox
Typography: Set a Typography using settings from the dropdown.
Color: Choose the checkbox color.
Radio Button
Typography: Set a Typography using settings from the dropdown.
Color: Choose the button color.
Links
Typography: Set a Typography using settings from the dropdown.
Color: Choose the links color for Normal and Hover modes.
Advanced
Set the Advanced options that are applicable to this widget