Search code examples
wordpresswoocommerceproductthumbnailsstorefront

Make WooCommerce thumbnail images as bigger than main product image


I am using Woocommerce 4.2.0 and a child theme of Storefront. In the product page, I'd like to make the thumbnails images as big as the main image (692 pixels).

I have this in my functions.php:

/**
 * Modify image width theme support.
 */
function iconic_modify_theme_support() {
    $theme_support = get_theme_support( 'woocommerce' );
    $theme_support = is_array( $theme_support ) ? $theme_support[0] : array();

    
    $theme_support['single_image_width'] = 692;
    // $theme_support['thumbnail_image_width'] = 324;

    remove_theme_support( 'woocommerce' );
    add_theme_support( 'woocommerce', $theme_support );
}
add_action( 'after_setup_theme', 'iconic_modify_theme_support', 100 );

enter image description here


Solution

  • Updated - The following will dynamically:

    • Disable flex slider
    • Disable Zoom feature
    • Set gallery thumbnail images size to the same size than main product image

    The code:

    add_filter( 'woocommerce_single_product_flexslider_enabled', '__return_false' ); // Disable slider
    
    add_filter( 'woocommerce_single_product_zoom_enabled', '__return_false' ); // Disable zoom
    
    // Set gallery thumbnails size from single product main image size
    add_filter( 'woocommerce_gallery_thumbnail_size', 'filter_gallery_thumbnail_size' );
    function filter_gallery_thumbnail_size( $indexed_size ){
        // Get single product main image size
        $indexed_size = wc_get_image_size( 'woocommerce_thumbnail' );
    
        return array( $indexed_size['width'], $indexed_size['height'] );
    }
    

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

    enter image description here