Pro Checkouts

The Checkouts module allows you to change the default design of the checkout page in your WooCommerce store.

If you enable this module, you can choose from three custom checkout page designs:

  1. Shopify multi step
  2. One step
  3. Multi step

In the screenshot below, you can see the default design of the WooCommerce checkout page:

Default design of the WooCommerce checkout page, screenshot

With Merchant Pro, you can replace it with one of our custom checkout designs.

Merchant Pro’s Custom Checkout Designs

Now, let’s see the three designs you can choose from.

Option 1: Shopify Multi Step

The Shopify multi step checkout style was inspired by Shopify’s checkout layout.

It breaks up the checkout flow into three steps:

  1. Cart (this step takes the customer back to the Cart page)
  2. Information
  3. Payment

This checkout design also displays a stylish order summary with the product images, which provides your customer with a visual cue that shows the products they’re about to buy:

Screenshot of the Shopify multi step checkout style

Option 2: One Step

The One step checkout style shows all the information, including the payment details, on one page.

Like the previous design, this option also displays a stylish order summary with the product images above the totals box:

Screenshot of the one step checkout style

Option 3: Multi Step

Finally, the Multi step checkout style breaks up the checkout process into three steps, respectively:

  1. Billing & Shipping
  2. Order & Payment
  3. Order Review

It also shows the steps on a clickable progress bar above the checkout form so that your customers will always know where they’re in the checkout process and easily move to the previous/next step whenever they want to make a change:

Screenshot of the multi step checkout style

Now let’s see how to configure and enable Merchant Pro’s Checkouts module.

1. Open the Checkouts Module

First, open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.

Find the Convert More section, and click the Checkouts module to open its settings page:

Location of the Checkouts module on the Merchant dashboard, annotated screenshot

2. Choose a Checkout Design

On the module’s admin page, you can find the three aforementioned checkout designs.

In the Preview box, you can see a screenshot of each style as you are clicking through the options.

For the Shopify multi step and One step layouts, you also get access to a Sticky Totals Box option that lets you stick the totals box to the top of the page as the customer is scrolling down the page.

Select the checkout style you want to use, then click the Save button in the top-right corner of the page to save the changes:

Settings of the Checkouts module

3. Enable the Module

To activate Merchant Pro’s Checkouts module, click the Enable button at the top of the page:

Location of the Enable button on the Checkouts module's admin page, annotated screenshot