WooCommerce: change related products image size

Many of you asked me how to change the size of the related products displayed on the product page in WooCommerce. Most of the time, adding a little CSS snippet does the trick, but in some cases you would need to use a PHP snippet to be sure that your dimensions are taken into account. For some reason adding CSS to style.css isn’t always enough, so in that case using a few lines of PHP to add CSS code within the page source code directly is necessary. To do so, we’ll need to use the wp\footer hook.

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

<?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;
}

And that’s it!