6. Customizing the Checkout Page & Header

Video

How to Build a WooCommerce Store from Scratch Using Thrive Theme Builder

 

Let's begin our customization with the "Checkout" page:

  1. In "Thrive Theme Builder", hover over the "Default WooCommerce Checkout" template with your browser
  2. Click "Edit"
  3. Customize the header by clicking on the "Header" breadcrumb at the top of WordPress
  4. Below the notice "This is a Linked section" click the orange "Edit" button
    (Any changes made will now reflect across all of your WooCommerce pages.)
  1. Click "Done" and "Save Work" once finished with this page's customization
  2. Double-check all other WooCommerce pages to make sure all changes were also applied to these

Now, what if you want a slightly different header for this template? For example, let’s say you’d like to remove some of the header options on the Checkout page (and only on the Checkout page). You can accomplish this by simply unlinking the header and making your customizations.

  1. Click the header
  2. Below the notice "This is a Linked section" click the grey "Unlink" button
  3. Make your customizations

It's also possible to choose an entirely different header for this specific WooCommerce template, by simply following these steps:

  1. Click on the "Header" breadcrumb at the top of WordPress
  2. Click on the "Choose a ready-made design" button under the "Header Section" on the left-hand side menu
  3. Choose a new template and customize according to your needs / liking

Moving on to the main checkout area, you can easily customize form labels and form fields. For example, to customize the typography for a specific grouping of text elements:

  1. Click on the form (to ensure that the "Checkout" is highlighted in the breadcrumb section
  2. Under the left-hand side "Checkout" Section, click "Checkout Options"
  3. Click orange "Edit Design" button
  4. Click on any label, click "Typography" and customize the font to your liking
  5. Because all labels are grouped, they'll change colletively
  6. Finish up by clicking "Apply"

You can apply similar steps to customize the Headings on the page. 

Well done!

Next, watch Christine's explanation on how to customize your Cart Page and Top Section.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Pen
>