WooCommerce Product detail page: Add content under thumbnails [closed]

In woocommerce/templates/content-single-product.php you can see that woocommerce_show_product_images is hoooked with a priority of 20.

if you want your custom function to render below the images, but above the summary, you need to set the priority to greater than 20. I think the code below should do it:

add_action('woocommerce_before_single_product_summary', 'bbloomer_add_below_prod_gallery', 30);

function bbloomer_add_below_prod_gallery() {
    global $product;
    echo '<div class="text" style="border: thin solid black; clear: both;">';
    echo '<p>Random text now</p>';
    echo '</div>';
}

UPDATE

The default woocommerce stylesheet woocommerce-layout.scss floats the gallery to the left and gives it 48% width, like this:

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    float: left;
    width: 48%;
}

You could add this style to your html, but depending on the theme you are using, it might end up to the right of the gallery (because it is floated).

So, the quickest thing, if you want to get your text directly underneath the gallery element, would be to override the product-image.php template and add an extra hook.

// In your copy of product-image.php everything is the same except the new action hook.
...
<div class="...">
    <figure class="woocommerce-product-gallery__wrapper">
        <?php
        // Stuff copied from original template.
        ...
        do_action( 'woocommerce_product_thumbnails' );
        ?>
    </figure>

    <!-- Create a new action hook before the final <div> -->
    <?php do_action( 'bbloomer_after_single_product_gallery' ); ?>
</div>
...

Then hook in to this new action in your theme.

add_action('bbloomer_after_single_product_gallery', 'bbloomer_add_below_prod_gallery', 30);

function bbloomer_add_below_prod_gallery() {
    global $product;
    echo '<div class="text" style="border: thin solid black; clear: both;">';
    echo '<p>Random text now</p>';
    echo '</div>';
}

Or just add the html directly in your new template instead of adding a hook.