Installing DiviWooPro Pack

Before installing this layout pack

  • Check if you met all of the hosting requirements settings under Divi > Support Center
  • Divi and WooCommerce is installed
  • WooCommerce default pages (shop, cart, checkout, my account) are installed (this should happen automatically when you install WooCommerce)

Note

  • If you want to change the columns of the shop page follow these instructions.

File structure

In you dashboard you have to download 2 folders.

  • Download the folder all-diviwoo-layouts.zip.
  • Download the folder diviwoo-supplementary-files.zip

all-diviwoo-layouts: This folder contains one JSON file with all layouts

diviwoo-supplementary-files: This folder contains all layouts separately (so you can just import one layout instead of all of them) it also contains code files that you need later.

Step 1: importing the layouts

Go to Divi > Divi Library and click on the Import & Export button.

Click on the Import tab and then on Choose file.

If you want to upload all layouts at once then choose the all-diviwoo-layouts.json file (inside of your unpacked folder all-diviwoo-layouts).

Note: It is possible that you can not upload all layouts at once due to the file size (depending on your upload file settings). In that case, just upload a single layout from the diviwoo-supplementary-files folder.

If you want to upload only one layout then go to the folder diviwoo-supplementary-files. Here you will find all the layouts organized in folders.

Step 2: Importing the code

Go to the download folder diviwoo-supplementary-files > Code snippets.

Open the text file Main CSS code for DWP.txt in a text editor.

Copy all of the code.

Then go to Divi > Theme Options > CSS

Paste the code here.

Click on Save Changes.

Optional code snippets

If you like an Add to cart button on the shop page and the quantity filter arrows on the product and cart page you can import the following code snippets.

For the other code files, you have to install a plugin first.

Go to Plugins > Add New and search for Code Snippets by Code Snippets Pro

Install and activate this plugin.

Go to Snippets > Import

Click on Choose File and navigate to your diviwoo-supplementary-files > Code snippets and upload:

enable-add-to-cart-button-on-shop-pages.code-snippets.json

After that do the same for:

product-quantity-buttons.code-snippets.json

Go back to Code Snippets and enable both snippets.

The styling of the Add to Cart button on the shop page will be very different from my demo. It will take over the default styling.

To style this button follow the steps in the next chapter Theme Customizer > Shop buttons.

Paypal code

There is one more code snippet that you can use if you like.

By default, you don’t have the option for Paypal anymore in WooCommerce and they recommend installing a plugin for this.

However there is different styling with this plugin that I personally don’t like,

With the Paypal code snippet, you can enable Paypal just as in older versions of WooCommerce.

It’s up to you if you want to use it.

Theme customizer settings

The layouts will take over the settings that you are using in Divi > Theme Customizer.

Below you will find what I have used in my demo, in case you want to have a similar style.

Shop images

This is for the size of the product images on the shop and product page.

Go to Appearance > Customize > WooCommerce > Product Images

Shop buttons

The majority of the button styling for WooCommerce will be taken over from the settings in Appearance > Customize > Buttons

But this does not count for all the buttons, for example, the Add to cart button on the product page is red, to change that you have to open that module and change it from there.

Importing layouts

Installing a homepage

  • Go to your home page and enable the visual builder.
  • Click on the + icon
  • Click on the Your Saved Layouts tab
  • Check DWP – Home pages
  • Choose your home page layout

 

Installing a product, shop, checkout, cart, and my account page

The steps of each of these pages are the same, the only difference is the assignment of the template.

  • Go to Divi > Theme Builder.
  • Click on Add New Template
  • Click Build New Template
  • Check the template that you want to create, in this example, I checked all products. But if you want to create a shop template then check Shop.
  • Click on Create Template
  • Click on Add Custom Body
  • Click on Add From Library
  • Switch to the Your Saved Layouts tab
  • Choose the product category (in my example, I choose products)
  • Choose a layout
  • Click on Save Changes

Do the same steps for the other templates like shop, checkout, cart, etc.

Installing a header

  • Go to Divi > Theme Builder
  • Click on Add Global Header
  • Add From Library
  • Switch to Your Saved Layouts tab
  • Check DWP – Headers
  • Choose a header version
  • Click on Save Changes

Set cart in header/menu

  • Go to Appearance > Menus
  • Create a new menu
  • Add a custom link to your menu

The link URL and Link Text doesn’t matter it will be hidden anyway but there has to be something in the menu.

  • After saving the menu go to Divi > Theme Builder and open the Global Header.
  • Then open the menu module with the cart.
  • Set the menu to your just-created menu.

Mega menu for header V10

Go to Plugins and search for Max Mega Menu by megamenu.com

Install and activate this plugin.

Go to Appearance > Menus

Make sure your menu is set to the primary menu and check enable.

Save the menu.

When you hover over a link item the Mega Menu option is visible click on the menu item that you want to make a mega menu for.

Set the Mega Menu – Grid Layout

With the editor, you can set columns and rows for your mega menu.

On the top right you can choose widgets for the mega menu, I have used Text and an image widget.

In the Settings tab, there are some additional settings for the mega menu.

I have Enabled the disable link.

After you have created your mega menu go to Mega Menu > Menu Themes.

Note: if the images are too hard to see, right-click on the theme and open it in another window. You should then be able to zoom in on them.

For the menu bar I have used the following:

Menu bar settings

For the Mega Menus I have used the following:

Mega menu settings

For the Flyout Menus (dropdown menus) I have used the following:

Flyout menu settings

For the Mobile menu I have used the following:

Mobile menu settings

Change the header colors

Most of the colors you can change in the modules’ row and sections.

A couple of colors can be changed in the code module.

To find the code module switch to the wireframe view

Then open the code module. You will find some CSS code here and you can swap the color codes.

Below is an example of the CSS code for a simple header, this is the same concept for each header.

On the top, you will find the code that affects the colors. You will find this between the comment lines Colors and End Colors.

For this header it means the following:

On line 7 you will find the dropdown menu line color.

On line 12 you will find the dropdown menu arrow color.

On lines 17 and 18 you can change the collapsing mobile menu icon and background color.
Some headers have more colors that can be changed.

I have placed a description in the code module for each color so it is easy to find.

Double or different icons?

In some cases, you can see this after importing a header.
Open the CSS code module in your header. In case you cannot find this module then switch to wireframe view (left bottom).

Under “End Colors” comment, you will find the icons.

In this case, there are two icons (some headers can have more icons).

33 and 32 are the icon numbers but there is a backslash missing in the front of these icon numbers.

For some reason, this backslash \ is getting stripped out after importing a header.

The fix is very easy you just need to add a backslash \ before the number like this:

Installing a footer

  • Go to Divi > Theme Builder
  • Click on Add Global Footer
  • Add From Library
  • Switch to Your Saved Layouts tab
  • Check DWP – Footers
  • Choose a footer version
  • Click on Save Changes

Optional features – Setup plugins

Shop sidebar filters

Go to Plugins > Add new and search for Themify – WooCommerce Product Filter by Themify

Install and activate the plugin.

Go to Product Filters and click on the Import button.

Navigate to your folder diviwoo-supplementary-files > Sidebar filters and upload the JSON file dwp-filters.json.

After the import, the category and price filter are imported.

In my demo, you see more filters like brands and materials. These are attributes and you have to create attributes first in Products > Attributes before you can add them to your filter.

When you have created attributes they will appear as an option to add them in your filter group.

Wishlist

Go to Plugins > Add new and search for TI WooCommerce Wishlist – by TemplateInvaders 

Install and activate the plugin.

Skip the installation wizard and navigate to TI Wishlist > General Settings.

Use the following settings (highlighted).

See wishlist settings

You have to create a wishlist page for the wishlist.

  • Go to Pages and create a new page
  • Enable the visual builder and choose the option “Choose a premade layout”
  • Switch to the Your Saved Layouts tab
  • Import the wishlist page

 

Extra product tabs

Go to Plugins > Add new and search for WooCommerce Product Tabs by WP Concern

Install and activate the plugin.

In WooCommerce Product Tabs you can create new tabs.

After you have created a tab you have to add it to your product tab module.

Go to Divi > Theme Builder and open your product template. Then open the Product tab module and check your new tab.

How to…

Change the “See Details” text

Go to Divi > Theme Options > CSS

At line 5 you can change the See Details text between the quotes.

Colors

Shop page – hover button colors and text

Go to Divi > Theme Options > CSS

At line 6 you can change the background color.

Border color title sidebar

Go to Divi > Theme Options > CSS

At line 12 you can change the border color.

Shop top right navigation colors

Go to Divi > Theme Options > CSS

At line 17 and 18 you can change the border and bg color.

Pagination shop

Go to Divi > Theme Options > CSS

At lines 23, 24, and 28 you can change the text and bg color.

Rating star color shop page

Go to Divi > Theme Options > CSS

At line 33 you can change the star color.

Wishlist icon shop page

Go to Divi > Theme Options > CSS

At line 38 you can change the bg color.
At line 42 you can change the icon color.

Custom tabs – product page

Go to Divi > Theme Options > CSS

At line 48 you can change the border color.
At line 53 you can change the active border color.

Countdown timer

Go to Divi > Theme Options > CSS

At line 58 you can change the bg color.

Buttons- wishlist page

Go to Divi > Theme Options > CSS

At line 63 you can change the text color.
At line 64 you can change the bg color.

Sales ribbon

Go to Divi > Theme Options > CSS

At line 69 you can change the text color.
At line 70, 71, 75, 76, 80, and 81 you can change the bg color.

Faq

I see some shortcodes

If you see some shortcodes after installation, those are from the filter and wishlist plugin.

When you install those the shortcode will be gone.

If you have no need for those plugins then you can just manually remove those shortcodes from the modules.

Need Help?

Email: info@markhendriksen.com

Free Layout Packs

Join my free membership and get access to 17 free Divi layout packs.

Join Free Membership