The Storefront WooCommerce Customizer extension gives you additional style and layout options for the WooCommerce sections of your Storefront powered web site.
- Download the .zip file from your WooCommerce account.
- Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
- Install Now and Activate the extension.
More information at: Install and Activate Plugins/Extensions.
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:
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.
Enables two-step checkout, which separates the input of customer details / payment details into two pages.
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