0

I'm converting a site across to wordpress that is heavy on imagery. With the fact the products are art based the original sizes have little to no continuity. Now on the product page itself this isn't an issue but in woocommerce the catalog mode is thumbnail sizing is all over the place so alignment looks horrible. Complicating the matter is one of the categories products are more shaped like a door being rather tall by comparison so setting a standard one size for all doesn't work.

Were it is just the thumbs in catalog mode I need to clean up what is the best way to address that with existing images. It is easy to standardize moving forward to address this when taking photos but need a solution to port without manually doing it for hundreds of products.

1 Answer 1

0

Set the product thumbnail size and enforce whichever form of cropping gives you the consistency you're looking for. This will let you set whatever width you prefer:

<?php
function wpse_307110_override_thumbnail_sizes() {
    $theme_support = get_theme_support( 'woocommerce' );
    $theme_support = is_array( $theme_support ) ? $theme_support[0] : array();
    // change 150 to whatever width you need
    $theme_support['thumbnail_image_width'] = 150;
    remove_theme_support( 'woocommerce' );
    add_theme_support( 'woocommerce', $theme_support );
}
add_action( 'after_setup_theme', 'wpse_307110_override_thumbnail_sizes', 10 );
?>

Next, to affect cropping:

Crop square: update_option( 'woocommerce_thumbnail_cropping', '1:1' );

Don't crop at all: update_option( 'woocommerce_thumbnail_cropping', 'uncropped' );

Or crop to custom ratio:

// set width and height as needed: this creates a 4:3 ratio
// so if width is 150px, height will be 113px (112.5 rounded up)
update_option( 'woocommerce_thumbnail_cropping', 'custom' );
update_option( 'woocommerce_thumbnail_cropping_custom_width', '4' );
update_option( 'woocommerce_thumbnail_cropping_custom_height', '3' );

Then, use a plugin that regenerates all thumbnails - this will regenerate every image size for all the existing images.

7
  • My problem is I don't want cropping. The way the images were taken in the first place cropping cuts far to much of it out I don't have any space around the products I can edit out. Plus depending on the product category I'm in 2 separate aspect ratios. One is a 4x3 but the other is a 9x16, as I said more door shaped. Really what I need is 2 separate heights for thumbs specific to the catagory being resized so it has continuity and isn't messing up other elements.
    – rnb
    Commented Jun 27, 2018 at 15:19
  • You can use the "uncropped" version. If you really want to enforce different aspect ratios, you would need to add additional WP-recognized image sizes. So you'd have your regular thumbnail size, and then add say a product_thumbnail_9x16 size - then adjust the template that controls just that product category so it pulls the alternate image size. The problem is those thumbs probably appear in more than just that category, so you'd have to build considerable conditional logic if say you want the correct thumbs to appear in the cart.
    – WebElaine
    Commented Jun 27, 2018 at 15:48
  • Yeah I'm not sure who took the images for this but they should be tarred and feather as they are all sized for a 400px width but varying heights. The old site is one 1 column so that width never was an issue but converting it over to a wordpress site / woocommerce store those varying heights are becoming an isue
    – rnb
    Commented Jun 27, 2018 at 21:22
  • damn edits. I just need a way to say thumbnails for category 'x' are one dimension and category 'y' are another so i can deal with the varied heights. Like one group is 400x700 to 800 and the other is 400x 275 to 350. They are at least in seperate categories though in woocommerce
    – rnb
    Commented Jun 27, 2018 at 21:35
  • As far as making it future-proof you would probably be safest batch editing all the images in Photoshop. Make them all the same size by adding empty space, so all are centered in a 400 x 800 pixel image, and give them either white or transparent backgrounds, whichever is your preference. At least that way no matter where you are on the site, Woo will have every product centered in its box. Once that's done you may have more leverage to recommend a new photoshoot.
    – WebElaine
    Commented Jun 27, 2018 at 21:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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