How to customize the "Checkout" page

Updated 7 months ago

What is a Checkout page? #

Checkout is the required page of the site with WooCommerce if you want to sell online. It's created automatically after installation WooCommerce plugin, and you can easily find it in the list of pages:

By default, the checkout page has the Checkout element ([woocommerce_checkout] shortcode), which shows the predefined WooCommerce template for the order and billing details:

How to Customize the Checkout Page #

You can customize the Checkout page like any other page with WPBakery Builder or Live Builder. You can add rows, columns, and other elements as you like.

Start customizing by removing the default Checkout element ([woocommerce_checkout] shortcode) and using the following relevant elements from the Impreza library:

You can combine and move these elements, use different columns layout for them, and apply custom styling via the "Design" tab to create your own unique Checkout page appearance.

"Checkout - Billing Details" element #

Shows input fields for the billing details. While editing, you can adjust the number of columns, gaps, size, and wording for its title. Also, you can use Design settings.

"Checkout - Order Total" element #

Shows the total price of cart items. While editing, you can decide if your want to show the list of included products and sub-total price in it (before discount), as well as change the wording for the title and its size. Also, you can use Design settings.

"Checkout - Payment" element #

Shows the available payment options. While editing you can apply different styling adjustments to the options themselves and to the submit button. Also, you can use Design settings.

"Coupon Form" element #

Shows the input for applying the coupon code. While editing, you can adjust its placeholder as well as styling and label for the submit button. Also, you can use Design settings.

"Notices Box" element #

Shows the validation messages and notifications such as coupon application, field errors, etc. While editing, you can apply one of the pre-defined styles for the message box. Also, you can use Design settings.