[Resolved] Dohh WooCommerce Images sizes

[Adrian Cojocariu]

Damn … I’m trying to merge a site to WP, and moving all the products is hard.

I made a CSV and I’m using wp all import, that fixed the 1 by one problem …

But now I noticed that all the old images are rectangles, not squares.

This is the original site

This guy did something … PHP jQuery I don’t really know, these rectangular images, either horizontal or vertical seem to fit into the same height and width witn no margins or padding. Even square images fit well.

I can’t get the same effect here.

Woocommerce just either crops them really ugly, or places them rectangles, with different heights or maybe widths ?

There are over 500 images, it won’t take an eternity to make them all rectangles …

Is there anything I can do ?

[Tom]

It looks like the original site simply gave all of the images a set height, and then let the widths figure themselves out.

In WooCommerce you should be able to disable cropping, or enable proportional cropping.

Then set your height:

.woocommerce ul.products li.product a img {
      height: 140px;
}

Let me know if that nudges you in the right direction or not 🙂

[Adrian Cojocariu]

Yeah I already tried something similar, with the same effect.

No cropping with width or height set, but it distorts the images, because they are rectangles.

Like this.

This is the single product post.

You see it fits the non cropped or altered image into a square, it kinda creates some white margins on top and bottom.

Note that if the image is higher height and lower width, it will create margins right and left, without distorting the image at all.

If you inspect that single product page image, it will show you the td.bg_cadru_poza , you can see the margins but they are not set anywhere in the CSS …

[Adrian Cojocariu]

Ok I kinda figured it out …

It needs an encapsulating div, which the archive images doesn’t have, I’ll have to change that in the woocommerce template, but the single image post now looks like this :

http://methodseeker.com/prosound/produs/chitara-clasica-34-mini-fender-esc-80/

I used this code :

.woocommerce div.images {
  height: 300px;
  width: 300px;
  background-color:#ffffff;
  box-shadow: 0 0 5px 5px #000000;
}

Can you help me vertical align it, and add about 5 to 10 px padding or margin around the image ?

Anything I try, it seems not to work well.

[Adrian Cojocariu]

Ok so I fixed the single product image by doing no hard crop in woo settings, and this :

.woocommerce div.images {
  height:300px;
  max-width:500px;
  background-color:#ffffff;
  box-shadow: 0 0 5px 5px #000000;
  display: flex; /* add */
  justify-content: center; /* add to align horizontal */
  align-items: center; /* add to align vertical */
}

Now I just need to add a wrapper to the archive images in the woo templates… I’ll see how that goes 😀

[Adrian Cojocariu]

Ok I sorted it out 😀 ^_^

I’ll add the code maybe someone else needs it.

Add this to your theme’s functions.php ( child theme is helpful )

/**
 * Add Image Wrapper
 */

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail();
    } 
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {   
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) {
        global $post, $woocommerce;
        $output = '<div class="imagewrapper">';

        if ( has_post_thumbnail() ) {               
            $output .= get_the_post_thumbnail( $post->ID, $size );              
        }                       
        $output .= '</div>';
        return $output;
    }
}

Then Simple Custom CSS plugin :

.woocommerce div.imagewrapper {
    height:150px;
    width:150px;
  padding:5px;
  background-color:#ffffff;
  box-shadow: 0 0 5px 5px #000000;
  display: flex; /* add */
  justify-content: center; /* add to align horizontal */
  align-items: center; /* add to align vertical */
}

Modify the width and height and padding to whatever you like, background color, box shadow is optional.

NOTE: This won’t work for category and subcategory images, you will need to search for the PHP online, something like “add wrapper to woocommerce images category, subcategory”. But you can just make square images for categories.

[Tom]

Nice! Thanks for sharing the code! Will definitely be useful 🙂

[Author]

Posts