[Resolved] Customize Niche – Woocommerce Shop Category Menu

[Fredrik]

Hello,

Is it possible to change the Niche, Shop Category Menu into a dropdown on mobile?

It’s not scaling so well when you add several product categories.

Thx!

[Leo]

Hi there,

Unfortunately I’m not aware of a solution to do that – it would require some substantial custom coding for sure.

Let me know if there is anything we could do to make the current layout work for you 🙂

[Fredrik]

Hello Leo,

I figured so 🙂 I was hoping this could be a way around the mega menu issue from earlier.

Maybe adding this for mobile (below) and try to style it like the GP “Default product sorting”.

add_action( 'woocommerce_before_shop_loop', 'gp_filter_by_tag', 31 );
 
function gp_filter_by_tag() {      
   if ( is_product_category() ) {      
      wc_product_dropdown_categories();   
   } 
   wc_enqueue_js( "
      $('#product_cat').change(function () {
         location.href = '/product-category/' + $(this).val();
      });
   " );
}

Woo Product Dropdown

Possible with some simple CSS?

[David]

Hi there,

no simple solution to turning it to a drop down without custom development.

You can try this CSS:

@media(max-width: 600px) {
    .woo-cat-nav {
        -ms-overflow-style: none;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    .woo-cat-nav li {
        flex: 1 0 100px; /* Set min width of cat terms */
        scroll-snap-align: center;
    }
}

It will make the cat nav a swipe-able list on smaller devices.

[Fredrik]

Hello David,

Thank you! What a simple but brilliant solution, perfect 🙂

One thing I noticed is that it only scrolls in the right direction & cuts off the left menu item.

Is it possible to solve this somehow?

Thanks again!

[David]

Adjusted the CSS above so it aligns left.

[Fredrik]

Great! Works perfect, thank you 🙂

[David]

You’re welcome

[Author]

Posts