Docs

[allcal]

How can I move the sidebar on the shop page (http://7d2.09d.myftpupload.com/shop/) to the top of the shop horizontally and make the shop width full width? Basically give room for 4 columns of products and have the sidebar widget product filters across the top horizontally.

[Jade]

Hi there,

Please set the columns settings to 4 in the customizer and add this code:

.woocommerce.archive aside.x-sidebar.right {
    float: left;
    width: 100%;
    padding-left: 0;
    border-left: 0;
}

.widget_layered_nav, .widget_woocommerce_product_filter_meta, 
.widget_woocommerce_product_filter_order, .widget_woocommerce_product_filter_reset {
    margin-top: 0 !important;
    width: 15%;
    float: left;
    margin-right: 5%;
}

Hope this helps.

[allcal]

That moved the sidebar perfectly, but the whole content area for products and the breadcrumbs are pulled to the far left and not within the normal full width container.

[Jade]

Hi there,

Please add this code as well:

.woocommerce.archive .x-main {
    width: 100%;
}

Hope this helps.

[allcal]

For some reason the drop down menu are not opening on a mobile phone. Can you take a look at that? The dropdown menus also are too wide on mobile (which might be a related issue).

[Christopher]

Hi there,

Please check your URL, it doesn’t work.

Thanks.

[allcal]

Sorry, we migrated to site to http://www.beachcandyswimwear.com

[Nico]

Hi There,

I could see that it is working well. Would you mind clearing your site and browser cache for testing. If still not working, please share us the details of your device that you used.

Thank you so much.

[allcal]

It looks like the shop filter drop downs do work but you have to press on the very far right side because they extent past my iphone right side. How can I shorten the width of all those dropdowns?

http://www.beachcandyswimwear.com/shop

[Rad]

Hi there,

Please add this CSS as well,

@media ( max-width: 767px ) {
.attr_dropdown, .cat_dropdown, .widget_woocommerce_product_filter_order, .x-sidebar{
  width:100% !important;
  max-width:100%;
}
.widget_layered_nav, .widget_woocommerce_product_filter_meta, .widget_woocommerce_product_filter_order, .widget_woocommerce_product_filter_reset {
    width: 200% !important;
}
}

Hope this helps.

[allcal]

That css didn’t change anything on the shop page.
….
Nevermind. found the css that was in the way of that fix.

[Prasant Rai]

Good to hear you figured it out! Let us know if you have any other questions. 🙂

[Author]

Posts