1. Documentation /
  2. Storefront Checkout Customizer

Storefront Checkout Customizer

Note: This Storefront extension is now available in the Storefront Powerpack, together with many other great features.
The Storefront WooCommerce Customizer extension gives you additional style and layout options for the WooCommerce sections of your Storefront powered web site. Download the plugin Changelog

Installation

↑ Back to top

  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
  3. Install Now and Activate the extension.
More information at: Install and Activate Plugins/Extensions.

Usage

↑ Back to top
This extension integrates with the WordPress Customizer making it extremely simple to use. Once you enter the Customizer you will notice a new top level section: Checkout. The Storefront Checkout Customizer settings menu item will only display if you are viewing the WooCommerce Checkout page from within the customizer and the settings should be self explanatory, but let’s work through what each one does:

Checkout

↑ Back to top

Checkout Layout

Here you can specify a preset layout option for your checkout. The options are:
  • Default – the default layout
  • Stacked – Stacks the address inputs and order review atop one another
  • Two column addresses – arranges the address inputs in to two columns above the order review
When combined with the full width template already available in Storefront core this allows you to create 6 different checkout designs.
Stacked and Two column checkout layouts using the full width page template.
Stacked and Two column checkout layouts using the full width page template.

Two-Step Checkout

Enables two-step checkout, which separates the input of customer details / payment details into two pages.
Page one and Page two of the two step checkout
Page one and Page two of the two step checkout
Please note that if you enable this setting, the checkout layout will automatically be arranged into the ‘stacked’ layout.

Distraction free checkout

Toggle the distraction-free checkout. This feature removes any components that might be considered a distraction at checkout allowing the customer to focus purely on completing the checkout form. Components removed include:
  • All header elements except the logo / title / tag line
  • The header widget region
  • The breadcrumb
  • The footer widgets and footer content