WooCommerce Shop Page not displaying in full-width

Hi there,

Try this CSS:

.container.grid-container {
    max-width: 100%;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

If you only want that one page to be full width, then add the code above to the Simple CSS metabox in that page (Dashboard > Edit Page).

Let me know.

Hi Leo,

Thank you for your response. I have put the code in the meta box for one of the test products and on the shop page itself as advised but still not working. http://www.rootscrafts.com/shop/

Thanks again for looking into this.
Regards,
Persy

Just checked the shop page and I don't see the code being added?

Hi Leo,

It is very confusing, but here is what I did.
Dashboard > Pages > Shop
I've put the code into the Simple CSS box which appears directly below the Page Header and Front-end Display meta boxes in the wp dashboard. I have also put it into the same area for a single individual product(Dashboard >Products > Fulani Ring) for testing.
Is this the wrong place to put the code?

Thanks,
Persy

WordPress index pages ignore meta box values.

Try this CSS:

.post-type-archive-product .container.grid-container {
    max-width: 100%;
}

This would go in your global CSS (Appearance > Simple CSS).

Hi Leo and Tom,

Thank you for your help. The CSS offered by Tom has done the trick. I am still working on the site so nothing to show yet but I will share a link to the site once I have made some progress.

Thanks again,

Persy

Glad we could help :)

I have the same issue.

When I add the above styles, my page just displays full width but the side bar is still there.

Any updates on this?

Here is the problem child:
https://www.littlecomposers.com/shop/

Hi there,

You can choose the sidebar layout in Customizer > Layout > WooCommerce > Shop > Sidebar Layout.

WOW,
I completely missed that setting BUT the good thing is that what I don't know, Leo knows. :)

Thank you,
that worked perfectly. - E

No problem!

Hello, sorry to resurrect an old post, but I want to make the container full width on both the Woocommerce archive pages and the single product page. I see that I can use the following CSS:

.container.grid-container {
    max-width: 100%;
}

Is there a way to set this in the customizer? I can only set it to a width in pixels.

thanks
Sam

Hi Sam,

You can use a layout element to achieve this :)
https://docs.generatepress.com/article/layout-element-overview/

Hi Ying, thanks I did not realise you could do that. A couple of questions:

1) I see you can do full width but there are no options for padding or margin? This is not desirable.
2) I notice this applies to the layout for both mobile and desktop. As the layout on mobile is full width already and looks just fine, is there a way to apply to the device type?

thanks