Many people have asked me how to change the size of the display on WooCommerce product pages related products. In most cases, adding a little snippet of CSS trick, but in some cases you need to use a PHP snippet to make sure your dimensions to consider. For some reason, add CSS to the style.css is not enough, so use a few lines of PHP in this case, the page’s source code to add CSS code directly is necessary. To do this, we need to use wp_footer hook.

All you need to do is paste in your theme folder functions.php file the following code:

<?php add_filter( 'wp_head' , 'related_products_style' ); function related_products_style() { if( is_product() ) : ?>

<style>
	.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;
	}
	</style>

	<?php
	endif;