[Resolved] WooCommerce Filter Button

[Rob]

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.

[Rob]

https://ibb.co/ZJg0Kwv
https://ibb.co/SwGjL6H
https://ibb.co/7NGjzVT

[David]

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.

[Rob]

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.

[David]

I only need the URL to have a look with dev tools 🙂 Is it the iceberg site?

[Rob]

Hi David

Thats the one yeah

[David]

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>

[Rob]

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.

[Rob]

https://ibb.co/N3BsMtY

[David]

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.

[Rob]

Thanks David

That works brilliantly!!

[David]

Glad to be of help

[Author]

Posts