ElegantShop 

USER GUIDE

Installing the plugin

Identifying the module

First View

Adjusting Settings

Changing Style

Add to Cart Button

Sale Badge Settings

Product Settings

Description Source

Flipbox Settings

Other Settings

First Steps

 

Installing the plugin

The easiest way to install this complement in your self-hosted WordPress website is using the plugin install manager. To do it, in your admin dashboard navigate to the plugins menu, click and new, then press upload plugin and then choose the proper file.

Identifying the module

Once the plugin was installed and activated, you will have a new module available in the module list with the prefix ElegantShop named Products.

Exploring The Module

 

First View

When you insert the module for first time, you will see the default loading icon provided by Divi. This, because the module loads dynamic content, just like the default shop module, (In fact, it has a lot in common)

Now, after the load was ended, you can view all your products with the default effect applied, which is the “overlapped product”.

In the module settings, the opened toggle displays the products query options. This options are basically the same you used in the default shop module, with the only difference that the initial default value in the “product view type” displays a different order than the default shop module, which, in my opinion, is more accurate than the original one.

Also, here you can change the products style

Please keep in mind something, when you adjust the “product view type” setting, some adjustments in the “order by” setting may not work, that’s because the combination of settings are not compatible, for example, show the latest products and order by oldest to newest.

Adjusting Settings

 

In this module, all the specific settings are used in the content tab. The settings in common with the original Shop module are under the design tab, just as the original module, with the only difference than this has the option to adjust the button design.

Changing Style

This setting in under the main tab amd you can choose between 2 styles. Some other settings will be shown or hidden depending of the value you are selected here.

Show/Hide Elements

All the elements inside the product column can be hidden changing the proper value to off, but keep in mind that if you turn off some values, the effect will work but it may looks weird wthout it, for example, if you hide the main image, but of course, the option is there to give you the freedom of choose.

Add to Cart Button

The add to cart button use an icon instead of text. If you want to use this button with ajax function, you must activate the “ajax add to cart option” in your WooCommerce settings. Let’s see how to adjust the options of this button.

  • Add to Cart Icon & Add to Cart Icon Color: This options adjust the values of the initial add to cart button.

 

  • Added to Cart Icon & Added to Cart Icon Color: If you use the ajax options, when someone click the button and the product were added to the cart, this values will be shown instead the previous one.

Sale Badge Settings

There’s two places where you can adjust the settings of this. The specific options added by this module are here:

 

If you choose use an image instead of text, tha background setting will be hidden and the badge background become transparent to not interfere with the design of the image you uploaded. Instead, if you prefer use the default text, you can stylize it in the design tab.

 

 

Product Settings

Here you can adjust some additional values. Let’s see how the options affect the module.

  • Product Background: This option affects the product column depending of the style selected. If the module was setted to display overlapped products, this will be the background color of the shown content and also the background color when all the rest of the content is displayed on mouse over.
    If the module was setted as flipbox, this option will be the background color of the front side.

 

  • Button Text: Text inside the button that goes to the product page.
  • Description Source & length: This options will be explained in next section.

 

Description Source 

  • Auto: It will try to determinate which option is the best for you:
  • Content: This option will display the original description of the product. If you designed the product pages with Divi Modules, this options won’t work properly, because Divi use the content area to display the modules, and adds a new area named long description, which replaces the default content.
  • Long Description: The product Description when you were changed the product page with Divi Modules
  • Short Description: Description you wrote in the product page.
  • Description Length: This option will cut the content, adjusting it to the number of characters specificated here,

 

Flipbox Settings

This option it will be hidden until you select “flipbox” as the style to use in this module. Here you can adjust the background color of the back side and also the rotation direction of the flipbox when users pass mouse over.

 

 

Other Settings

There’s more options to stylize the module that you can find under the design tab. This options are not explained because are the same one you can find in the Divi Shop Module.