Divi + WooCommerce Free Layout Pack

by | Jun 23, 2020

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.

DiviWoo Theme Customizer

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

Add to wishlist settings

Go to YITH > Wishlist > Wishlist page options.

Use the following settings.

Wishlist page options

Wishlist page options

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.

WP Menu Cart

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.

1 Comment

  1. Dick Hofman

    So much inspiration. Thanks Mark!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

214 Shares
Share214
Tweet
Pin
Buffer