Disable original image crop in WooCommerce

Question

Then there is a portrait image of all the products, and according to the design of my themes I have to show all the images in a square box.So all the images are cropped and displayed.

How to disable original image crop in woocommerce?

Because I have a problem with cropping WooCommerce process:

Original portrait image

Woocommerce Cropped Image such as:

So how can I fix this problem, like the original image, stop cropping for thumbnails resized by WooCommerce?

Answer 1

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

// set thumbnails size in shop page
add_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/

Answer 2

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/

Answer 3

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

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

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...