Select Page

DiviCommerce Documentation

Support

Any questions? Send an email to info@markhendriksen.com

1) Installing DiviCommerce Child Theme

Requirements

When building the website I recommend not to use any caching plugins. When finished building the website you can install them.

The Divi theme is not included in this package. To download Divi, you must have an Elegant Themes Membership.

Install DiviCommerce on a fresh WordPress installation. Installing this child theme will overwrite the existing website.

Step 1: Install Divi theme and WooCommerce

Install the Divi theme on a new WordPress installation.

Install and activate WooCommerce plugin.

Step 2: Upload DiviCommerce

In your WordPress dashboard navigate to Appearance > Themes and click on Add New.

Locate the divicommerce.zip file on your computer and then click Install Now.

When the install is complete click on ‘Activate’, you will then see the DiviCommerce as the active theme in your theme panel.

Step 3: Import demo content

Navigate to DC Demo Import Pro and click on Import Demo Content.

It can take a couple of minutes for the import to be completed.

After the import you can click on Remove Demo Content and Import Functions.

2) Assign shop, product, my account and checkout page

Step 1

Go to WooCommerce > Settings > Advanced

Assign the cart, checkout and my account page here.

If one of the pages do not show up in the dropdown then save click on save and try again.

Step 2:

Go to Divi > Theme Builder

Here you will find all the templates.

The ones in red are inactive.

For example if you want to change the shop page to version 2 then open the assignment options by clicking on the 3 dots and then choose Manage Template Assignments.

Scoll down and choose shop under WooCommerce.

After clicking on Save you need to click on Save Changes too.

Step 3

Make sure the shop, cart, my account and checkout page are assigned. Sometimes it can happen that they are not automaticaly assigned.

3) Settings for CartPops

CartPops is the slide-in with the cart.

Go to CartPops.

The first time you will see this.

You can choose any option I just skip it.

Dashboard

Make sure the following options are enabled

Appearance
Settings

Setting up filters on shop page

Step 1: Create product filter

Go to BeRocket > Filters

Here you will find all the filters I have used for the demo.

  • The red highlighted ones are for the shop page version 1 and 3.
  • The green highlighted ones are for shop page version 2.
  • The blue highlighted ones are for shop page version 1, 2 and 3 but only for mobile.

Ofcourse you can remove these filters and create your own ones.

But this will give you an insight on how I did it.

You can find step by step video tutorials by going to Berocket > Tutorials

Note: I have created different filters for desktop and mobile (for mobile I use drop downs for the filters). When you open a filter for example Color V1 you will notice that this one is only visible for desktop.

step 2: Create product filter groups

Go to BeRocket > Groups

I have allready created 2 filter groups but you have to assign the filters to it.

Add the filters for shop page V1 and V3 here.
Do the same for the mobile filter group.

Note: The “Hide this group on” options do not work on group level only at filter level.

Step 3: Assign filter groups

For shop page V1 and V3

Go to BeRocket > Groups

Copy the shortcodes.

Go to Divi > Theme Builder

Open the shop page.

If you are using shop page V2 then you need to follow the method below this one.

Switch to wireframe view (left-bottom).

Open the code module and paste/replace the shortcode for desktop filter group in here.

Then open the toggle and paste / replace the shortcode for the mobile filter group in here.

For shop page V2

Go to BeRocket > Filters

You need to copy each shortcode

Go to Divi > Theme Builder > Shop page V2

Switch to wireframe view (left bottom).

Each of the text module will require one shortcode (you can replace the one that is inside).

For the toggle place the filter group mobile short code. You can find that one in BeRocket > Groups.

Step 4: Add CSS snippet

Go to BeRocket > Product Filters > javascript/CC

You need to place the following CSS code for the clear filter button:

.bapf_sfilter.bapf_button_berocket.clearfilter-button-v1 .bapf_button,
.bapf_sfilter.bapf_button_berocket.clearfilter-button-v2 .bapf_button {
    font-size: 12px !important;
    padding: 6px 20px;
    margin-top: 16px;
    border-radius: 7px;
    border: 0;
    line-height: 28px;
    font-weight: 600;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    background-color: #da181f!important;
}
This CSS snippet is for the clear all button. You can change the color of this button by changing the background color in the CSS.

Setting up filters on product page

Step 1: Create page attributes

Go to Products > Attributes

I have created 2 attributes for this demo, color and size.

When you create a new attribute you have an option to set a type. For my color attribute I have used the type Color. This way I can set a color scheme.

If you click on configure terms under color you can set the colors.

Step 2: Add attributes to product page

on your product page set product data to Variable product.

Under attributes tab add your attributes. Make sure to check used for variations.

Go to the variations tab an add your variations.

Change the header and menu version

Go to Divi > Theme Builder and open the global header.

1 – Click on Load from Library
2 – Click on Your Saved Layout
3 – Check Header & Menu

Now you can choose your header layout.

Change the footer version

Go to Divi > Theme Builder and open the global footer.

1 – Click on Load from Library
2 – Click on Your Saved Layout
3 – Check Footer

Now you can choose your Footer layout.

Change the Product, Shop and Checkout page

Go to Divi > Theme Builder

Here you will find all the templates.

The ones in red are inactive.

For example if you want to change the shop page to version 2 then open the assignment options by clicking on the 3 dots and then choose Manage Template Assignments.

Scoll down and choose shop under WooCommerce.

Customize colors

Most colors can be changed through the sections, rows modules and theme customizer.

Some colors need to be changed through Appearance > Theme Editor by color code swapping.

Pagination

At line 20 you can change the background color.
At line 21 you can change the text color.

Countdown Timer

At line 53 you can change the background color.

Ribbon

At line 59 you can change the text color.
At line 60 you can change the background color.
At line 61 you can change the background color.
At line 65 you can change the border color.
At line 66 you can change the border color.
At line 70 you can change the border color.
At line 71 you can change the border color.

Product review background color

At line 78 you can change the background color.

Header & menu V3: item hover color

At line 85 you can change the background color.
At line 90 you can change the text color.

Checkout V1

At line 96 you can change the background color.
At line 100 you can change the background color.

Notice bar

At line 106 you can change the background color.
At line 107 you can change the border color.
At line 108 you can change the text color.

Cart page hover button

At line 122 you can change the background color.
At line 123 you can change the text color.

Shop hover button

At line 127 you can change the SHOP NOW text.
At line 128 you can change the text color.
At line 129 you can change the background color.