[Resolved] Hooks to alter image size

Home Forums Support [Resolved] Hooks to alter image size

Home Forums Support Hooks to alter image size

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #155182

    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.


    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.

    Lead Developer
    Lead Developer

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.