Get Started

Tutorials

How to add a Shopify Style Checkout in WooCommerce and Divi

We love WooCommerce and Divi and all the amazing things we can do. Both are highly customisable and have a massive helpful community – it just makes sense!

One of the main issues with the WooCommerce checkout page. It is clunky, too much information and we think for certain would reduce cart completion. On the other hand, Shopify checkout is simple, clean and beautiful to look at. 

You can see a comparison below

WooCommerce Shopify Divi Checkout Comparison

Which form would you prefer to complete and checkout? If you are like us, it would be the Shopify style. This is why we have added the abiility to create a “Shopify Style” in WooCommerce using Divi BodyCommerce.

3 Steps to create a Shopify Style Checkout in WooCommerce

  1. Install WooCommerce, Divi and Divi BodyCommerce on your website
  2. Go to BodyCommerce > Checkout Page.
    • Enable “Enable Custom Checkout Layout? setting “.
    • Leave “Select Checkout Page Template” setting blank.
    • Enable Shopify Style in the setting “Checkout Style”.
  3. Style the checkout using our settings

After this you will have a checkout that looks something like this

WooCommerce Shopify Divi Checkout Style

Here is a video we have made to show how it works – we hope you love it as much as we do!

Would you like to try BodyCommerce for Free?

Yes i want to try it !

8 Comments

  1. Bertrand DORAT on September 28, 2020 at 3:39 pm

    Hi Peter,
    Thanks for this great video!
    In the shipping information part, i don’t succeed to have the “deliver to a different address” option activated. I just have “order notes”.
    In Woocommerce set up, i check that delivery could be based on billing information or shipping information but no matter what, the option doesn’t show up.
    Do i forget something somewhere?
    In advance, thanks a lot!

    • Divi Engine on September 29, 2020 at 12:23 pm

      If you disable BodyCommerce and it is the default checkout – does it work?

      • Bertrand DORAT on October 6, 2020 at 8:29 pm

        Hi Peter,
        Trouble came from the shipping set up part in woocommerce part: i didn’t set up any area.
        Thanks a lot for your support!

        • Divi Engine on October 7, 2020 at 10:03 am

          Make sure you do not have the Divi Builder on the checkout page (Pages > Checkout) – it will work

  2. Nathan on May 16, 2020 at 8:40 am

    Hello Divi Engine team,
    Love this new template for checkout but do you have, like me, a trouble with SSL using it?
    Thx

  3. shou on May 7, 2020 at 7:36 am

    A lot better than the normal checkout

    • Divi Engine on May 7, 2020 at 7:48 am

      We agree.. More exciting features to do with the checkout process coming soon 😀

Submit a Comment

Related Posts

Explore more from Divi Engine

Divi Membership

Divi Membership

Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.

Divi Membership
Find out more
Divi Machine Accounts

Divi Machine Accounts

Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active

Divi Machine Accounts
Find out more
Divi Form Builder

Divi Form Builder

From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.

Divi Form Builder
Find out more
Divi Ajax Filter

Divi Ajax Filter

Filter WooCommerce, Posts & Custom Posts without reloading the page.

Divi Ajax Filter
Find out more
Divi Machine

Divi Machine

Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.

Divi Machine
Find out more
Divi Mobile

Divi Mobile

Divi Mobile helps you create beautiful looking mobile menus without having to code.

Divi Mobile
Find out more
Divi BodyCommerce

Divi BodyCommerce

A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.

Divi BodyCommerce
Find out more
Divi Nitro

Divi Nitro

Give your Divi website that extra boost of speed with our Divi Nitro plugin to enhance your customer's experience.

Divi Nitro
Find out more
Divi Protect

Divi Protect

Password protect the content of your Divi website with our Divi Protect plugin. Keep unwanted eyes out!

Divi Protect
Find out more
Divi Mega Menu

Divi Mega Menu

Improve the user experience of your Divi website with our Divi Mega Menu plugin by creating dynamic menus using the Divi Builder.

Divi Mega Menu
Find out more
Buy all from £149 Discover all