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

Woocommerce – how can i change the image size that loads in woocomerce?

In my website i have a slider that loads the 620*620 size of the products picture. I want to load other size of this picture (the sizes that i want are created in wordpress gallery but i dont know how to load them).
the default picture size in “woocomerce_thumbnail” .
what is the other size that i can use ?

i found something here but how i can change this default size? (what is the other sizes that i can use ?)

if (!function_exists( 'woocommerce_get_product_thumbnail' ) ) {

    /**
     * Get the product thumbnail, or the placeholder if not set.
     *
     * @param string $size (default: 'woocommerce_thumbnail').
     * @param int    $deprecated1 Deprecated since WooCommerce 2.0 (default: 0).
     * @param int    $deprecated2 Deprecated since WooCommerce 2.0 (default: 0).
     * @return string
     */
    function woocommerce_get_product_thumbnail( $size = 'woocommerce_thumbnail', $deprecated1 = 0, $deprecated2 = 0 ) {
        global $product;

        $image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );

        return $product ? $product->get_image( $image_size ) : '';
    }
}
Tags:

2

Answers


  1. 0

    These sizes include:

    • woocommerce_thumbnail – used in the product ‘grids’ in places such as the shop page.
    • woocommerce_single – used on single product pages. woocommerce_gallery_thumbnail – used below the main image on the
      single product page to switch the gallery.
    • woocommerce_single shows the full product image, as uploaded, so is always uncropped by default. It defaults to 600px width.

    woocommerce_gallery_thumbnail is always square cropped and defaults to
    100×100 pixels. This is used for navigating images in the gallery.

    woocommerce_thumbnail defaults to 600px width, square cropped so the
    product grids look neat. The aspect ratio for cropping can be
    customized by the store owner.

    You can find the above and information on defining custom sized here.

    Login or Signup to reply.
  2. 0

    Re-check your theme support add_theme_support('post-thumbnails');

    For only woocommerce you can try this

    if (!function_exists('firefog_woocommerce_image_dimensions')) {
    function firefog_woocommerce_image_dimensions() {
        global $pagenow;

        if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {
            return;
        }

        $catalog = array(
            'width'     => '300',   // px
            'height'    => '300',   // px
            'crop'      => 1        // true
        );

        $single = array(
            'width'     => '500',   // px
            'height'    => '500',   // px
            'crop'      => 1        // true
        );

        $thumbnail = array(
            'width'     => '100',   // px
            'height'    => '100',   // px
            'crop'      => 1        // true
        );

        // Image sizes
        update_option( 'shop_catalog_image_size', $catalog );       // Product category thumbs
        update_option( 'shop_single_image_size', $single );         // Single product image
        update_option( 'shop_thumbnail_image_size', $thumbnail );   // Image gallery thumbs
    }
}
add_action( 'after_switch_theme', 'firefog_woocommerce_image_dimensions', 1 );

    For Default WordPress Thumbnail

    the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' );  // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' );         // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' );          // Full resolution (original size uploaded)

    If You need a specific resolutions

    the_post_thumbnail( array(500, 500) );  // 500x500 dimension

    Post Thumbnail Linking to Large Image Size you can change the size by changing large

    if ( has_post_thumbnail() ) {
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
    if ( ! empty( $large_image_url[0] ) ) {
        printf( '<a href="%1$s" alt="%2$s">%3$s</a>',
            esc_url( $large_image_url[0] ),
            esc_attr( get_the_title_attribute( 'echo=0' ) ),
            get_the_post_thumbnail()
        );
    }
}

    You can also create custom featured image sizes in your theme’s functions

     add_image_size( 'custom-thumb', 300, 300); //Simple widget size
 add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
 add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
 add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

    Here is an example of how to create custom Featured Image sizes in your theme’s functions.php file.

    if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'custom-thumb', 300, 300); // 300 pixels wide 
 }

    Displaying additional image sizes in your WordPress theme

    the_post_thumbnail( 'your-specified-image-size' ); //Example singlepost-thumb
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search