[Support request] how to add a side bar on the left into the SHOP page?

Hi Robert,

What you can do is enable the Sidebar through Appearance > Customize > Layout > WooCommerce > Sidebar Layout. Reference: https://docs.generatepress.com/article/woocommerce-overview/#shop

Then, create a Block Element – Sidebar, and set it to display on the Product Archive page. Reference: https://docs.generatepress.com/article/block-element-sidebar/

Add a WP Navigation Block there. Reference: https://wordpress.com/support/site-editing/theme-blocks/navigation-block/

Hi Roert,

Try this CSS:

.is-left-sidebar ul.wp-block-navigation__container > li >a {
    padding-top: 0;
    padding-bottom: 0;
}

.is-left-sidebar ul.wp-block-navigation__container {
    row-gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

Hi there,

try this CSS:

/* parent menu */
.wp-block-navigation .wp-block-navigation-item:hover a {
    background-color: #00f;
    color: #000;
}
/* sub menu */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover a {
    background-color: #0f0;
    color: #fff;
}

If you want the sub menu items to have a different normal color then add this CSS:

/* sub menu not hover */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    background-color: #0f0;
    color: #fff;
}