Product filter in Off-canvas menu

Hi there,

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

Hi David
That solved the issue. :-) Thanks a lot.

You're welcome

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

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>

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

Hi there,

Try adding this CSS:

.woocommerce-ordering {
    clear: both;
}

Hi Tom,

Thanks it works! Bravo bro

Regards,
Melvin

Glad I could help :)