[Resolved] Boxed layout on WooCommerce product page

[Shawn]

Hi,

I’ve got a layout for this site where the main container is boxed, has a shadow and overlaps the header. I have that carrying through the site.
So I cloned the home page and set it in WooCommerce to be the product page. As soon as I do that it removes the left and right margins and makes the layout full width.

I originally thought I’d messed up on the saved Elementor saved template I was trying to use so I scrapped that and did the page clone thing and that’s where it removes the gaps.

Do you have any idea why the product page defaults to full width and how to fix it.

The current primary link “Shop” is the product page.

[David]

Hi there,

do you have an elementor theme template set to the product archive?

[Shawn]

Thanks so much. For some reason Elementor didn’t show the archive under templates by default. I had to switch to published.

Once I deleted those and reset the page through WooCommerce all was good.

Thanks for helping me troubleshoot. Working solo it sometimes helps to crowdsource the problem.

[David]

You’re very welcome. Yes just having someone to talk it through helps a lot 🙂

[Shawn]

Hi,
Me again.

I’m so stumped on this. I think it’s got something to do with theme layout but I can’t find it.
If you look at the home page (http://dev.biosil.co.za) it’s set to max width of 1400px with a 20px margin on the left and right. But the shop page at (http://dev.biosil.co.za/shop) goes wall to wall. The containers on both have identical settings. I used the same container on the contact page and also fine. It’s only the archive that’s causing problems.

I really would appreciate it if you could point me at what the problem is. Otherwise I’m likely to run screaming into the wilderness.

[David]

Elementor has this great knack of mixing things up. Simple fix… add this CSS:

.archive.full-width-content .container.grid-container {
    max-width: 1400px;
    padding-left: 20px;
    padding-right: 20px;
}

[Shawn]

Thank you very much.

Yea. I’m finding it’s causing me plenty of headaches recently.

I appreciate the help. I managed to apply it to the single product page by changing .archive to .single-product.

[David]

You’re welcome. Personally i find Woo can be complicated enough without throwing a pagebuilder at it 🙂

[Author]

Posts