CODEWITHSUNDEEP
phpwordpresswoocommerceproductthumbnails
MaxCro
MaxCro

Reputation: 23

Different Woocommerce product thumbnail size for specific pages

I want to have different thumbnail sizes for different pages on my site. For example, I want to have thumbnails in product grid 150x150px on my homepage, but I want to have larger product thumbnails on my other pages which display the product grid.

I can enlarge images with CSS, but thumbnails are still 150x150px, and when I set them to be i.e. 600x600px through CSS, they become blurry.

I tried to put some things in functions.php, but without any success, so I’d be very grateful if someone knows how to help me.

Upvotes: 2

Views: 682

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 254398

This will change the thumbnail size of your products. In home page products will be displayed with 150px by 150 px, in an other specific pages Id 600px by 600px for example:

add_filter( 'single_product_archive_thumbnail_size', 'custom_product_archive_thumbnail_size', 1000 );
function custom_product_archive_thumbnail_size( $size ) {
    global $product;

    if( is_home() || is_front_page() ) {
        $size = array('150', '150');
    } elseif ( is_page( 53 ) ) {
        $size = array('600', '600');
    }
    return $size;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

You can use WordPress conditional tags or WooCommerce conditional tags to target specific pages.

Upvotes: 1

Related Questions