[seppegParticipant]

Dear,

I would like to show only square thumbnails for the product images. Everywhere the product can be displayed (category page, product page, …). So all the thumbnail images have the same size.

How can I accomplish this the best? Working already with a child theme.

Have a look at: http://demo.fushia.be/winkel/?orderby=date and to the screenshot.

Best regards, Seppe

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

@media (min-width:767px){
.woocommerce li.product .entry-featured, .woocommerce-page li.product .entry-featured {
    max-height: 374px;
}
.woocommerce div.product .images .x-img-thumbnail, .woocommerce-page div.product .images .x-img-thumbnail {

   width: 64.666%;
    height: 350px;
    overflow: hidden;
}
}

Hope it helps.

[seppegParticipant]

Hi, thanks for the reply. I was more looking to a solution where Woocoommerce uses a hard cropped image –> cropped to square when uploading it as product image.

Would that be possible?

Best regards, Seppe

[Paul RModerator]

Hi Seppe,

Yes, that’s possible.

1. You can add the code below in your child theme’s functions.php file(wp-content/themes/x-child/functions.php)

function remove_product_settings_filter() {
   remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings' );
}

add_filter('init', 'remove_product_settings_filter');

2. Set your desired image sizes – http://screencast.com/t/JjnGEaGo

3. Run Force regenerate plugin.

Hope that helps.

[seppegParticipant]

Hi,

In Woocommerce the display settings are now showing up but they don’t do anything when I upload a new image, it stays the same. He doesn’t hard crop them.

Example “Test product v2” on http://demo.fushia.be/winkel/?orderby=date (should be 800x800px):

<img width="975" height="731" src="http://demo.fushia.be/wp-content/uploads/2015/12/IMG_9737-975x731.jpg" class="attachment-entry size-entry wp-post-image" alt="IMG_9737" srcset="http://demo.fushia.be/wp-content/uploads/2015/12/IMG_9737-400x300.jpg 400w, http://demo.fushia.be/wp-content/uploads/2015/12/IMG_9737-768x576.jpg 768w, http://demo.fushia.be/wp-content/uploads/2015/12/IMG_9737-1024x768.jpg 1024w, http://demo.fushia.be/wp-content/uploads/2015/12/IMG_9737-100x75.jpg 100w, http://demo.fushia.be/wp-content/uploads/2015/12/IMG_9737-975x731.jpg 975w, http://demo.fushia.be/wp-content/uploads/2015/12/IMG_9737-1384x1038.jpg 1384w" sizes="(max-width: 975px) 100vw, 975px">

Best, Seppe

[Nabeel AModerator]

Hi again,

Did you run Force regenerate plugin after adding the code and setting the size? Settings won’t work until you regenerate the images.

Thanks!

[seppegParticipant]

Hi again,

I ran force regenerate plugin but it didn’t change anything. I’ll send you login credentials.

Best regards, Seppe

[seppegParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Seppe,

Upon checking again, I can see that you are using the latest version of woocommerce plugin.

Please note that the version of woocommerce that is compatible with the latest version of xtheme is WooCommerce v2.4.10

https://theme.co/changelog/

Kindly downgrade your woocommerce plugin to v2.4.10 and see if that fixes the issue, you can download that version on the link below.

https://wordpress.org/plugins/woocommerce/developers/

Thanks

[seppegParticipant]

Hi there,

I downgraded to v2.4.1 (ps. on the changelog I see you support up to v2.4.6) but this doens’t make any difference; when uploading it doesn’t load the cropped square image.

When regenerating the thumbnails I can see he creates the sizes which have been setup in Woocommerce… this was also with the latest version op Woocommerce. He’s only not loading that image on the product page.

–> If I see at the functions file for Woocommerce I see:

function x_woocommerce_shop_product_thumbnails() {

  GLOBAL $product;

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

Changing $thumb = ‘entry’; to $thumb = ‘thumbnail’ loads the square thumbnails in but those are not the thumbnails from the woocommerce settings, those are from media library settings (those are smaller). What value this needs to have?

Best regards, Seppe

[seppegParticipant]

Hi there,

When I change $thumb = ‘entry’ to $thumb = ‘shop_single’ it shows a good thumbnail, one of the sizes defined by the x-theme. I only wouldn’t like to change the x-theme files. How can I add this to the child’s theme functions file?

Wouldn’t this be better and then removing next lines out of the child functions file:

// Woocommerce show display settings
function remove_product_settings_filter() {
   remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings' );
}

add_filter('init', 'remove_product_settings_filter');

Looking forward to your feedback.

Best, Seppe

[JackKeymaster]

Hi there Seppe,

Thanks for writing back, so we don’t have to modify the parent theme directly, in your child theme, add the function to remove the filters X adds for the WooCommerce entry thumbs, then write a custom function to define your own sizes and enqueue that in the child theme.

I believe the solution supplied here https://community.theme.co/forums/topic/not-possible-to-override-x_woocommerce_shop_product_thumbnails-in-child-theme/#post-376092 should work in your use case, though let us know if it doesn’t and we’d be happy to help. 🙂

Thank you!

[seppegParticipant]

Thanks a lot for the great support, it’s working now 😉

Added this code to the functions.php file from the child theme:

// Woocommerce modifications
// =============================================================================
function remove_product_settings_filter() {
   remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings' );
}

add_filter('init', 'remove_product_settings_filter');

//
// Shop product thumbnails.
//

function remove_x_woocommerce_shop_product_thumbnails_action() {
  remove_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );
}

add_action('init','remove_x_woocommerce_shop_product_thumbnails_action');

function custom_woocommerce_shop_product_thumbnails() {

  GLOBAL $product;

  $id     = get_the_ID();
  $thumb  = 'shop_single';
  $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>";

}

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_woocommerce_shop_product_thumbnails', 10 );

//
// Large thumbnail size.
//

function remove_x_woocommerce_single_product_large_thumbnail_size() {
   remove_filter( 'single_product_large_thumbnail_size', 'x_woocommerce_single_product_large_thumbnail_size' );
}

add_filter('init', 'remove_x_woocommerce_single_product_large_thumbnail_size');

function custom_woocommerce_single_product_large_thumbnail_size() {
  return 'shop_single';
}

add_filter( 'single_product_large_thumbnail_size', 'custom_woocommerce_single_product_large_thumbnail_size' );

Best regards, Seppe

[Paul RModerator]

You’re welcome and Thanks for sharing the code. 🙂

[Author]

Posts