Divi WooCommerce Menu

(User Guide)

First Steps

Once you have properly installed the plugin, you must insert the module named PBC Woo Menu as any other Divi ordinary module. You will see a module with the plus icon as first option (similar to the accordion default module provided by Divi). Each children module it will became a menu item.

Adding a Menu Item

Once you have added a menu item, you will see some options like the image. All the menu item settings must be adjusted here and it will affect only to this particular item menu, any other one, must be adjusted indepently. Let’s check some setting options.

Content – Menu Settings

Style & Main Content

This two options adjust the style of the window menu and also the content. At the moment, it only has one option each one, but was added to let you know it will have more options pretty soon.

Content – Menu Settings

Menu Identifier

This option is the menu item name and also the identifier used to recognize the item inside the main module.

Content – Menu Settings

Menu Title, Button, Custom Content

These options displays content inside the window menu and it owns names are very descriptive. The custom content it will be displayed at window bottom, just below the products.

Content – Basic Product Settings

WooCommerce Query

Here you can adjust the main WooCommerce query values to display different kind of products.  

Design Tab

Menu Item Design Options

Badge & Products Text toggles will adjust the design values of products. Inside the Products Text toggle you will see tree sub-toggles to adjust specific stuff, like product title, price, and bade text.

All remaining options under the design tab, will adjust values on the Menu Item Window.

Adjusting Main Menu

Main Menu must be adjusted on the main module, not inside the children modules like we see above. All settings inside the main module will affect the aesthetic and functionality of the main module

Some Tips

  • The module use the native hover option in some settings, like link background color or link text
  • Visual Builder render and final result may show differences (due to different render used by Divi). Always check your final result on front end. If you find any bug, please contact us, we will fix it ASAP.