Divi Woocommerce Documentation

Getting started

First of all, we would like to thank you for buying our Divi Woocommerce theme. If you have any question that are out of scope of this help here, please feel free to contact us at divi@sawebsolution.com

Installation

So let’s make our theme installation! (Skip installation part if you already installed Divi Woocommerce theme to your WordPress site)

Before starting, You must know that after installing this theme, Your existing content will be wiped-out and demo content added. So make backup’s which You will be able to upload after theme instalation.

  • Download Divi Woocommerce theme (which is in a ZIP format) to your computer (If it’s already not there)
  • Unzip files to your desktop

rsz_screenshot_from_2016-10-06_23-31-29

    • Login to your WordPress site dashboard (/wp-admin)

pc7

    • Then you should follow this path Appearance -> Add New -> Upload Theme

pc8

    • Now browse and select divi-woocommerce.zip from your desktop

pc9

    • Click Install Now button

pc10

    • Click Activate button

pc11

You’ve successfully installed DiviWoocommerce theme on your WordPress website.

NOTE: Some browsers automatically unzip ZIP files. So before upload, compress unzipped theme folder into ZIP format (divi-woocommerce.zip) and then perform upload.

After DiviWoocommerce theme activation you will be noticed with a message to install and activate the plugins which was used in theme creation. Now go ahead to WordPress plugin repository and install them before going to the next step.

Content Importing

Go to Appearance -> Import demo data and press blue Import Demo Data button.Congrats! Now You’re ready to use DiviWoocommerce theme.

Widgets

There is a chance that after demo import there might be more widgets then should, You just need to remove: “Search”, “Recent Posts”, “Recent Comments”, “Archives”, “Categories”, “Meta”.

Ajax Search Lite

After installation there might be problems with Search Lite on front page. You need to do these steps in order to fix it:

Go to “Ajax Search Lite” -> General Options -> Remove everything from search in custom post types and select products;

Go to “Ajax Search Lite” -> Layout options -> Select Theme “Underline white”

Newsletter

After installation there might be chance that You will need to update Your newsletter form to do so:

Go to “MailPoet” -> Settings -> Hover Email field -> Select “Edit Display” -> Select “Yes” next to “Display label within input”.

Hover Submit field -> Select “Edit Display” -> Change text to”Submit”.

Live chat

You were probably wondering how to add chat like in our example page. So here is information for You. In order to add chat like this You’ve got to go to tawk.to and registrate account. After registration You will be redirected to installation wizard where the system will give You code, which You need to place in your website settings Divi -> Theme Options -> Add code to <head> of your blog.

To change chat style You need to go to Your tawk.to dashboard and click Admin -> Widget Appearance. Good luck!

Editing Content

If You’re reading this, You probably never worked with Divi Page Builder. To let you know Divi is powered by the Divi Builder, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. This builder is likely known because of:

  • Real Time Design
  • Customize Everything
  • Organize With Ease
  • Little To no Loading
  • Responsive Editing
  • And etc…

So let’s get back to page editing.

Page Structure

So Divi theme pages are made of these elements:

  • Sections
  • Rows
  • And Modules

Take a look at example bellow.

pr1

Editing Page

In order to edit WordPress page with Divi Builder, You got to be logged in and have at least editor permissions. So there is two ways editing page – fast one, and slower one.

Fast one is when your go to desired page and clicking Edit Page link at WordPress top menu (see in the picture bellow) .

pc2

Slower one is to go to Dashboard -> Pages and select desired page.

So when we are in the page edit, in order to edit page wit Divi we need to press Use The Divi Builder button. After clicking it you will see already created Section and Row  by pressing Insert Column(s) you can add the modules. For example, let’s take a Image module. After clicking it you will notice that you will get into Image Moudel Settings modal screen.

pc4

There you can change and add everything you need – alt text, title text, make it open on click, link it to url and etc..

Finally, after ending edit we just press regular WordPress button – Save (or Update if you’re editing).

Editing Images

If You’re not familiar with WordPress editing and sizing images, then You should not skip this part. You won’t need ant image editor software to crop, rotate and resize. These functions can be reached right after uploading desired image to your website media library.

  • So in order to start editing photo you must follow this path Media -> Add New then click Select Files or You just can drag and drop file in that block. (Or if You’re in the post editing mode, You can just click Add Media button above the text editor)

pc12

  • Once image is updated, her icon will appear bellow in the images list, to edit her, click on that icon, after that modal will pop up and you will need to click on Edit more details link on the right side of the screen. (In this modal you can also add or edit ALT text, description, title and caption)

pc13

  • After window load, You will see your image again. In order to edit image you will need to find a button Edit Image right after your image. (In this screen you can also add or edit ALT text, description and caption)

pc15

  • At this page we will be able to make all the changes which was mentioned above. (Rotate, crop and resize).

pc14

Conclusion

So congrats again! You’ve managed to end this documentation. Now you’ve not only installed our Divi Woocommerce, but you even learned some new stuff like editing images and content.

If you liked this documentation, send us your feedback.

Good luck!