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
See Live DemoFor 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.
Download & Import Layout Pack
Step 1: Download the layout pack
Signup below to download this free layout pack.Download
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.
Go to Divi > Theme Builder. Click on the import/export options (up/down arrow).
Click on Import and upload DiviWoo Theme Builder Templates.json.
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.
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.
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.
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.
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.
Go to WooCommerce > Menu Cart Setup.
Use the following settings.
WP Menu Cart
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.
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.
- How to create a custom checkout page
- How to create an orderbump
- How to create a one-click upsell
- How to create a custom thank you page
- How to create an automated post-purchase email funnel
- How to create an automated win-back email funnel
- How to create an automated cart abandonment email funnel
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.