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:
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:
Once the installation is complete, be sure to activate the theme by clicking the Activate link:
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:
Once the upload process is over, click the Activate Plugin button:
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:
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 eight starter sites to choose from: Beauty, Apparel, Furniture, Jewelry, Single Product, Multi Vendor, Wine, and Plants.
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:
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:
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:
You’ll be taken to the homepage of your website, and the Customizer interface will be displayed on the left side of the screen:
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:
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:
This is what the first page of Botiga’s multi-step Shopify layout (Layout 4) looks like:
And, here’s Layout 5, Botiga’s one-step Shopify-like checkout page:
Choose the layout that best fits your needs, then hit the Publish button at the top of the Customizer interface to implement the changes.
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.
You can also set the following three form fields to required, optional, or hidden:
- Company Name
- Address Line 2
Finally, you can add two important legal documents to your checkout page:
- 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:
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!