Impreza Knowledge Base WooCommerce How to customize Checkout page

How to customize Checkout page

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: 

2673.png

By default, the checkout page has the [woocommerce_checkout] shortcode/element, which shows the predefined WooCommerce template for the order and billing details.

2674.png

How to Customize the Checkout Page #

You can customize the Checkout Page like any other page with WP Bakery page builder or the Theme's Live Builder. You can add rows, columns, and other elements of content and structure as you like.

Start customizing by removing the default [woocommerce_checkout] shortcode/element and using the relevant checkout elements from the Theme's library:

2677.png

Elements marked as "Required" are needed for the work of the Checkout page.

  1. (Required) Checkout - Billing Details — shows the required input fields for the billing details. While editing, you can adjust the number of columns, gaps, size, and wording for its title. The "Design" tab allows you to apply any colors, background, padding, margins, animation, and other styling tools as you like. 

    2675.png
  2. Checkout - Order Total — 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. The "Design" tab allows you to apply any colors, background, padding, margins, animation, and other styling tools as you like. 

    2676.png
  3. (Required) Checkout - Payment — shows the available payment options. While editing you can apply different styling adjustments to the options themselves and to the submit button. The "Design" tab allows you to apply any colors, background, padding, margins, animation, and other styling tools as you like. 

    2678.png
  4. Coupon Form — 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. The "Design" tab allows you to apply any colors, background, padding, margins, animation, and other styling tools as you like. 

    2679.png
  5. Notices Box — shows the validation messages and notifications about checkout page adjustments (such as coupon application and others). While editing, you can apply one of the pre-defined styles for the message box. The "Design" tab allows you to apply any colors, background, padding, margins, animation, and other styling tools as you like. 

    2680.png

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

Examples of a Custom Checkout Page #

Example 1. Fashion Shop

2681.png

Example 2. Online Courses

2682.png

Example 3. Beauty Shop

2684.png