Sidebar at the bottom

Hi @mmk175,

Thank you for contacting WooCommerce Plugin Support. I tested your website to see if I could replicate the issue, but everything was working properly. The filters are showing on top of the websites on the product category pages. Check out the screenshot below to see my results:

Please share a screenshot and URL of the exact page and we’ll do a more in-depth investigation and work on finding a solution.

We’re waiting for your reply and looking forward to helping you further.

Hi @afzalpansuvi

Yes, it’s actually for the shop page.

https://matthewm288.sg-host.com/shop/

All other pages use a codeastrology product table.

I think the only way to fix this side bar issue is the buy the plugin so. I appreciate your help.

Hi @mmk175

I’ve just had a look at the underlying code for that page. The reason that’s happening is that despite showing on the left-hand (i.e. first position) side of the page, it’s actually loaded after the main content.

To change the layout of the sidebar on mobile devices, you could use the following custom CSS in your settings under Appearance > Customize > Additional CSS:

/* Media query for mobile devices */
@media (max-width: 768px) {
    .woocommerce-shop .col-full {
        display: flex;
        flex-direction: column;
    }
    
    #secondary {
        order: -1; /* Moves the sidebar above the main content on mobile */
    }
}

Note: This code will only apply to the shop page. For all the other pages, the sidebar will still show at the bottom.

Hope it helps ??

Hi @riaanknoetze

Thanks for this. I am currently only testing the free version so the fact that it only works on the shop page is great for now.

I just tested it and it works perfectly. The filter has now moved from the bottom the top.

I greatly appreciate your help.

Hello mmk175

Thank you for your reply.

I am glad to know that this solution works for you.

Please don’t hesitate to contact us again if you have more questions or concerns.
We are here for you.

When you have moment, consider posting a review for Storefront theme. ??

Best regards.

@riaanknoetze

Hi there, hopefully you get this. I was wondering if you could help me regarding this query again. I noticed in your CSS it states

.woocommerce-shop

This fixes the issue for that page. Is there a possible rule or something I can replace it with so it does this on all pages with a filter?

Hi @mmk175,

Thank you for reaching out to us with your query. The .woocommerce-shop class is specific to the shop page in WooCommerce. If you’re looking to apply a similar style across various pages, we might need to identify a common class that is present on all those pages or write a more general CSS rule. To help you further, could you please provide a link to the specific webpage? This will allow us to take a closer look at the structure of your pages and suggest a custom code that would work best for your setup.

Also, it’s important to note that class names can vary depending on the theme or customizations you have in place. So, once we have a look at your site, we’ll be able to tailor the CSS specifically for you.

Looking forward to your response so we can get this sorted out for you!

Hi @afzalpansuvi

The plugin I use for the filter actually has a feature that works to fix my issue. I just wanted to wait for your reply. Thanks for looking into this for me. Much appreciated.

Hi @mmk175,

Thanks for getting back to us. Glad to hear that the feature within your filter plugin has resolved the issue you were experiencing. It’s always great when the functionality you need is already available in the tools you use. Just so you know – we will now close this ticket as solved. If you have any other questions or issues, please feel free to open a new ticket, and we’ll be more than happy to assist you.

Thank you for choosing WooCommerce, and have a fantastic day!