Help with Product Filters on WooCommerce Site Please! They're not showing on Category page

[core365]

Hi, I’m using a plugin, BeRocket, to add product filters to my WooCommerce site - I’m testing it out on a staging site first. I’ve done a Price filter slider and added the filter widget to a Sidebar. The Sidebar is correct and visible on the ‘Shop’ page, however in the menu I’ve used Categories as the menu items and I don’t know why, but the sidebar I’ve created isn’t showing on the category page, the generic Main Sidebar is instead. Also, I want the sidebar filter to show own the left hand side of the page, but no matter what setting I choose (left or right) in the Theme Options > WooCommerce > Widgets Image Alignment, the sidebar keeps showing down the right hand side of the page!

I have no idea what’s going on with the settings and I’m confused as to what I need to do to show the filter down the left hand side of the Category page!

I’ll appreciate any help you can give and I’ll put the URL to the staging site along with admin access in a secure note.

Thanks!

[ruenel]

Hello @core365,

Thanks for writing in!

This isn’t an issue at all. You have added the price Filter widget in the e-Scooter sidebar as shown here:

And the sidebar itself isn’t assigned to display in the Adult Electri Scooters taxonomy:

Once you have assigned the sidebar, the price filter should display.

Kindly let us know how it goes.

[core365]

Hi @ruenel,

Ah ok, I didn’t realise I had to select the taxonomies with it, thanks for letting me know!

I have a couple of further issues if you’re able to help please!

1. When viewed on a mobile device, the sidebar I’ve added in for the filter is displayed at the bottom of the page instead of at the top of the page above the products! Is this because of some code I added into the functions.php file to display the category description at the bottom of the page instead of the top? If so, are you able to advise me on how to change it so filter stays at the top of the page please? Here’s the code I’ve used:

   remove_action( ‘woocommerce_archive_description’, ‘woocommerce_taxonomy_archive_description’, 10 );
   add_action( ‘woocommerce_after_shop_loop’, ‘woocommerce_taxonomy_archive_description’, 100 );

2. On one of the categories, Bikes, at the minute there aren’t any products for this category and for some reason it’s showing the Main Sidebar and I don’t want it to! I can’t figure out how to stop it showing on the Bikes page, so I’d appreciate it if you were able to help me out on this one too please!
   I’ll put the URL in a secure note as it’s on my staging site.

Thanks!

[tristup]

Hi @core365,

Please find the answer to your queries below.

1. The Sidebar comes at the bottom as in the smaller devices, the primary section i.e content will come first, and then the secondary section i.e sidebar comes. It happens when you selected the layout Content Left and Sidebar Right. You can select the Sidebar Right and Content Left layout from Theme Options > Layout and Design, to get the Sidebar above the content in smaller devices.

2. There is no such option to remove the sidebar if no product is found, but can be achieved by customizing the WooCommerce Archive layout for the specific category.

Hope it helps.
Thanks

[core365]

Hi @tristup,

Many thanks for your reply:

1. I’ve currently set it so the sidebar is on the left and the content is on the right and that’s what I’m after, so I don’t want to change this! As the side bar is on the left, it should appear at the top of the page above the products on a mobile though shouldn’t it? However, is there any CSS or any code I could add into functions.php so the sidebar appears at the top of the page?

2. Ok, no problem, thanks for letting me know, I’ll just remove the category from the menu for the time being instead!

Thanks!

[ruenel]

Hello @core365,

“Is there any CSS or any code I could add into functions.php so the sidebar appears at the top of the page?”

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

And then make use of the Flexbox column reverse property. Perhaps this link might give your a clear idea:

• https://stackoverflow.com/a/22367799

Therefore, you may have something like this:

@media(max-width: 979px){
    .x-container.max.width.offset {
        display: flex;
        flex-direction: column-reverse;   
    }
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

The @media is needed to that it will only be applied to smaller screens. Feel free to make adjustments as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

[core365]

Hi @ruenel,

That’s excellent, just what I was after, thank you!

Thanks for the links too and I appreciate all of your time and help!

Cheers!

[prakash_s]

Hello @core365,

Glad that we were able to help you. Please feel free to reach us if you have any query regarding our theme and theme settings.

Thanks