[Resolved] WooCommerce Filter Button

Home Forums Support WooCommerce Filter Button

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #891932
    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.

    #891933
    Rob
    #891953
    David
    Staff
    Customer Support

    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.

    #891975
    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.

    #891997
    David
    Staff
    Customer Support

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

    #892001
    Rob

    Hi David

    Thats the one yeah

    #892039
    David
    Staff
    Customer Support

    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>
    #892544
    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.

    #892545
    Rob
    #892666
    David
    Staff
    Customer Support

    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.

    #892920
    Rob

    Thanks David

    That works brilliantly!!

    #892927
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.