Overview
A DiviMenu is a menu builder that is made of one (or none) Menu Button and one or more Menu Items.
The Menu Button opens and closes the DiviMenu. That is, it shows and hides the Menu Items, provided that you haven’t previously hidden it from the DiviMenus Settings modal.
Speaking of Menu Items, let’s focus on them and see what types of Menu Items we have and what they do.
When we enter the Menu Item Settings modal we can see the Menu Item toggle, which is open at first. From this toggle you can give it a name and choose if you want it to be either a text (optionally with an icon or image), an icon or a image. Also, you can set from this toggle some additional behavior to the Menu Item.
In the Content Tab too, we can see the Link toggle, where you can choose what should happen when you click (or hover over) the Menu Item. In order to choose that action, we offer the Link Type select field.
In case you are using DiviMenus Flex and the WooCommerce plugin is active, a new toggle will appear. Additionally another toggle will appear in the Design Tab. These toggles are called Shopping Cart and we will be discussing their fields thoughout this document.
Cart fields
These fields are located in the Shopping Cart toggle that you will find the Content tab, between the Menu Item toggle and the Link Toggle. Remember that this toggle will only be visible if either WooCommerce or Easy Digital Downloads is installed and active.
Let’s go over and explain these fields.
Content Tab > Shopping Cart > Is Shopping Cart
This will take this Menu Item to the cart page, regardless the URL that you have introduced in the URL field.
Enable this field if you want this Menu Item to be the Cart item.
Content Tab > Shopping Cart > eCommerce Platform
This will let you choose which shopping cart you want to use.
We are currently supporting the WooCommerce and Easy Digital Downloads shopping carts.
Default is WooCommerce.
Content Tab > Shopping Cart > Show Item Count
This will show the cart item count. If you enable this option, a red badge will appear over the Menu Item with the cart item count in it.
The cart item count will be automatically updated when updating the cart. No page reloads will be necessary.
This feature is compatible with the Visual Builder, so you can preview and style the red badge. Since we are previewing there, the cart item count will be zero and it will change to the actual value in the front-end.
> Adding a Shopping Cart with Item Count
Content Tab > Shopping Cart > Show Zero Value
Here you can choose whether the red badge should be displayed when the cart is empty or not.
Menu Item > Link > Link Type
If you don’t select a Link Type (the default and probably the most common use case), clicking the Menu Item will take the user to the Shopping cart, no matter what.
However, you can use a Menu Item Link Type that DiviMenus offers (especially the Sub Link Type) to display additional information (e.g. the cart content).
Let’s go through the different Link Types and their click behavior.
Remember that you don’t need to use a Link Type: this is optional and you will probably want to stick with the default behavior (URL Link Type). Especially if you are not familiar with Link types.
Show Link Type / Sub Link Type
These Link Types will display either page element(s) or a sub element (dropdown menu) on click. Therefore, clicking the Menu item won’t open the cart page unless you enable the Open URL field.
This way, you can show the element (either page element(s) or a sub element) on menu Item hover and go to the cart page on Menu Item click.
On touch screen devices, tapping the Menu Item will show the element, so you might want to add a link to the cart in case you need it (you probably won’t).
In the following video, we will show you how to also display additional information on Menu Item hover.
Popup Link Type
Unlike the Show and the Sub Link Types, clicking the Menu Item will not take the user to he cart, but will open the popup.
Design fields
These fields are located in the Shopping Cart toggle that you will find the Design tab. Please, remember that this toggle will be visible only if WooCommerce is active.
These fields wil style the red badge (cart item count). You can style the Menu Item icon / image as usual.
Let’s go over and explain these fields.
Design Tab > Shopping Cart > Cart Info Background
Here you can change the red badge background color. As the name implies, the default color is reddish.
Design Tab > Shopping Cart > Cart Info Font
Here you can change the font family, font weight and font style.
Design Tab > Shopping Cart > Cart Info Text Color
Here you can change the cart item count text color. Please, use this field along with the background color to display the desired badge.
Design Tab > Shopping Cart > Cart Info Text Size
Here you can change the cart item count text size.
Advanced > Custom CSS > Cart Info
Here you can add custom CSS to customize the red badge.
Next, we show you some use cases in order to inspire you to style your cart. But of course, you can use any CSS property that you need!
Border
You can use the border CSS property to add a border. Likewise, you can change the border radius (default is 50%).
Size
You can use the padding CSS property to increase or decrease the background (or circle) size.
For example, you can set a 1em padding to increase the circle, or even 1.5em for a larger circle. Likewise, you can set a lower value to reduce the circle.
You can also use absolute units (e.g. pixels) for the padding. But we recommend that you use relative ones (e.g. em, which is relative to the font size).
Even though the padding property is our favorite one when it comes to change the circle size, you can use the width and height properties (or another ones).
It’s totally up to you!
Position and display
You can change the position to relative (default is absolute with top and right values) to display the cart items count next to the Menu Item icon/image
Additionaly, since the cart items count is a Flex item, you can use Flex properties to style it, such as align-self to vertically align the cart items count, order to move the cart items count to the left side, etc.
Advanced
Developers
We offer the dd-cart-output WordPress filter to filter the WooCommerce cart output.
This filter has two parameters. The first one is the ouput itself, the second one is the module attributes.
Resources
Below, we are listing some resources that might be helpful for a better understanding of the shopping cart.
Tutorials
Adding a Shopping Cart to the DiviMenu