diff --git a/assets/js/atomic/blocks/product-elements/image/style.scss b/assets/js/atomic/blocks/product-elements/image/style.scss
index aba3ac766ae..5a6e789ccc2 100644
--- a/assets/js/atomic/blocks/product-elements/image/style.scss
+++ b/assets/js/atomic/blocks/product-elements/image/style.scss
@@ -16,6 +16,7 @@
border-radius: inherit;
vertical-align: middle;
width: 100%;
+ height: auto;
&[hidden] {
display: none;
diff --git a/src/BlockTypes/ProductImage.php b/src/BlockTypes/ProductImage.php
index 3aa5e306153..7d943b97ed0 100644
--- a/src/BlockTypes/ProductImage.php
+++ b/src/BlockTypes/ProductImage.php
@@ -145,20 +145,21 @@ private function render_anchor( $product, $on_sale_badge, $product_image, $attri
* @return string
*/
private function render_image( $product, $attributes ) {
- $image_type = 'single' === $attributes['imageSizing'] ? 'woocommerce_single' : 'woocommerce_thumbnail';
- $image_info = wp_get_attachment_image_src( get_post_thumbnail_id( $product->get_id() ), $image_type );
+ $image_size = 'single' === $attributes['imageSizing'] ? 'woocommerce_single' : 'woocommerce_thumbnail';
- if ( ! isset( $image_info[0] ) ) {
+ if ( ! $product->get_image_id() ) {
// The alt text is left empty on purpose, as it's considered a decorative image.
// More can be found here: https://www.w3.org/WAI/tutorials/images/decorative/.
// Github discussion for a context: https://github.com/woocommerce/woocommerce-blocks/pull/7651#discussion_r1019560494.
- return sprintf( '', wc_placeholder_img_src( $image_type ) );
+ return wc_placeholder_img( $image_size, array( 'alt' => '' ) );
}
- return sprintf(
- '',
- $product->get_title(),
- $image_info[0]
+ return $product->get_image(
+ $image_size,
+ array(
+ 'alt' => $product->get_title(),
+ 'data-testid' => 'product-image',
+ )
);
}