Custom Woocommerce image size [closed]

Question

Woocommerce has three built in image sizes. But since there are more than three different container sizes, some images always get stretched or squeezed. Hence image quality and page speed suffer. Woocommerce uses for example the catalogue size for catalogue images and related product images. Wordpress offers an easy method to generate custom image sizes. And i've tried to generate a size for my related products:

add_action( 'after_setup_theme', 'jmt_theme_setup' );
function jmt_theme_setup() {
add_image_size( 'related-thumb', 274, 274, true );
}

Is there a way to plug this size into woocommerce related product images?

Thanks for your interest.

regards theo

Answer 1

There's a few options you can choose from whenever changing image sizes. Switching out the actual default WooCommerce images is more difficult than a normal WordPress install as they are ingrained with the plugin.

---

Modify Related Product Image Sizes:

I've tested this and it seems to work only on related products ( though I'm sure it could be expanded to other areas ). You may still need to take advantage of Regenerate Thumbnails to get the correct sizes.

We need to put everything into a wp filter:

function woo_init() {
    // Below functions go here...
}
add_action( 'wp', 'woo_init' );

I was able to skip the first portion of this, setting the query var and still have it work but since it uses a generic content-product.php template I wouldn't trust it, so we will set a query var ensuring we are only change the image size for related products:

if( is_singular( 'product' ) ) {
    add_filter( 'woocommerce_related_products_args', function( $query_args ) {
        if( ! empty( $query_args ) ) {
            set_query_var( 'related_products', true );
        }

        return $query_args;
    } );
}

Next we need to remove the default loop_product_thumbnail and replace it with our custom one. We test to ensure realted_products queryvar is set and TRUE before we serve our new image, otherwise serve the default image.

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title',
    function() {
        $related = get_query_var( 'related_products' );
        if( TRUE == $related ) {
            echo woocommerce_get_product_thumbnail( 'related-thumb', 274, 274 );    // Our new image size
        } else {
            echo woocommerce_get_product_thumbnail();   // Default Image Size
        }
    },
    10
);

---

CSS

WooCommerce uses width: 100%; height: auto; on all their images. You could change this to max-width: 100%; width: auto; height: auto; and play around with the margins / number of columns to get the desired look.

Change the initial image sizes

You can change the actual image sizes WooCommerce uses by following the steps below:

• Log into WordPress
• Navigate to WooCommerce -> Products Tab -> Display ( Sub-tab )
• Toward the bottom you can set the image sizes for:
  • Catalog Images
  • Single Product Image
  • Product Thumbnails
• Finally, you can install Regenerate Thumbnails to get the changed sizes.

---

Another method is to have these sizes on install:

function yourtheme_woocommerce_image_dimensions() {
    global $pagenow;

    if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {
        return;
    }

    $catalog = array(
        'width'     => '400',   // px
        'height'    => '400',   // px
        'crop'      => 1        // true
    );

    $single = array(
        'width'     => '600',   // px
        'height'    => '600',   // px
        'crop'      => 1        // true
    );

    $thumbnail = array(
        'width'     => '120',   // px
        'height'    => '120',   // px
        'crop'      => 0        // false
    );

    // Image sizes
    update_option( 'shop_catalog_image_size', $catalog );       // Product category thumbs
    update_option( 'shop_single_image_size', $single );         // Single product image
    update_option( 'shop_thumbnail_image_size', $thumbnail );   // Image gallery thumbs
}

add_action( 'after_switch_theme', 'yourtheme_woocommerce_image_dimensions', 1 );

WooCommerce Reference Links:

• Using appropriate image dimensions to avoid distortion / pixellation
• Set WooCommerce image dimensions upon theme activation
• woocommerce_get_product_thumbnail Function

Answer 2

You can overwrite the CSS of WooCommerce through this snippet, Remi Corson:

<?php
add_filter( 'wp_head' , 'related_products_style' );

function related_products_style() {
   if( is_product() ) :
   ?>
   <style>
   .woocommerce .related ul.products li.product img, .woocommerce .related ul li.product img, .woocommerce .upsells.products ul.products li.product img, .woocommerce .upsells.products ul li.product img, .woocommerce-page .related ul.products li.product img, .woocommerce-page .related ul li.product img, .woocommerce-page .upsells.products ul.products li.product img, .woocommerce-page .upsells.products ul li.product img
   {
      width: 274px !important;
      height: 274px !important;
   }
   </style>
<?php
endif;
}

Answer 3

I think it's a CSS problem because WooCommerce (annoyingly) uses width: 100% when it (in my opinion) should be max-width: 100%. Try to overwrite the width using width: auto, that should help.