[Resolved] 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.

[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?

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

[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 🙂

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

[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!

[Sam]

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

[Ying]

Hi Sam,

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

[Sam]

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

[Author]

Posts