WooCommerce Border Between Product Description and Releated Products Box

Hi Mike,

simplest way would be to remove the Related Products from Customiser > Layout > Woocommerce > Single Product.

And then add this PHP to the before footer hook in GP Hooks:

<?php if ( is_woocommerce() && is_product() ) { ?>
	<div class="site-footer relate-products-hook">
		<?php echo do_shortcode('[related_products]'); ?>
	</div>
<?php }?>

Check Execute PHP and save.

The shortcode is wrapped with the site-footer class so will inherit the top border and side padding. The relate-products-hook is just a custom class in case you want to target the container serparately.

Hello David,

That kind of worked. I now have the problem that the table does not display correctly anymore and it is still getting the top line despite me removing the code, I suspect this is beacuse it is inheriting the footer CSS.

Any ideas how to solve this?

Thanks,
Mike

Hi Mike, thats really odd - the before_footer hook shouldn't be inside the footer..... try moving the code to the after content hook. If still no joy then remove the site-footer class and apply the same styles to the relate-products-hook

Hello,

I found half the problem! I had put the code into the before footer content hook and not the before footer hook.

However it still seems to be having issues, it is still only displaying three columns on one row and then pushing the forth below it!

Very odd!

Any ideas?

Thanks,
Mike

Try adding this CSS:

.woocommerce .relate-products-hook .related ul.products li.product {
	width: 21.2%;
}

Hello,

That CSS worked a treat! I encased it in a media query so that on mobile it still displayed stacked.

@media (min-width: 767px) {

.woocommerce .relate-products-hook .related ul.products li.product {
	width: 21.2%;
}
	
}

Help much appreciated!

Thanks,
Mike

You're welcome Mike, wasn't too painful after all ;) Glad to be of assistance