How to recreate the UberMenu 3 Shop submenu

Quick Tips

For basics on how to add product and product category items to the menu, please see the WooCommerce Guide

The “New” and “Savings” badges are added via the Badges feature

The feature product item is created using the special WooCommerce Product Item Layout

Menus Panel Submenu Structure

This is the submenu structure for the “Shop” top level item, which is a link to the WooCommerce shop page. Its Submenu Column Default should be set to 1/5.

“Featured” header above item

To create the “Featured” header, in your Custom Content item, set the custom content to

<div class="um-featured-product-header">Featured</div>

and add this custom CSS in your CSS Tweaks

.ubermenu .um-featured-product-header{
    text-align: center;
    font-size: 10px;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: .25em;
}

On this page