WooCommerce Shop Page not displaying in full-width

[Perseverence]

Hello All,

I’m new to wp and have got bit stuck with getting the woocommerce shop page to display in full with. The single product pages are working fine. Could you please help.

I’m also using Beaver Builder version 1.9.4 and Toolset.

The gape currently looks like this: http://www.rootscrafts.com/shop/

I would like it to look more like this in terms of the width:
http://www.rootscrafts.com/product/fulani-ring/

I’ve tried to look things up on forums etc but pretty confusing for a non-developer

Thanks

[Leo]

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.

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

[Perseverence]

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

[Leo]

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

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

[Perseverence]

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

[Tom]

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).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Perseverence]

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

[Tom]

Glad we could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[v4ncouver]

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/

[Leo]

Hi there,

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

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

[v4ncouver]

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

[Leo]

No problem!

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

[Author]

Posts