Divi Ecommerce

01. Theme requirements

✓ Self-Hosted WordPress Installation
✓ Divi Theme by Elegant Themes
✓  PHP version 7 or greater
✓ memory_limit 128M
✓ post_max_size 64M
✓ max_execution_time 180
✓ upload_max_filesize 64M
✓ max_input_time 180      
✓ max_input_vars 5000
✓  MySQL version 5.6 or greater OR MariaDB version 10.0 or greater.
✓  HTTPS support
✓  Nginx or Apache with mod_rewrite module
✓ WooCommerce Plugin (optional)
✓ Instagram Feed Plugin (optional)   

02. Introduction

Follow the instructions below to install and configure your new product

Tip: For the Divi eCommerce child theme to work, you must have Divi from Elegant Themes. If you do not have it you can purchase it here. Once you have it, please install it on your self-hosted WordPress website before attempting to install this child theme.

03. Description

Filled to the brim with countless sales-driven elements, the Divi Ecommerce child theme is perfect for brands looking to sell products and generate profits online. Fully set up and integrated with WooCommerce, Divi Ecommerce has taken care of every step of the customer purchase journey, leaving brands to merely enter their original content and product imagery to begin selling products online.

With its beautiful, eye-catching design and engaging sales-driven elements, this feature-rich WooCommerce theme helps businesses create an enticing shopping experience that’ll keep customers coming back.

** Visit the Divi eCommerce Child Theme Page Here **

04. Installing the child theme

Please upload the Divi eCommerce Child Theme to you your self-hosted WordPress website. Make sure the Divi theme is already installed and activated.

1. Click the 'Appearance' Menu Item on the left-hand sidebar. 

2. When the Themes Page opens, click the 'Add New' button.

3. When the Add Themes Page opens, click the 'Upload Theme' button.

4. When WordPress displays the next screen, click the 'Choose File' button. Your computer will open a dialog box; locate the Child Theme File you downloaded, double click on the file name.

5. After you have selected the file, the window will close. Click the “Install Now” button to install your theme

6. The page will re-load, and after the theme has been fully uploaded, you will be presented with an “Activate Theme” link. Click this to activate the child theme and complete the installation.   

5. Enter license key

1. After you have activated the child theme, click on the 'Divi Ecommerce' menu item on your left Admin panel.

2. Register your license key in the input field provided in the dialogue box that pops up; then click 'Continue'.

6. Install recommended plugins

Once the child theme is active on your site, the system will suggest you install & activate some Plugins. 

Please click the Plugin Names or Begin Installing Plugins link on the dashboard screen and start the process. This function is, however, optional.

After you have installed the plugins, the next step is to activate them: 

Once all the required plugins (or the ones that you need) have been activated, click the 'Return to the Dashboard' link.

07 Import Demo Data

From the WordPress Dashboard, go to the newly added tab bearing the name of your "Divi Ecommerce" child theme on the left admin panel. While hovering that menu item, please click on ‘Import Demo Data’ and then follow the instructions provided on the page. 

Here we can see a template preview (various variants are available in some of our child themes). Click Continue.

Layout data information are being downloaded, wait a moment...

Check all to copy complete demo data to your WordPress. Press Import Data and downloading process will begin.

Success! Enjoy your new child theme! :)

08 Set Homepage and Posts Page

Move to the settings area in your left Admin panel. Click ‘Reading’, under ‘Your homepage displays’ select ‘A static page’ and for the Homepage drop-down menu select either ‘Homepage - 1’ or ‘Homepage 2’. For the Posts Page, select 'News'.

09 Setup WooCommerce

Navigate to WooCommerce >>Settings and in the General tab fill in the usual information for your business, including currency, and save your changes:

Next, click on the Products tab and set the Shop page to "Shop" by selecting it from the drop-down menu. Save Changes:

Finally, on the Advanced tab set the rest of the WooCommerce pages as shown, (as an example, we used the Privacy Policy page for Terms and Conditions, you will have to create a new page for this purpose):

10 Set up the Instagram Feed plugin

Navigate to the Instagram Feed page and then click on the button to connect your account:

Follow the pop-up instructions until the end where you will be prompted to connect your account. The success message should look similar to the one below. Save changes.

Click on the second tab tagged “2. Customize”, scroll down to the Layouts section and modify the settings as shown in the following image; then click “Save Changes” one more time.

11 How to customize the Woocommerce pages

Since version 1.2.0 you can customize the display of the woocommerce shop, archive and category pages with additional options.

Under the Theme Customizer > Divi Ecommerce Product Archive you will see new options:

  • DISPLAY SHOP ICON
  • DISPLAY SALE FLASHES
  • DISPLAY CUSTOM PRODUCT OVERLAY
  • PRODUCT OVERLAY TEXT
  • SHOP NOW
  • PRODUCT COLUMNS FOR DESKTOP
  • PRODUCT COLUMNS FOR TABLET
  • PRODUCT COLUMNS FOR MOBILE

Display Shop Icon

By default, this setting is enabled. It changes the default "Add to Cart" and "Select Options" to custom-designed the button with the shop icon to brand the unique divi e-commerce design.  

Display Sale Flashes

This setting by default is enabled. 

Attract people to the sale product with the sale badge. It will be displayed only if your product has a "Sale price" set under the product settings.

Display Custom Product Overlay

This setting is enabled by default. Enables a product overlay with the custom text. The product overlay is displayed on the shop page, archive product pages and product category pages upon hovering the product image.

Product Overlay Text

Changes the text displayed on the product overlay. "Display custom product overlay" needs to be enabled in order this feature to work.

12 Number Of Columns In WooCommerce Shop

Since Divi 1.1.0, Divi Ecommerce comes with the Theme Builder Templates. 

If you are not using Theme Builder Templates, you can use the settings in the theme customizer.

Under Theme Customizer > Divi Ecommerce Product Archive. you will see three options:

  • PRODUCT COLUMNS FOR DESKTOP
  • PRODUCT COLUMNS FOR TABLET
  • PRODUCT COLUMNS FOR MOBILE

This is how Divi Ecommerce looks with Theme Builder disabled and  PRODUCT COLUMNS FOR DESKTOP set to 6. As you see, Divi Ecommerce works perfectly without using the Theme Builder.

If you decided to stick with the Theme Builder Templates: 

  1. Go the Theme Builder, 
  2. Click edit on the "Shop" Template.
  3. Open Shop Module.
  4. Scroll down, until you see "Column Layout"
  5. Choose your desired number.


13 Import Theme Builder Templates

Since Divi 1.1.0, Divi Ecommerce comes with the Theme Builder Templates. This section is created especially for clients who imported demo data before Divi Ecommerce 1.1.0 and their site is missing those templates. Divi Ecommerce works perfectly with and without theme builder templates.

Go to the Divi Ecommerce >> Import Demo Data and click continue

Choose Theme builder templates and click Import demo data

Under Divi > Theme Builder you will see new templates.

14 Changelog

See the Changelog text for this child theme by following this link https://divi.space/product/divi-ecommerce/?changelog=1

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us