[Resolved] Customize Niche – Woocommerce Shop Category Menu

Home Forums Support Customize Niche – Woocommerce Shop Category Menu

  • This topic has 7 replies, 3 voices, and was last updated 1 week ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1437315
    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!

    #1437411
    Leo
    Staff
    Customer Support

    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 🙂

    #1437422
    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?

    #1437951
    David
    Staff
    Customer Support

    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.

    #1438442
    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!

    #1438690
    David
    Staff
    Customer Support

    Adjusted the CSS above so it aligns left.

    #1438705
    Fredrik

    Great! Works perfect, thank you 🙂

    #1438918
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.