Archived topic
WooCommerce Filter Button
11 replies · Started by Rob on May 7, 2019
Hey,
could you help or point me in the right direction?
I have a Product filter assigned to the Left Sidebar, which works great.
What I want to achieve is to - when on mobile to have the filters become a clickable button, and not just "expanded". There are quite a few filters, and as such they take up to much of the screen, I'm having to scroll down just to see the products.
So basically, a button that is inline with the "Sort by" as the attached show. User clicks, it opens a slideout menu which houses the filter.
It isnt part of the plugin, but wondered if this can be achieved by Wordpress natively, as it is essentially just a Widget.
Hi there,
probably doable with some custom JS - out of our scope but if you can share a link to the site i can take a look and provide some pointers.
Hi David
I sent a an email last week using the contact form. The message had the info for the hosts file IP etc.
I don't know if you see if you still have it. I don't have access to the IP at the moment or I would resend.
I only need the URL to have a look with dev tools :) Is it the iceberg site?
Hi David
Thats the one yeah
So the basics are this - first off hide the contents of each of the filters on mobile:
@media (max-width: 768px) {
.woof_block_html_items {
display: none;
}
}Then some jQuery to open and close them and apply a class to the heading which can be used for styling:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.woof_redraw_zone').find('.woof_container_inner h4').click(function(){
//Expand or collapse this panel
$(this).toggleClass('toggled');
$(this).next().slideToggle('fast');
});
});
</script>Thanks David.
That works perfectly, Ive since found another plugin that works better on the phone. But this will be my fallback if I get issues with it.
Quick Question, is there a hook available for placing thing next to the "Order by" drop down, I cant seem to find one. The plugin has the ability for placing filter in "custom hook".
Please see link for what I mean.
The sorting dropdown is hooked into the woocommerce_before_shop_loop
So you could add something to the same hook and maybe some CSS to align the two - would probably need floats (urgh lol) to make that happen.
Thanks David
That works brilliantly!!
Glad to be of help
