[Resolved] Product filter in Off-canvas menu

[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

[David]

Hi there,

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

[Alan Gautham]

Hi David
That solved the issue. 🙂 Thanks a lot.

[David]

You’re welcome

[melvin]

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.
https://imgur.com/a/HQLHK6u

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

[David]

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>

[melvin]

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

[Tom]

Hi there,

Try adding this CSS:

.woocommerce-ordering {
    clear: both;
}

[melvin]

Hi Tom,

Thanks it works! Bravo bro

Regards,
Melvin

[Tom]

Glad I could help 🙂

[Author]

Posts