- This topic has 9 replies, 4 voices, and was last updated 5 years, 6 months ago by
.
-
Posts
-
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
Customer Support
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/HQLHK6uAs 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,
MelvinFor 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,
MelvinLead Developer
Hi there,
Try adding this CSS:
.woocommerce-ordering { clear: both; }Hi Tom,
Thanks it works! Bravo bro
Regards,
MelvinGlad I could help 🙂
- You must be logged in to reply to this topic.
