Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Solve blur effect on WooCommerce loop product images, without duplication issue

I’m using the latest versions of WordPress and WooCommerce with the latest Flatsome theme. I found an interesting snippet that solves the blur effect issue on product images. However, the code requires some tweaks:

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
    global $product;
    $size = 'woocommerce_thumbnail';
    $image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );
    echo $product ? $product->get_image( 'full' ) : '';
}

When this code is enabled, the first row displays images in high quality as expected, but there is an additional row of product images that appears at the bottom, which I would like to remove.

Screen shot issue

Could anyone help me amend the code to remove the extra row of images from the front end?

Tags:

2

Answers


  1. 0

    You should try to use instead single_product_archive_thumbnail_size available filter hook that controls the image size used in the product grid/catalog, replacing your current code with:

    add_filter( 'single_product_archive_thumbnail_size', function( $size ) {
    return 'full';
}, 1000);

    It should better work.

    Login or Signup to reply.
  2. 0

    May be the theme has added extra hooks or may be some conflict. But you can try like below just guess. May be it could help.

    <?php
add_action( 'after_setup_theme', 'custom_image_sizes' );
function custom_image_sizes() {
    add_image_size( 'custom_size', 600, 600, true ); 
}

add_filter( 'single_product_archive_thumbnail_size', function( $size ) {
    return 'custom_size';
}, 1000);

    For more information on customizing image sizes in WooCommerce, please refer to the official documentation here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search