[Resolved] Hooks to alter image size

[David]

I have recently migrated from an old opencart webpage (boat.net.nz), to a woocommerce site (demo.boat.net.nz).

Unfortunately, all of the images on the old opencart site were different dimensions, and display poorly because of this.

What I am trying to do is create a hook which sizes the product catalogue image to fit inside a 200 x 200 px box, and then add in white space to make it fill the 200 x 200 box.

For example, a 500 x 250 image would scale down to 200 x 100, with 200 x 50 padding on each side.

Any ideas would be appreciated – I have been stuck on this all week and really don’t want to change 2000 + product images individually.

[David]

Even though this is a reply to my own question – I have FINALLY figured this out after a huge search.

Maybe it will be useful to someone else:
Firstly I used Pluginception to create a plugin and filled it with the php:

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail();
    } 
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {   
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) {
        global $post, $woocommerce;
        $output = '<div class="imagewrapper">';

        if ( has_post_thumbnail() ) {               
            $output .= get_the_post_thumbnail( $post->ID, $size );              
        }                       
        $output .= '</div>';
        return $output;
    }
}

After this, I added to the CSS:

.woocommerce div.imagewrapper {
	height: 100px;
	width: 100PX;
	padding: 2px;
	background-color: #ffffff;
	display: flex;
/* add */
	justify-content: center;
/* add to align horizontal */
	align-items: center;
/* add to align vertical */
}

This has done a suprisingly good job – considering the overwhelming response to this sort of question elsewhere on the web is “Upload images of the same size.”

Credit to Adrian Cojocariu for the code.

[Tom]

Great work and thanks for posting the code (and thanks to Adrian!) 🙂

[Author]

Posts