[Resolved] Add Filter for products on /shop page on theme Niche

Home Forums Support Add Filter for products on /shop page on theme Niche

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1314657
    nik9

    Hello

    I have some questions about the /shop page. So I take the liberty of asking several question of a specific topic. πŸ™‚

    1.) I want to buy a live product filter plugin for the /shop page in order that I can filter my products on the same page and live. For my use case I can’t work with the default off canvas filter from niche template. I also made some research but I wanted to ask you, if there is one plugin which you would recommend for AJAX live filter products in GeneratePress themes.

    2.) Also I tried to add the sidebar to the /shop page. So I changed the layout from “default” to “Sidebar / Content”. The Page Builder Container is set to “default”. In the left-sidebar I insert a event widget only for testing purpose. But the sidebar will not appear on the /shop page. Is there a setting which I forgot? because on a normal page the left-sidebar is appearing and shows the test calendar widget. So I guess I need this left-Sidebar in order that I can put the filter widget in it and filter my products, isn’t it?

    3.) I know that there is also a Element for the Filter by categories from GP (Woocommerce Shop Category Menu). When I disable “execute PHP” I get the following code on my /shop page. I want do remove or disable this because I don’t need this. But I do not found the place where this is coming from.

    'name', 'order' => 'asc', 'hide_empty' => true, ); $product_categories = get_terms( 'product_cat', $cat_args ); if ( ! empty( $product_categories ) ) { echo '
    '; foreach ( $product_categories as $key => $category ) { printf( '
    %2$S
    ', get_term_link( $category ), $category->name ); } echo '
    '; } ?>
    #1314858
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. I don’t have a favorite one, but I’ll ping the others to see if they know of one.

    2. Did you set the sidebar layout in Customize > Layout > WooCommerce? If so, is there a Layout Element setting a different sidebar layout in “Appearance > Elements”?

    3. You should just be able to delete the Element itself instead of just disabling PHP.

    #1315265
    nik9

    Ho Tom,

    Thanks!

    If you guys don’t have a favorite one, then maybe you can mention 2-3 good plugins for this use case. The marked crowded mit possible plugins for that. πŸ™‚

    Now I have the sidebar. I didn’t know that there is a option in Customizer for this. With every hour I understand WordPress and WooComm better and better! πŸ™‚

    #1315425
    David
    Staff
    Customer Support

    Hi there,

    i am afraid we don’t have any specific recommendations.
    May be worth asking in our Facebook forum:

    https://www.facebook.com/groups/generatepress

    #1316329
    nik9

    Thanks! No problem I will take a look! πŸ™‚

    I have also a question to sidebar and off canvas style in this theme.

    On Desktop:
    I use the Niche theme with my custom brand colors and I like the off-canvas slide style from that theme. However, I need the filter always visible for a better UX when it comes to filtering on attributes and products. On Desktop I want to use the sidebar instead the off canavas so I don’t need the filter button there. I adjust the “Woo Shop Filter and Breadcrumb” Element like this to do that:

    <span class="slideout-toggle woo-filter-toggle hide-on-desktop"><a href="#">FILTER</a></span>
    <span class="hide-on-mobile hide-on-desktop"><?php woocommerce_breadcrumb(); ?></span>

    Now I want to style my sidebar like the default niche theme off canvas style. (See printscreen)
    https://ibb.co/CtcHJ0x

    Is there a easy way for this?

    On Mobile
    For UX reasons I want to hide the Sidebar on mobile and use there instead the off-canvas panel. Because of my change in the “Woo Shop Filter and Breadcrumb” Element I have on Mobile the Filter button available. But when I click on button, there is no action. Seems like there is something missing to get the button to work (off canvas opens).

    The goal is:
    – When I click on the Nav toggle, the Nav opens in the off canvas. BUT only the Nav. NO filter should be displayed.
    – By clicking on the filter button, a off canvas open with only the filters in it.

    Is there a way to have two separate off canvas to do this or is there a another solution? πŸ™‚

    Cheers!

    #1316547
    nik9

    Hello

    Update: Love it! πŸ™‚

    I was able to implement some questions with try & error alone and want to share some infos for others maybe.

    Now I have the following expected behavior:
    – The Filter button is only visible on Mobile

    <span class="slideout-toggle woo-filter-toggle hide-on-desktop hide-on-tablet"><a href="#">FILTER</a></span>
    <span class="hide-on-mobile hide-on-desktop hide-on-tablet"><?php woocommerce_breadcrumb(); ?></span>

    – The filter button is working. (The problem was another element which takes to much space). Also I hav a problem with the “default sorting” element. Now I use this CSS to manage this.

    .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {float: right;}
    .woocommerce .woocommerce-ordering select {padding: 10px 10px 10px 10px;
    }

    – I hide the Sidebar on mobile and tablet. But I not sure if this is the best way. Because I only hide the sidebar with CSS. On every page loud, the sidebar will also load in the background. Maybe there is a better way with PHP?

    @media screen and (max-width: 992px) {	
    	#left-sidebar {
    		display:none;
    	}
    }

    For doing this with PHP I found this snipped to add in the sidebar.php. But I don’t like to edit the file over FTP.

    <?php if ( ! wp_is_mobile() ) : ?>
    
    Then you need to go to the very bottom of your file and add the ending tag.
    
    <?php endif; ?>

    Nest steps:
    – I need to style the sidebar as wanted
    – hide the Navigation menu when the off canvas from the filter is open.

    #1316583
    nik9

    Update:

    Now I’m playing around with this css code. actually it work on the filter button. So there is no Navigation anymore. But the Navigation is also gone on the main Navigation toggle. (On Mobile and tablet).

    .slideout-navigation .main-nav {
            display: none;
        }

    So I need a way to distinguish if i press the filter button or the Nav toggle.

    #1317071
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Not sure If I understand that one. Can you explain a bit more about what you’re trying to do with it?

    As for loading the sidebar – you’re better off using CSS if you don’t want to edit/overwrite core template files πŸ™‚

    #1317267
    nik9

    Hi Tom,

    No problemo! πŸ™‚

    What I want to do on Mobile/Tablet view is, that I can use the off canvas with widgets to filter the products without the navigation. BUT I want to have the Navigation values also in a off canvas but in another.

    Means that i want to have two different off canvas. (Maybe with css or php?)

    – One has only tha navigation in it (hamburger icon in header) and opens by clicking on the toggle.

    – One has only the filter widgets in it and will open when I click on the β€žfilter buttonβ€œ from niche theme.

    Currently I have some filter widgets in the of canvas but it always displays also the Navigation in the off canvas.

    I think niche theme is do something like this on desktop view. By clicking on the filter button on the shop page it shows only the filters. BUT when u open the filter for products on Mobile, it also has the navigation in it. So there is basicly no different between the filter button and the toggle menue. But i want to have this different. Because I dont need the space for the Navigation when I want to filter the product.

    I hope you understand my question now. If not, I will try again. πŸ™‚

    Thanks! πŸ™‚

    #1317780
    David
    Staff
    Customer Support

    I would suggest maybe look at using a plugin for the second off canvas.
    This is fairly new but it has an active support forum:

    https://wordpress.org/support/plugin/off-canvas-sidebars/reviews/

    #1317785
    nik9

    Hi David,

    Thanks, I will check this.

    But this means that there is no way todo this in GP? Iβ€˜m not a big fan to have vore everything a different plugin. πŸ™‚

    Maybe I even dont need a second off canvas. I only want to hinde the Navigation entrys when I click on the filter button.

    Cheers

    #1317839
    David
    Staff
    Customer Support

    If you simply want to hide the navigation then use some CSS to do that.
    For example: the original niche theme only displays the Filter on the Shop and Product Archives. So this CSS would hide the off canvas nav on just those pages:

    .post-type-archive-product .slideout-navigation .main-nav {
        display: none;
    }
    #1321409
    nik9

    Hello David,

    Thanks. But this is not working as I want. But no Problem, I will do it for now with the “Off Canvas Sidebars” plugin which you mentioned.

    It works actually good except on Pages were a Site Header from Elements is applied. There I get a big white space. If I deactivate the element the white space is gone also when I select “no merge”. Also on a fresh GP installation is no white space. The CCS class who is guilty for the big space is “ocs” and comes from the Plugin.

    You can see it on my /home site (Domain is in the first post)

    So I guess there is a issue with header elements and this canvas plugin. Is there something you guys could do or do I have to raise a case by the plugin developer?

    Thanks & Cheers

    #1321732
    David
    Staff
    Customer Support

    Hmmm… that plugin wraps the content with a min-height container.
    Unfortunately its being hooked in after the Header Wrap the merged header element requires. Which is breaking the containment.

    I don’t think theres an easy fix for that.

    #1321748
    nik9

    Thanks David.

    Hmm.. that’s a pity. πŸ™

    Means there is no chance to use this Plugin to have a second off canvas. Any thought to adjust the GP element header rendering? If not, I have to search for another solution. My main goal is, that the UX in filtering products on mobile is almost perfect. So I need a off canvas there or something similar to that.

    Cheers

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.