Checkout Widget

The 10Web Builder’s WooCommerce Checkout widget provides a highly customizable solution for building your online store’s checkout page. You can edit section titles, field labels, placeholders, and default values. Layouts, typography, and color schemes can be styled globally or for specific sections. Once published, you're prompted to set the created page as your default WooCommerce checkout page—no need to manually update settings in WooCommerce.

Adding the Checkout widget 

Add the Checkout widget to the canvas. For details, see Add elements to a page.

Content tab

Columns

• Sticky Right Column: Enabling this option will fix the “Order Summary” section while scrolling.

Fields

• Field labels: Enabling this option will show the name (label) of the field out of the box.
• Field placeholder: Enabling this option will place the name (placeholder) of the field inside the box where should be placed the information to be filled in.

Contact info

• Contact section title: Write any name you prefer or choose from dynamic options.
• Log in link text: Customize the text displayed for the login link shown to returning customers at checkout.

Shipping and Billing Details

• Shipping section title: Customize the text displayed for the shipping field or use dynamic tags.
• Billing section title: Customize the text displayed for the login link shown to returning customers at checkout.
• Company name field: Choose to show or hide this field.
• Company name required: Enable this option if this section is mandatory for you.
• Address line 2 field: Choose to show or hide this field.
• Address line 2 required: Enable this option if this section is mandatory for you.
• Phone field: Choose to show or hide this field.
• Phone field required: Enable this option if this section is mandatory for you.
• Order notes field: Choose to show or hide this field.

Payment methods

• Payment section title: Customize the text displayed for the Payment section or use dynamic tags.
• Payments descriptive text: Choose to show or hide the descriptive text of your payment methods.

Checkout button

• Checkbox checked by default: Choose whether the Terms and Privacy Policy agreement checkbox should be pre-selected at checkout or left unchecked for customers to manually confirm.
• Purchase button text: Customize the text displayed for the Purchase button.

Order summary & coupon code

Order summary

• Order summary section title: Customize the text displayed for the Order Summary section or use dynamic tags.
• Product images: Choose to show or hide the images of the chosen products.

Coupon codes

• Coupon code field: Choose to show or hide this field.
• Coupon code placeholder: Customize the text displayed in the field before filling it.
• Coupon code action button text: Customize the text for the button to apply the code. 

Style tab

Columns

Left column

• Background type: Use the icons to choose between a classic or gradient background.
• Color (background): From the color picker, select the color(s) for the left column background.
• Image: Click to select or upload an image to the media library to use as the background image of the left column.
• Background color width: Choose the option of the color being Boxed or with Full width.
• Border type: From the dropdown menu, select between solid, double, dotted, dashed, or grooved
  
  Width (border): Enter a chosen value in the fields based on px, em, or %.
  Color (border): From the color picker, choose the background color for your border.
• Border radius: Enter a chosen value in the fields based on px, em, or %.
• Padding: Enter a chosen value in the fields based on px, em, or %.
• Margin: Enter a chosen value in the fields based on px, em, or %.

Right column

• Background type: Use the icons to choose between a classic or gradient background
• Color (background): From the color picker, select the color(s) for the right column background.
• Image: Click to select or upload an image to the media library to use as the background image of the right column.
• Background color width: Choose the option of the color being Boxed or with Full width.
• Border type: From the dropdown menu, select between solid, double, dotted, dashed, or grooved
  
  Width (border): Enter a chosen value in the fields based on px, em, or %
  Color (border): From the color picker, choose the border color for your border
• Border radius: Enter a chosen value in the fields based on px, em, or %
• Padding: Enter a chosen value in the fields based on px, em, or %
• Margin: Enter a chosen value in the fields based on px, em, or %

Sections

Section titles

• Alignment: Using the icons, select between left or center alignment.
• Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
• Text color: From the color picker, choose the color for your field text. This color will apply to the section title.
• Spacing below the section titles: Use the slider to increase or decrease the spacing below the section titles.
• Spacing between sections: Use the slider to increase or decrease the spacing between the sections.

Fields

Placeholders

• Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
• Text color: From the color picker, choose the color for your field text for Normal, Hover, and Active states. This color will apply to all placeholder text. 

Fields

• Field gap: Use the slider or enter the value in the field in PX to set the gap between the fields.
• Padding: Enter a chosen value in the fields based on px, em, or %.
• Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
• Text color: From the color picker, choose the color for your field text for Normal, Hover, and Active states. This color will apply to all field text.
• Background type: Use the icons to choose between a classic or gradient background
• Color (background): From the color picker, select the color(s) for the right column background.
• Image: Click to select or upload an image to the media library to use as the background image of the right column.
• Background color width: Choose the option of the color being Boxed or with Full width.
• Border type: From the dropdown menu, select between solid, double, dotted, dashed, or grooved.
  
  Width (border): Enter a chosen value in the fields based on px, em, or %.
  Color (border): From the color picker, choose the border color for your border.
• Border radius: Enter a chosen value in the fields based on px, em, or %.
• Padding: Enter a chosen value in the fields based on px, em, or %.
• Margin: Enter a chosen value in the fields based on px, em, or %.
   

Error messages

• Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
• Error text & border color: From the color picker, choose the text and border color for your error messages.

Shipping & billing details

Billing address auto-fill

• Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
• Text color: From the color picker, choose the color for your field text for Normal and Active states.
• Checkbox size: Use the slider to change the size of the checkbox.

Shipping methods

• Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
• Radio button color: From the color picker, choose the color for your radio button.
• Radio button size: Use the slider to change the size of the radio button.
• Text color: From the color picker, choose the color for your field text for Normal and Active states.
• Background type: Use the icons to choose between a classic or gradient background
• Color (background): From the color picker, select the color(s) for the background.
• Image: Click to select or upload an image to the media library to use as the background image.
• Text shadow: Click the pencil icon to open the shadow properties options.
• Border type: From the dropdown menu, select between solid, double, dotted, dashed, or grooved
  
  Width (border): Enter a chosen value in the fields based on px, em, or %
  Color (border): From the color picker, choose the border color for your border
• Border radius: Enter a chosen value in the fields based on px, em, or %
• Padding: Enter a chosen value in the fields based on px, em, or %
• Margin: Enter a chosen value in the fields based on px, em, or %

Payment methods

• Title typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options for the title.
• Description typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options for the description.
• Radio button color: From the color picker, choose the color for your radio button.
• Radio button size: Use the slider to change the size of the radio button.
• Title color: From the color picker, choose the color for your title text for Normal and Active states.
• Background type: Use the icons to choose between a classic or gradient background
• Color (background): From the color picker, select the color(s) for the background.
• Image: Click to select or upload an image to the media library to use as the background image.
• Text shadow: Click the pencil icon to open the shadow properties options.
• Border type: From the dropdown menu, select between solid, double, dotted, dashed, or grooved
  
  Width (border): Enter a chosen value in the fields based on px, em, or %
  Color (border): From the color picker, choose the border color for your border
• Border radius: Enter a chosen value in the fields based on px, em, or %
• Padding: Enter a chosen value in the fields based on px, em, or %
• Margin: Enter a chosen value in the fields based on px, em, or %

Checkout button

Terms and privacy policy

• Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
• Text color: From the color picker, choose the color for your button text .
• Links color: From the color picker, choose the color for your link text.
• Checkbox size: Use the slider to change the size of the checkbox.
• Spacing below agreement: Use the slider to change the size of the spacing below the agreement.

Checkout button

• Space below button: Use the slider to change the size of the space below the agreement.
• Padding: Enter a chosen value in the fields based on px, em, or %
• Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
• Text color: From the color picker, choose the color for your button text for Normal and Hover states.
• Background type: Use the icons to choose between a classic or gradient background
• Color (background): From the color picker, select the color(s) for the button background.
• Image: Click to select or upload an image to the media library to use as the background image of the right column.
• Box shadow: Click the pencil icon to set the color and shadow options
• Border type: From the dropdown menu, select between solid, double, dotted, dashed, or grooved
  
  Width (border): Enter a chosen value in the fields based on px, em, or %
  Color (border): From the color picker, choose the background color for your border
• Border Radius: Enter a chosen value in the fields based on px, em, or %

Order summary & coupon codes

Product Title

• Product title typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options for the product title.
• Product title color: From the color picker, choose the color for your product title text.
• Product price typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options for the product price typography.
• Product price color: From the color picker, choose the color for your product price text.
• Product image border radius: Enter a chosen value in the fields based on px, em, or %
• Spacing between products: Use the slider to change the size of the spacing between the products.
• Spacing below products: Use the slider to change the size of the space below the products.

Coupon code action button

• Spacing below coupon field: Use the slider to change the size of the spacing below the coupon field.
• Padding: Enter a chosen value in the fields based on px, em, or %
• Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
• Text color: From the color picker, choose the color for your button text for Inactive, Normal and Hover states.
• Background type: Use the icons to choose between a classic or gradient background
• Color (background): From the color picker, select the color(s) for the button background.
• Image: Click to select or upload an image to the media library to use as the background image of the coupon code action button.
• Box shadow: Click the pencil icon to set the color and shadow options
• Border type: From the dropdown menu, select between solid, double, dotted, dashed, or grooved
  
  Width (border): Enter a chosen value in the fields based on px, em, or %
  Color (border): From the color picker, choose the background color for your border
• Border radius: Enter a chosen value in the fields based on px, em, or %

Subtotals

• Spacing between subtotals: Use the slider to change the size of the spacing between the subtotals.
• Typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options.
• Text color: From the color picker, choose the color for the text.
• Spacing below subtotals: Use the slider to change the size of the spacing below the subtotals.

Total

• Total title typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options for the total title.
• Total title color: From the color picker, choose the color for your total title text.
• Total price typography: From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options for the total price typography.
• Total price color: From the color picker, choose the color for your total price text.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.