Divi + WooCommerce Free Layout Pack

With DiviWoo you can built your own eCommerce store with Divi + WooCommerce. This layout pack is free to download and comes with some great features.

Key features

  • Home page
  • Custom shop and category page
  • Custom product page
  • Custom cart page
  • Custom header
  • Custom footer

For the wishlist and menu cart I use 2 free plugins and for the checkout page I use a premium plugin.

All 3 plugins are optional and you do not need to have them to work with this layout pack.

In the documentation below you will find the links and settings that I have used for these plugins.

Divi and WooCommerce layout pages

Download & Import Layout Pack

Step 1: Download the layout pack

Signup below to download this free layout pack.

Step 2: Import the layout pack

Before importing this layout pack make sure you have installed Divi and WooCommerce.

Unzip the ‘DiviWoo.zip’ file to your computer.

Go to Divi > Theme Options. Click on the import/export options (up/down arrow).
Click on Import and upload DiviWoo Theme Options.json.

Import Divi Theme Options

Go to Divi > Theme Builder. Click on the import/export options (up/down arrow).
Click on Import and upload DiviWoo Theme Builder Templates.json.

DiviWoo Theme Builder Templates

Note: Click on save Changes

Go to Divi > Theme Customizer. Click on the import/export options (up/down arrow).
Click on Import and upload DiviWoo Customizer Settings.json.

Go to Divi > Divi Library. Click on the import/export options.
Click on Import and upload DiviWoo Builder Layouts.json.

DiviWoo Builder Layouts

Step 3: Create the home page

Go to Pages > Add New.

Add a title and click on the button “Use Divi Builder”.

Click on “Choose a premade layout”.

Go to the “Your Saved Layouts” tab and click on “Home Page DiviWoo”.

Publish this page.

Import the home page

Go to Settings > Reading under Your homepage displays set your created home page th static.

Step 4: Creating the menus

Go to Appearance > Menus.

Create a menu and add your home page to this menu. Check primary menu.

Create a second menu and add your My account, Cart, and Checkout pages to this menu. You don’t need to check anything for this menu.

Assigning the shop menu

Go to Divi > Theme Builder and open the Global Header.

Open the top right menu module and under menu select your menu with my account, cart and checkout.

Step 5: Installing Yith wishlist

Go to Plugins > Add New and search for YITH WooCommerce Wishlist by Yith.

Install and activate the plugin.

YITH WooCommerce Wishlist

Go to YITH > Wishlist > Add to wishlist options.

Use the following settings.

Add to wishlist settings

Go to YITH > Wishlist > Wishlist page options.

Use the following settings.

Go to Pages > All Pages > Wishlist

Click on Use the Divi Builder > Edit With The Divi Builder.

Click on “Choose a premade layout”.

Go to the “Your Saved Layouts” tab and click on “Wishlist Page DiviWoo”.

Save the page.

Step 6: Installing WooCommerce Menu Cart

Go to Plugins > Add New and search for WooCommerce Menu Cart by Jeremiah Prummer, Ewout Fernhout.

Install and activate the plugin.

WooCommerce Menu Cart

Go to WooCommerce > Menu Cart Setup.

Use the following settings.

Menu cart setup

Step 7: Create the custom checkout page

I have created a custom checkout page with a premium plugin. This is optional and you do not need to have this plugin. You can just use the default checkout page.

If you do want to use a custom checkout page then you can follow this tutorial.

On the checkout page you will also find an orderbump. You can create an orderbump with this tutorial.

How to change the product, category and cart layout page

The product, category and cart page are created in Divi > Theme Builder.

WooCommerce template layouts for Divi

You can find the layouts for those pages in the Custom Body.

Increase your AOV with these tutorials

I highly recommend to follow these tutorials listed below. They will help you increase your aov (average order value) for your store.

Faq

Is this really free?
Yes, 100% free and it will be like that.

How to change the logo?
Go to Divi > Theme Builder and open the Global Header.

How to change the footer?
Go to Divi > Theme Builder and open the Global Footer.

Do I need the plugins to work with this layout pack?
No, the plugins that I use in this layout pack are optional.

Can I remove Made by MarkHendriksen.com?
Yes, you can change or remove that in Divi > Theme Builder > Global Footer.

16 thoughts on “Divi + WooCommerce Free Layout Pack”

  1. When trying to import DiviWoo Theme Builder Templates.json I get a message that “This file should not be imported in this context” and the import apparently stops. Any advice?

    Reply
    • Hi Shelly,

      Does the Download Layout Pack button not work for you? Could you try again, please? It’s working on my end.

      Reply
  2. Hi Mark and thanks for the great work.
    In your opinion, can I use the layouts only for the shop page and for the home page manually create my own layout with the seller’s information, a bit of seller’s history and other information?

    Reply

Leave a Comment

217 Shares
Share217
Pin
Tweet