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?


  1. 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!

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

      • 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!

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

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

  3. A lot better than the normal checkout

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

Submit a Comment

Explore more from Divi Engine