I am recently editing a minimalist shop theme and I have come across an issue – needless to say I am very inexperiences with these stuff. I cannot edit the product page layout and I need to display the product title above the photo. I tried to fix it with an additional CSS code to move the section of the photo down, but with no result. Here is the code of the Single Product Page from Woocommerce, product-image.php file.

<?php

defined( 'ABSPATH' ) || exit;

global $product;

$columns           = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = method_exists( $product, 'get_image_id' ) ? $product->get_image_id() : get_post_thumbnail_id( $product->get_id() );
$thumbnail_size    = apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' );
$full_size_image   = wp_get_attachment_image_src( $post_thumbnail_id, $thumbnail_size );
$wrapper_classes   = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
    //  'woocommerce-product-gallery',
    'woocommerce-product-gallery--' . ( $post_thumbnail_id ? 'with-images' : 'without-images' ),
    'woocommerce-product-gallery--columns-' . absint( $columns ),
    'woocommerce-product-gallery--mobile-' . sober_get_option( 'mobile_product_gallery_display' ),
    'images',
) );

if ( ! sober_get_option( 'product_lightbox' ) ) {
    $wrapper_classes[] = 'woocommerce-product-gallery--no_lightbox';
}
?>
<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;">
    <div class="woocommerce-product-gallery__wrapper">
        <?php
        $attributes = array(
            'title'                   => get_post_field( 'post_title', $post_thumbnail_id ),
            'data-caption'            => get_post_field( 'post_excerpt', $post_thumbnail_id ),
            '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 ( $post_thumbnail_id ) {
            $html  = '<div data-thumb="' . get_the_post_thumbnail_url( $product->get_id(), 'woocommerce_thumbnail' ) . '" class="woocommerce-product-gallery__image woocommerce-main-image"><a href="' . esc_url( $full_size_image[0] ) . '">';
            $html .= get_the_post_thumbnail( $product->get_id(), 'woocommerce_single', $attributes );
            $html .= '</a></div>';
        } else {
            $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
            $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
            $html .= '</div>';
        }

        $images         = array();
        $images[]       = apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id );
        $attachment_ids = method_exists( $product, 'get_gallery_image_ids' ) ? $product->get_gallery_image_ids() : $product->get_gallery_attachment_ids();

        if ( $attachment_ids && has_post_thumbnail() ) {
            foreach ( $attachment_ids as $attachment_id ) {
                $full_size_image = wp_get_attachment_image_src( $attachment_id, 'full' );
                $attributes      = array(
                    'title'                   => get_post_field( 'post_title', $attachment_id ),
                    'data-caption'            => get_post_field( 'post_excerpt', $attachment_id ),
                    '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],
                );

                $html = '<div data-thumb="' . get_the_post_thumbnail_url( $attachment_id, 'woocommerce_thumbnail' ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_size_image[0] ) . '">';
                $html .= wp_get_attachment_image( $attachment_id, 'woocommerce_single', false, $attributes );
                $html .= '</a></div>';

                $images[] = $html;
            }
        }

        $video_position = get_post_meta( $product->get_id(), 'video_position', true );

        echo '<div class="woocommerce-product-gallery__slider">';
        echo 'first' == $video_position ? sober_get_product_video() : '';
        echo implode( "nt", $images );
        echo 'last' == $video_position ? sober_get_product_video() : '';
        echo '</div>';

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

Could you tell me if this is the file I need to look for and how can I resolve this issue. The product page needs to look approximately like a product page form skims.com website.

Many thanks!