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

Install WooCommerce, Divi and Divi BodyCommerce on your website
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”.
Style the checkout using our settings

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

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

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!
Log in to Reply
- Divi Engine on September 29, 2020 at 12:23 pm
  
  If you disable BodyCommerce and it is the default checkout – does it work?
  Log in to Reply
  - 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!
    Log in to Reply
    - 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
      Log in to Reply
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
Log in to Reply
- Divi Engine on May 18, 2020 at 8:02 am
  
  No, should be fine.
  
  Please email support – su*****@********ne.com and we will be happy to help
  Log in to Reply
shou on May 7, 2020 at 7:36 am

A lot better than the normal checkout
Log in to Reply
- Divi Engine on May 7, 2020 at 7:48 am
  
  We agree.. More exciting features to do with the checkout process coming soon 😀
  Log in to Reply

Submit a Comment Cancel reply

You must be logged in to post a comment.

Explore more from Divi Engine

Divi Form Builder

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

Find out more

Divi Machine

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

Find out more

Divi BodyCommerce

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

Find out more

Divi Loop Extender

Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.

Find out more

Divi Membership

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

Find out more

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