1

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

  • The real issue lies with the WooCommerce CSS. I believe they have all their images width: 100%; height: auto; which some themes don't take into account. I suggest overwriting that css with max-width: 100%; width: auto; instead. – Howdy_McGee May 5 '15 at 16:43
  • Yes, i can confirm. Max-width:100%; reduces the related product image container to the size of the catalogue image container. But it also changes the lay-out. My goal or rather my idea is to customize the image size. – timholz May 5 '15 at 16:49
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:

| improve this answer | |
  • Thank you. I've tried all that. But apparently the only solution is to compromise. That means one size for related and catalogue images. I was just wondering, if there was an easy way to add a fourth image dimension. regards theo – timholz May 5 '15 at 17:04
  • @theo - Unfortunately, not that I'm aware of. Theoretically, you could override the WooCommerce Template with your own, create your own WP_Query and generate the same loop but call your custom image that way. There could be another way I've never tried but I'll edit my question with it and maybe you could have some luck. – Howdy_McGee May 5 '15 at 17:19
  • Thanks a lot for that. I'll try it and will let you know. – timholz May 5 '15 at 18:28
  • Ok, i tried and failed. I guess i'll have to settle with this limitation. But thanks for all the hints. – timholz May 6 '15 at 18:06
  • @timholz I don't have an active woocommerce install to play around with this. Whenever I get a chance I'll give it a try and see what I come up with. If I find something out I'll tag you and let you know or if you find a better solution post it here! Good luck! – Howdy_McGee May 6 '15 at 18:07
1

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;
}
| improve this answer | |
  • Thanks for the code, but overwriting the css does not apply the correct image sizes. It sets the container size. – timholz May 5 '15 at 16:58
  • I have appended img to the CSS rules, can you try now? – m4n0 May 5 '15 at 17:00
  • Thanks for the update. But no, now the proportions are no longer square and the css is only affecting the container. What i tried to achieve is to plug in the appropriate image size. But this is, as i now learn rather difficult to achieve. – timholz May 5 '15 at 17:11
0

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.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.