Save up to 35% on Merchant Pro

Unlock the potential of your WooCommerce store

DAYS
HOURS
MINUTES
SECONDS

How to Make the WooCommerce Checkout Like Shopify

Want to make the default WooCommerce checkout look like Shopify’s checkout page?

Shopify has a strong focus on design and user experience. As a result, their checkout page is clean and simple and encourages quick sales. 

Luckily, you don’t have to switch to Shopify just to access the checkout page design.

Instead, you can implement a Shopify-like design for your WooCommerce checkout page with the help of third-party WooCommerce tools — such as our Botiga theme

In this tutorial, I’ll show you how to use Botiga to make the default WooCommerce checkout page look like Shopify.

1. Install & Activate the Botiga WooCommerce Theme

Botiga is a feature-rich WooCommerce theme that comes in both a free and Pro version. It offers tons of layouts, styles, and customization options so that you can tailor an exceptional shopping experience for your customers.

To install it on your WordPress site, open your dashboard, and go to Appearance > Themes > Add New.

On the Add Themes admin page, you’ll see a search bar. Enter “Botiga”, and the theme will appear among the results.

Hit the Install button, then activate the theme:

Installing the Botiga theme in WordPress

Alternatively, you can download Botiga from our website.

Then, go to Appearance > Themes > Add New > Upload Theme in your WordPress admin area.

Click the Choose File button to upload the theme, and hit the Install Now button:

Uploading Botiga in WordPress

Once the installation is complete, be sure to activate the theme by clicking the Activate link:

Activating the Botiga theme

2. Install & Activate the Botiga Pro Plugin

Botiga Pro is a WordPress plugin that adds lots of premium features to the free Botiga theme.

You’ll need both the theme and plugin to access the Shopify-style checkout layout.

Pricing plans start at $69 per year, which lets you use Botiga Pro on one WordPress site — see all the plans here

After making the purchase, download the plugin from your Botiga account. 

Then, open your WordPress admin area, and go to Plugins > Add New > Upload Plugin.

Upload the plugin by using the Choose File option, and then hit the Install Now button:

Uploading the Botiga Pro plugin in WordPress

Once the upload process is over, click the Activate Plugin button:

Activating Botiga Pro

Next, you’ll need to activate your license key. 

Go to your Botiga account, and copy the license key.

Then, open your WordPress dashboard, and go to Plugins > Botiga Pro License. Enter the license key, and hit the Save Changes button:

Entering the Botiga Pro license

The Botiga Pro plugin is now installed and activated on your WordPress site.

3. Import a Starter Site (optional)

A starter site or demo is a pre-built website design you can use out-of-the-box or slightly modify to achieve a design that works for you. It can save you a lot of time and effort because you don’t have to design your site from scratch.

Currently, Botiga offers nine starter sites to choose from: Beauty, Apparel, Furniture, Jewelry, Single Product, Multi Vendor, Wine, Plants, and Shoes.

You can also use Botiga without importing a starter site — in this case, you’ll need to add your own content and configure your settings using Botiga’s Customizer options.

To import a starter site, click the Appearance > Starter Sites menu. Click the Preview Demo button to preview the design, and hit the Import button if you want to install it on your website: 

Importing a Botiga starter site

In the next instant, a popup will appear showing all the plugins and content that will be imported into your site. 

Select the Import button and wait until the process is over:

Importing a Botiga starter site with plugins and content

Once the starter site is imported, open your homepage and check out the new design of your WooCommerce store. 

4. Open the Customizer 

To open the Customizer, click the Appearance > Customize menu in your WordPress dashboard:

Accessing the customizer interface

You’ll be taken to the homepage of your website, and the Customizer interface will be displayed on the left side of the screen:

Wordpress Customizer

The Customizer menu has an option that will convert the layout of your WooCommerce checkout page into one that looks like the Shopify checkout page.

5. Choose a Layout Design for Your Checkout Page

In the Customizer, go to WooCommerce > Checkout. Here, you’ll see five layout options for the checkout page:

Checkout page layout options

Botiga has two checkout page layouts that provide a similar user experience to Shopify:

  • Layout 4 – Shopify multi-step checkout, which lets customers enter their information step by step.
  • Layout 5 – Shopify one-step checkout, which includes all the information on one page.

To see how they compare to Shopify, here’s a screenshot of Shopify’s checkout page:

Shopify's checkout page

This is what the first page of Botiga’s multi-step Shopify layout (Layout 4) looks like:

Shopify-like checkout layout in botiga

And, here’s Layout 5, Botiga’s one-step Shopify-like checkout page:

botiga shopify like checkout

Choose the layout that best fits your needs, then hit the Publish button at the top of the Customizer interface to implement the changes. 

Botiga Customizer options, Publish button

That’s it. You have now made your WooCommerce checkout page look like Shopify. 

6. Enable or Disable the Optional Features on Your Checkout Page

There are a couple of features you can enable or disable on the checkout page; you can find them right below the checkout layouts in the Customizer.

You can switch the following three options on or off:

  • Display coupon form – This option is enabled by default. You can choose to disable it.
  • Sticky checkout totals box – You can make the totals box sticky, so when a customer is scrolling up or down, the box remains fixed on the right side of the screen. 
  • Distraction-free checkout – This option removes the header and footer content, allowing customers to focus on the checkout process.
Enabling or disabling elements on the checkout page

You can also set the following three form fields to required, optional, or hidden:

  • Company Name
  • Address Line 2
  • Phone
Customizing the Botiga theme's checkout page

Finally, you can add two important legal documents to your checkout page:

  • Privacy Policy
  • Terms and Conditions

First, you need to create these pages from the Pages > Add New menu. Then, they’ll show up in the dropdowns, and you can add them to your checkout page:

Adding privacy policy and Terms and Conditions to the checkout page

Conclusion

WooCommerce is an excellent eCommerce platform, but if you want to improve certain areas of your store, third-party tools can help a lot.

For example, you can use Botiga to make the default WooCommerce checkout page similar to the clean and simple Shopify checkout experience.

Botiga is a powerful WooCommerce theme designed to build high-converting online stores. While the theme is free, to enable advanced functionalities, you’ll need to pair it with the premium Botiga Pro plugin

To use Botiga’s Shopify-like checkout page layouts, you’ll need both the theme and the plugin.

Install them on your website, import a starter site, and enable a checkout layout from the Customizer.

Take these steps, and a Shopify-like checkout page will be up and running in your WooCommerce store in no time!

Share This Article:
Facebook Twitter

Leave a Reply

Your email address will not be published. Required fields are marked *