Need to Change Product Image to Portrait from Square

[82West]

I haven’t found anything that works in any of the forums.

I’m selling books with Woocommerce and I need to change the single product page image from square to portrait. The product images in the ‘store’ are portrait, but the product page is square and crops the image.

I’m using the Renew stack
X 5.1
X Child Theme
Woocommerce 3.09

Essential Purée - Recipes for Adults on the Dysphagia Diet

[SingularGreen]

I’m in the same position, I need to change it.
Hope someone can help!
Thanks.

[thai]

Hi Guys,

Please create a new directory in your child theme: x-child/woocommerce/single-product/

After create a new product-image.php file with the following code:

<?php

// =============================================================================
// WOOCOMMERCE/SINGLE-PRODUCT/PRODUCT-IMAGE.PHP
// -----------------------------------------------------------------------------
// @version 3.0.2
// =============================================================================

// Template Changes
// ----------------
// 01. Add product sale flash.
// 02. Add classes to linked image (.x-img, .x-img-link, .x-img-thumbnail,
//     and .man).
// 03. Add classes to image (.x-img, .x-img-thumbnail and .man) and update text
//     domain.

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

global $post, $product;
$columns           = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = get_post_thumbnail_id( $post->ID );
$full_size_image   = wp_get_attachment_image_src( $post_thumbnail_id, 'full' );
$image_title       = get_post_field( 'post_excerpt', $post_thumbnail_id );
$placeholder       = has_post_thumbnail() ? 'with-images' : 'without-images';
$wrapper_classes   = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
	'woocommerce-product-gallery',
	'woocommerce-product-gallery--' . $placeholder,
	'woocommerce-product-gallery--columns-' . absint( $columns ),
	'images',
) );
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
  <?php woocommerce_show_product_sale_flash(); // 01 ?>
	<figure class="woocommerce-product-gallery__wrapper">
		<?php
		$attributes = array(
			'title'                   => $image_title,
			'data-src'                => $full_size_image[0],
			'data-large_image'        => $full_size_image[0],
			'data-large_image_width'  => $full_size_image[1],
			'data-large_image_height' => $full_size_image[2],
		);

		if ( has_post_thumbnail() ) {
			$html  = '<div data-thumb="' . get_the_post_thumbnail_url( $post->ID, 'full' ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_size_image[0] ) . '" class="x-img x-img-link x-img-thumbnail man">'; // 02
			$html .= get_the_post_thumbnail( $post->ID, 'full', $attributes );
			$html .= '</a></div>';
		} else {
			$html  = '<div class="woocommerce-product-gallery__image--placeholder">';
			$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image x-img x-img-thumbnail man" />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', '__x__' ) ); // 03
			$html .= '</div>';
		}

		echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, get_post_thumbnail_id( $post->ID ) );

		do_action( 'woocommerce_product_thumbnails' );
		?>
	</figure>
</div>

Hope it helps