Custom Woocommerce image size [closed]

Question

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:

Related Posts:

Leave a Comment Cancel reply