[DarshanaModerator]

@theoutdoorarmory … You’re welcome 🙂

[DagaloniParticipant]

I found this CSS only solution to create an even product grid and make every image the same size. Hopefully you guys find it usefull.

/*product grid*/
.entry-product .entry-featured {
	height: 230px; /*you change this to your own size*/
  width: 180px; /*you change this to your own size*/
  display: inline-block;
  position: relative;
}

.entry-product .entry-featured img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

[JoaoModerator]

Hi There,

Thanks for sharing it with us.

It indeed might be useful.

If you need help with anything, let us know.

Joao

[RadModerator]

@bill, your site is currently down this time. I’ll check again later. But usually, duplicate elements like image is caused by not properly place elements by customization.

@Lian, It will not change since you’re only changing the registered size. What you need to change is the code that pickups the image according to supplied size.

Please check this file \wp-content\themes\x\framework\functions\global\plugins\woocommerce.php

This code pickups Entry size image

function x_woocommerce_shop_product_thumbnails() {

  GLOBAL $product;

  $id     = get_the_ID();
  $thumb  = 'entry';
  $rating = $product->get_rating_html();

  woocommerce_show_product_sale_flash();
  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '">';
      echo get_the_post_thumbnail( $id, $thumb );
      if ( ! empty( $rating ) ) {
        echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
      }
    echo '</a>';
  echo "</div>";

}

if you wish to display your thumbnails, then change this line

$thumb = 'entry

to this,

$thumb = 'shop_catalog;

or

$thumb = 'shop_single;

You may also change image size on these filters,

//
// Large thumbnail size.
//

function x_woocommerce_single_product_large_thumbnail_size() {
  return 'entry';
}

add_filter( 'single_product_large_thumbnail_size', 'x_woocommerce_single_product_large_thumbnail_size' );

//
// Small thumbnail size.
//

function x_woocommerce_single_product_small_thumbnail_size() {
  return 'shop_single';
}

add_filter( 'single_product_small_thumbnail_size', 'x_woocommerce_single_product_small_thumbnail_size' );

More importantly, the variation image size

function x_woocommerce_modify_variable_image_size( $child_id, $instance, $variation ) {
	$attachment_id = get_post_thumbnail_id( $variation->get_variation_id() );
	$attachment = wp_get_attachment_image_src( $attachment_id, 'entry' );
	$image_src = $attachment ? current( $attachment) : '';
	$child_id['image_src'] = $image_src;

	return $child_id;
}

add_filter( 'woocommerce_available_variation', 'x_woocommerce_modify_variable_image_size', 10, 3);

Hope this helps.

[Thai4moreParticipant]

Dear X, I only have a small problem with the images of mu store categorie pics, they are a little blurry, not such a big deal if there is no easy solution. Do you have a easy way to fix them? see attachment, thanks in advantage, best regards Corrie

[LelyModerator]

Hello Corrie,

Thank you for the screenshot. To help you better, please do share us your product page URL so we can check further.

[Thai4moreParticipant]

Dear Lely, this is the url, if you need someting else let me no, thanks for your help.
https://www.4morefightshorts.com/4more-store/
Best Rgeards, Cor

[RupokMember]

Hi there,

It seems smaller version of thumbnail is being used there – https://www.4morefightshorts.com/wp-content/uploads/2016/08/mma-cap-display-250×275.jpg

Here goes your answer and solution for this – https://community.theme.co/forums/topic/product-images-woocommerce/#post-224057

Cheers!

[Thai4moreParticipant]

Dear, The size of the pic is 526 x 587 see attachment, what i understand from the link you gave me is that the size must be $catalog = array(
‘width’ => ‘258’,
‘height’ => ‘275’,
‘crop’ => 1
);
am i right?
Thanks in advantage, best regards Cor

[Paul RModerator]

Hi,

That is the default size for the product images.

May I know what is the size of the original image you have uploaded?

You need to upload a larger image, at least 500px in width.

or we can make the images appear smaller by adding this in Custom > Edit Global CSS in the customizer

.archive.post-type-archive.woocommerce .cols-3 li.product {
    width: 15%;
    display: inline-block;
    float: none;
}

Hope that helps

[Thai4moreParticipant]

Dear, The size is 526-x-587 you can see the image as uploaded in the attachment above.
best regards Corrie

[Rue NelModerator]

Hello There,

Thanks for the updates. To better control the product images, please setup a child theme to fix the issue in your site. You can have the detailed instructions here: https://community.theme.co/forums/topic/product-images-woocommerce/#post-224057

Hope this helps. Please let us know how it goes.

[AlanParticipant]

Hi,
I also need some help with this.
I integrated the code to see the woocommerce thumbnail options, because the single product picture appears quite blurry, although it is uploaded with 800 x 1000 px. So now i am looking into replacing the x theme generated thumbs with the ones set in woocommerce but the code on page 1 to replace the images is only for the shop catalog not the single product picture.
Could you kindly assist me with this matter?
thanks!

[AlanParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Please note that after adding the code you need to regenrate your thumbnails.

Kindly install and run this plugin

https://wordpress.org/plugins/force-regenerate-thumbnails

Hope that helps.

[Author]

Posts