How to change WooCommerce thumbnail crop position?

Question

I'm trying to change WooCommerce thumbnail crop position. I found this code can help to change the size:

add_action( 'init', 'yourtheme_woocommerce_image_dimensions', 1 );

/**
 * Define image sizes
 */
function yourtheme_woocommerce_image_dimensions() {
    $catalog = array(
        'width'     => '100',   // px
        'height'    => '100',   // px
        'crop'      => 0
    );

    // Image sizes
    update_option( 'shop_catalog_image_size', $catalog );       // Product category thumbs
}

I did some try like change crop 0 to array("center", "bottom") but it's not working:

function yourtheme_woocommerce_image_dimensions() {
    $catalog = array(
    'width'   => '300', // px
    'height'  => '400', // px
    'crop'    => 'array("center", "bottom")'
  );

  // Image sizes
  update_option( 'shop_catalog_image_size', $catalog );     // Product category thumbs
}

And also this without success:

if (function_exists( 'add_image_size' )){
  add_image_size( 'shop_catalog', 300, 400, array( 'center', 'bottom' ) );
}

Is there anyway I can change it?

Thanks.

Answer 1

To change existing images sizes (crop option) within your active child theme or theme, you need to use 'after_switch_theme' WordPress hook.

Since WordPress 3.9+ an awesome new feature among many, is the added ability to now control crop position of images uploaded in WordPress.
I don't know if crop potion advanced option is available to woocommerce images sizes, you will have to test it.

The available options for crop position are:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

So based on this snippet from wooThemes and and (this relative new) crop options of WordPress, you can try this:

function yourtheme_woocommerce_image_dimensions() {
    global $pagenow;

    if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {
        return;
    }
    $catalog = array(
        'width'     => '300',   // px
        'height'    => '400',   // px
        'crop'      => array( 'center', 'bottom' ) // New crop options to try.
    );
    /* $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 );

You will need to paste this code snippet in function.php file of your active child theme or theme…

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.

References:

• Set WooCommerce image dimensions upon theme activation