I am looking to add a new div/block above single product pages in woocommerce that shows the featured product in full width below header

Question regarding woocommerce, storefront child theme:

Can anyone please help me with a custom code I can add to function.php that will create a new block above the single product (directly below the header) that will show the main product image?

The image will have to be different dimension than the ones I use in the gallery.

What I tried to do so far:

I wasn't able to do this well with CSS without stretching the entire gallery image. When I used custom code in function.php to set the product image width (by bbloomer) it was still limited to the width of the single page div (800px max, otherwise the text below is unreadable).

I also tried using a function that applies a different main image from the catalog thumbnail (by Vista) but I still have the max-width div problem.

So I figured the best way to accomplish this is to create a new div, with its own ID, above the single-product, that calls for the main product image. Then I can easily customize the look with CSS, without affecting anything below.

Thank you in advance! I do want to mention I searched all over Stack overflow and online for a solution before finally deciding to ask here.

Thanks again.

Code mentioned:

/**
 * @snippet       Edit Image Sizes @ Storefront Theme
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 

add_filter( 'storefront_woocommerce_args', 'bbloomer_resize_storefront_images' );
 
function bbloomer_resize_storefront_images( $args ) {
   $args['single_image_width'] = 1000;
//    $args['thumbnail_image_width'] = 222;
   return $args;
}



/ *different catalog thumbnail from product image */
	add_action( 'woocommerce_init', 'vista_replace_loop_product_thumbnail' );

	function vista_replace_loop_product_thumbnail() {

		remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

		function vista_replace_product_thumbnail() {
			global $product;
			$attachment_id = $product->get_gallery_attachment_ids()[0];
			echo "<img src='" . wp_get_attachment_url( $attachment_id ) . "'>";
		}

		add_action( 'woocommerce_before_shop_loop_item_title', 'vista_replace_product_thumbnail', 10 );
	}

OK this is what I ended up doing. I don't know if it's the most elegant, but it worked. Including the code I placed in functions and the css file.

I used the input from user580950 and woocommerce documentation.

#main-product-image img {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 45px;
}

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

add_action( 'woocommerce_before_single_product', 'show_main_product_image', 5 );

function show_main_product_image() {
    global $product;

    $image_url = wp_get_attachment_url( $product->get_image_id() );

    echo '<div id="main-product-image">';
    echo '<img src="' . $image_url . '" />';
    echo '</div>';

}

Try adding this code to your child theme's functions.php file to display the main product image above the single product page

add_action( 'woocommerce_before_single_product', 'show_main_product_image', 5 ); function show_main_product_image() { global $product; echo '<div id="main-product-image">'; echo wp_get_attachment_image( $product->get_image_id(), 'full' ); echo '</div>'; } –