Disable original image crop in WooCommerce Disable original image crop in WooCommerce wordpress wordpress

Disable original image crop in WooCommerce


Since WooCommerce menu changed with last versions, this "Display" menu doesn't exist anymore.

Now you can find it in:

-> Customize (situated in the top bar of Wordpress when you are on front)

-> WooCommerce

-> Product images

-> Select "Uncropped" option, Then hit "Publish" to save.

Don't forget to Regenerate thumbnails like mentionned in the previous post with this plugin : https://wordpress.org/plugins/regenerate-thumbnails/


Go to woocommerce > settings > products (tab) > Display (sub-tab)

Path to products display

Then at the bottom of the page, in "Product Images, disable Hard Crop options and save changes:

products images settings

Then you will need to regenerate your products images with Regenerate Thumbnails plugin:

  • Install and activate Regenerate Thumbnails plugin.
  • Going In Tools menu you will find a "Regenerate thumbnails" item page.
  • Press Regenerate all thumbnails (this will regenerate all thumbnails images of your WordPress web site.
  • In the WordPress Media Library (in list view), you can regenerate thumbnails one by one.

WITH PHP ALTERNATIVE:

Sometimes in some themes, this is settings are hard coded. So you can change them with this code snippet, pasting it in the function.php file of your active child theme or theme:

function yourtheme_woocommerce_image_dimensions() {    global $pagenow;    if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {        return;    }    $catalog = array(        'width'     => '300',   // px        'height'    => '300',   // px        'crop'      => 0 // Disabling Hard crop option.    );    $single = array(        'width'     => '150',   // px        'height'    => '150',   // px        'crop'      => 0 // Disabling Hard crop option.    );    $thumbnail = array(        'width'     => '90',   // px        'height'    => '90',   // px        'crop'      => 0 // Disabling Hard crop option.    );    // 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 );

You can comment/uncomment the code (or remove some portions) to feet your needs. This code will overwrite define options in WooCommerce settings > Products > Display (Product Images).

ACTIVATION: You will need to switch your active theme to another and then switch back to activate it.

You also might need to regenerate product images with Regenerate Thumbnails plugin...


If you want to set it by code, add this snippet to the functions.php file:

// set thumbnails size in shop pageadd_filter( 'woocommerce_get_image_size_thumbnail', 'ci_theme_override_woocommerce_image_size_thumbnail' );function ci_theme_override_woocommerce_image_size_thumbnail( $size ) {    // Catalog images: specific size    return array(        'width'  => 150,        'height' => 150,        'crop'   => 0, // not cropped    );}

As Silver Moon mentioned, in case you use this option, it will force you to make share that all the images are of equal size. I found a workaround to deal with this issue: I'm using Woo Align Buttons plugin to align the 'add to cart' button and added these CSS properties to the images in the shop page:

height: 150px;vertical-align: middle;display: flex;

If you want to use it on another page (not on the shop page), follow this guide: https://docs.woocommerce.com/document/image-sizes-theme-developers/