How can i make my Woocommerce single-product page footer full width?

I am struggling with extending the footer of my product page using my Woocommerce plugin. Every other page it is set to full width but the product page itself doesn't seem to inherit this.

Click here for page

I think (but don't know) that I would need to edit the single-product.php file so here is the current code...

<?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' ); ?>

    <?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' );
?>

/* Omit closing PHP tag at the end of PHP files to avoid "headers already sent" issues. */

If it is not this then I am out of ideas.

Solution

Its wrapped in a div with the margin-wrapper class which has a max-width of 840px; place your footer outside of this div.

how to fix this

your page content looks something like this:

 <div class="margin-wrapper">
     <! -- All your site containers -->
     <footer class="footer-wrapper brand-background" role="contentinfo">
     </footer>
   </div>

it should look like this

 <div class="margin-wrapper">
     <! -- All your site containers -->
 </div>
 <footer class="footer-wrapper brand-background" role="contentinfo">
 </footer>

Notice how the footer is outside of the wrapper for your content. Beyond this you'll have to learn about basic html structuring.