CODEWITHSUNDEEP
phpwordpresswoocommercehook-woocommerce
Masoud Hosseini
Masoud Hosseini

Reputation: 46

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 ) : '';
    }
}

Upvotes: 2

Views: 9861

Answers (2)

Firefog
Firefog

Reputation: 3174

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

Upvotes: 3

Francis Eytan Dortort
Francis Eytan Dortort

Reputation: 1447

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.

Upvotes: 2

Related Questions