Wrap WooCommerce "Related Products" in boxed wrapper

[xbsmarketing]

Is there any way I can wrap the “Related Products” shown at the bottom of my single product pages in a boxed wrapper? Right now they are being displayed in a 100% full width section.

Thanks!

[friech]

Hi @comdoc-marketing,

Thank you for writing in, you can wrap that area with template customization, but we can also apply a width and max-width to it same as a container. Please add this to Theme Options > CSS

.single-product .related.products.cols-4 .products,
.single-product .related.products.cols-4 h2 {
	max-width: 1200px;
    width: 88%;
    margin: 0 auto;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[xbsmarketing]

Thanks, @friech!

If I wanted to customize the template, what class(es) would I use?

[ruenel]

Hello ComDoc,

If you want to target Related products section, you may use this:

.single-product .related.products{
	max-width: 1200px;
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5em;
    float: none;
}

If I wanted to customize the template, what class(es) would I use?

–Which part of the template or layout you want to change?

Regards.

[xbsmarketing]

@RueNel

.single-product .related.products{
max-width: 1200px;
width: 88%;
margin-left: auto;
margin-right: auto;
padding-top: 5em;
float: none;
}

@RueNel. that snippet appears to work just fine. Wasn’t sure if it was more effective to do that or edit the WooCommerce template.

I’ll stick with the CSS customizations.

Thanks!

[ruenel]

You’re most welcome!
We’re glad we were able to help you out.