How to move "Related Products" section down

[samantha]

Hi, I'm using the Metro theme with WooCommerce. On the product pages, the Related Products section placement doesn't look right. How can I move it down underneath the product info?

Thanks 🙂

http://emmausdt.com.au/product/1-hour-lesson/

[HelenaB]

Hi Samantha

I'd do:

div.upsells {clear:both;}

That'll push the related products/upsells down past the product info stuff.

I also tend to make the related product list items smaller as they're currently set to 48%.

[samantha]

Thanks, Helena.

Umm, where should I paste that?!

Thanks for the tip about the related product items too; I'd done that for another site and forgotten how to do it again... oops 🙁

Samantha

[HelenaB]

Hi Samantha - sorry had to go out!

I'm not keen on adding stuff to the woocommerce stylesheets - it's all updated too often so I tend to add it to the Genesis child theme stylesheet (Metro in this case) instead. I just create a woocommerce section in there and paste changes in.

Probably the "proper" thing to do is to create a "child" stylesheet for woocommerce but life's just too short!

You seem to have sorted the widths of the related products list items.

[samantha]

Thanks again, Helena. That worked perfectly.

I had forgotten that it doesn't matter what order these things are pasted in (rookie!). I have put it in my Genesis theme style.css.

Thank you!

P.S. This is the code that I pasted into style.css to reduce the size of the Related Product images, just for reference in case someone else is looking for it:

.woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product {
width: 24% !important;
}

[Author]

Posts