Move WooCommerce Sidebar to Top

[tonisaneca]

Hi there!

1. I was wondering, how can I move my Woocommerce sidebar to the top? I would love to use the filter widgets available to WooCommerce, but I’d also like to maximize the width of the page.

After checking the forums, I found one user who was able to do so here. The thread can be found here, but no mention of how to move the sidebar to the top.

2. If I were to keep the WooCommerce sidebar on the left, how can I edit the width to be smaller to give more space for the products?

I’d appreciate your help! Thanks 🙂

– Toni

[tonisaneca]

Whoops, never mind, I answered my first question! The second one still remains, though 🙂

[Kyle – SUPPORT]

Hi

The smallest the woocommerce sidebar can be is 1/4

– Kyle

[tonisaneca]

So where can I set it to 1/4?

As a hack, I tried using this Custom CSS:

.has-left-sidebar aside.sidebar {
    width: 220px;
}

On the front end it looks fine, but of course, the shop content doesn’t widen.

[Kyle – SUPPORT]

Yes you would need to edit the width of the products div as it is set to 9 columns. However you may suffer layout issues elsewhere

– Kyle

[tonisaneca]

This reply has been marked as private.

[Kyle – SUPPORT]

Can you provide me with a login so I can look into it?

– Kyle

[tonisaneca]

This reply has been marked as private.

[Kyle – SUPPORT]

Can you please update the theme

– Kyle

[tonisaneca]

I downloaded the update but will updating my theme reset even my theme options? Unfortunately, I’m not using a child theme.

[Kyle – SUPPORT]

The theme options will not reset no, the only thing you would lose is if you have edited the theme files

– Kyle

[tonisaneca]

That’s great! Okay I’ve updated my theme to the most recent Atelier version already. 🙂

[Kyle – SUPPORT]

Seems to be working now

– Kyle

[tonisaneca]

Hi Kyle,

Thanks for the help! I ultimately decided to remove the sidebar altogether. It just looks better without it. Anyway, just two more things (so sorry for the hassle!!).

1. The padding between product rows is a little tight (see attached). If it could be as roomy as in the demo http://swiftideas.com/shop/ that’d be really great.:)

2. Toggling the small/large grid view, list view beside the filters doesn’t really change the size. Any ideas on how I can make it work like the demo?

Thanks
Toni

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try adding this to your custom css:

.woocommerce ul.products li.product.product-display-standard {
  margin-bottom: 30px!important;
}

– Kyle