[Resolved] Product filter in Off-canvas menu

Home Forums Support Product filter in Off-canvas menu

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1431499
    Alan Gautham

    Developing the woo-commerce site where I am using Primary nav & secondary nav.

    Now on shop pages, I wanna place product filter button which triggers off-canvas.
    After referring to forum similar topics, now I am halfway through I hope.

    Kindly assist to get this thing properly. Now the issue is the filter is displaying as a small box.
    How to show as menu icon with wording filter.

    I have seen this feature before in merch template. but now it’s missing…?

    Thank you

    #1431682
    David
    Staff
    Customer Support

    Hi there,

    you will need to switch the Customizer > General > Icon Type to Fonts for that to display using that method.

    #1431706
    Alan Gautham

    Hi David
    That solved the issue. πŸ™‚ Thanks a lot.

    #1431709
    David
    Staff
    Customer Support
    #1490013
    melvin wang

    Hi David,

    I followed guide https://gpsites.co/niche/how-the-shop-was-made/#more-349, and inserted this code
    <span class="slideout-toggle woo-filter-toggle hide-on-mobile"><a href="#">FILTER</a></span> to Hook Element. Follow your instruction in this ticket to turn on font icon ( Customizer > General > Icon Type to Fonts)

    I’ve noticed the GoogleSpeedInsight score dropped.

    View post on imgur.com

    As such, my question is, anyway we can insert the span code above to show the “filter” 3 lines icon in SVG? and if yes, what’s the code suppose to insert?

    Thanks David.

    Regards,
    Melvin

    #1490033
    David
    Staff
    Customer Support

    For SVG support you would use this in the hook instead:

    <?php
    $icon = '';
    
    if ( function_exists( 'generate_get_svg_icon') ) {
    	$icon = generate_get_svg_icon( 'menu-bars' );
    }
    ?>
    
    <span class="slideout-toggle woo-filter-toggle hide-on-mobile has-svg-icon"><a href="#"><?php echo $icon; ?> FILTER</a></span>
    #1490058
    melvin wang

    Thanks David,

    It works!

    Then I follow your guide to insert this code for CSS

    .woo-filter-toggle{
        padding: 10px 0;
        margin-right: 20px;
        float: left;
        font-size: 14px;
        line-height: 20px;
    }

    Problem: [mobile] Before the code, the “filter” was clickable with off-canvas menu, after that it cant be clicked. Here’s my test site link. P/S: problem exist in Mobile only.

    Can you advice how to solve it?

    TQ

    Regards,
    Melvin

    #1491098
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try adding this CSS:

    .woocommerce-ordering {
        clear: both;
    }
    #1491307
    melvin wang

    Hi Tom,

    Thanks it works! Bravo bro

    Regards,
    Melvin

    #1492267
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.