Wordpress/Woocommerce - Edit template after product content but before related products

Question

Im wanting to edit the woocommerce product template to allow me to add some code (a banner) just after my main product description but before the related products.

The code Im editing(within /wp-content/plugins/woocommerce/templates/single-product.php);

<?php
    /**
     * woocommerce_before_main_content hook.
     *
     * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
     * @hooked woocommerce_breadcrumb - 20
     */
    do_action( 'woocommerce_before_main_content' );
?>

    <?php while ( have_posts() ) : the_post(); ?>

        <?php wc_get_template_part( 'content', 'single-product' ); 

                          /*My code start*/
        echo "<div class=\"product-footer\">";
        echo "<h1 class=\"product-footer-text\">Need some additional help? Or have an enquiry?</h1>";
        echo "<h5 class=\"product-footer-text\"><i class=\"fa fa-phone\"></i>  Call one of our sales team on <strong>01782</strong></h5>";
        echo "<h5 class=\"product-footer-text\" style=\"margin-top: -40px;\"><i class=\"fa fa-envelope\"></i>  Contact us via our contact page <strong><a style=\"color: #ffffff;\" href=\"/../contact\" target=\"_blank\">HERE</a></strong></h5>";
        echo "<p class=\"product-footer-text\"><i><strong>Order note: </strong>All prices above are subject to delivery charges and VAT where applicable </i></span></p>
    </div>";
                            /*My code end*/

    ?><?php endwhile; // end of the loop. ?>

<?php
    /**
     * woocommerce_after_main_content hook.
     *
     * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
     */
    do_action( 'woocommerce_after_main_content' );
?>

<?php
    /**
     * woocommerce_sidebar hook.
     *
     * @hooked woocommerce_get_sidebar - 10
     */
    do_action( 'woocommerce_sidebar' );
?>

Is giving me these results; https://i.stack.imgur.com/sTgY6.png

I wanting the the banner at the bottom to appear below the product desc. Ive been messing around with the code for quite awhile now and just cant seem to get it working.

Answer 1

Instead of trying to override templates, you could use woocommerce_after_single_product_summary hook with a priority between 10 and 15 to get your custom content between the single product tabs (Product description) and the related products. See below the schema of this hook:

/**
 * woocommerce_after_single_product_summary hook.
 *
 * @hooked woocommerce_output_product_data_tabs - 10
 * @hooked woocommerce_upsell_display - 15
 * @hooked woocommerce_output_related_products - 20
 */

So your code will be located instead in the function.php file of your active child theme (or theme):

add_action( 'woocommerce_after_single_product_summary', 'custom_single_product_banner', 12 );
function custom_single_product_banner() {

    $output = '<div class="product-footer">
        <h1 class="product-footer-text">Need some additional help? Or have an enquiry?</h1>
        <h5 class="product-footer-text"><i class="fa fa-phone"></i>  Call one of our sales team on <strong>01782</strong></h5>
        <h5 class="product-footer-text" style="margin-top: -40px;"><i class="fa fa-envelope"></i>  Contact us via our contact page <strong><a style="color: #ffffff;" href="/../contact" target="_blank">HERE</a></strong></h5>
        <p class="product-footer-text"><i><strong>Order note: </strong>All prices above are subject to delivery charges and VAT where applicable </i></span></p>
    </div>';
    echo $output;
}

This code is tested and works.