11

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

enter image description here

Woocommerce Cropped Image such as:

enter image description here

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

Bhavik Hirani
  • 1,996
  • 4
  • 28
  • 46

3 Answers3

16

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/

BenBely
  • 161
  • 1
  • 3
8

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

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • thanks, but how can do this without add plugin because in my site already more plugin and if i will add new plugin so may be site performance will be low or slow. – Bhavik Hirani Aug 08 '16 at 04:10
  • ya thanks, but my problem is not solve because i don't want to add new more plugin in site ,my site already slow with different plugin ,so any idea to other option for solve this. so tell me about that . i can change my core file also , you just tell me about other option thanks . – Bhavik Hirani Aug 09 '16 at 05:37
  • 2
    @BhavikHirani The only way to regenerate thumbnails is a plugin (that is recommended by wordpress and woocommerce). I have like 25 e-commerce websites running for clients all with this plugin enabled. **And there is NOT any SLOW DOWN**. It just take some server resources when regenerating all thumbs at once (but you can regenerate only necessary thumbs one by one). It's a back-end plugin so no slow down. When you will finish regenerating, you can disable/delete it if you want to. – LoicTheAztec Aug 09 '16 at 05:44
  • @BhavikHirani If your web site is slow, that could come from many different reasons (not only plugins). It can be the theme itself, the number of products in your shop (Big database), the hosting server, your wordpress config memory, php customizations, bad cache/compression config. Also some bad plugins or some plugins for SEO (YOAST), multilingual plugins (WPML), some security plugins. – LoicTheAztec Aug 09 '16 at 05:51
  • @BhavikHirani **THE ONLY ALTERNATIVE: Instead regenerating with a plugin**, you can **replace/re-upload** only the product images that are affected **by this cropping**. – LoicTheAztec Aug 09 '16 at 06:09
  • i think you are right . ok i will try this plugin and try to remove some useless plugin from site,thanks you so much – Bhavik Hirani Aug 09 '16 at 06:09
  • This option has moved from where this answer directs you. Please see answer by @BenBely – Jamie Marshall Dec 18 '20 at 22:45
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/

OHY
  • 890
  • 1
  • 8
  • 14