Add a wrapper div to Woocommerce Single Product page without editing plugin files

The problem

I was re-arranging the items on my themes Woocommerce Single Product page. See the info panel at the end of this post for more on that. I realized that the various sections with description, price, add to cart button etc would flow independently when the browser was resized. This may be desirable in some cases but with my layout it was odd. I wanted to add a div to wrap all of the parts together except for the images. I had re-ordered my page as I mentioned so you may need to do this slightly differently. This code shows how to add a new div to the single product page, open it and add a class then later close it.

Solution

Woocommerce uses action hooks. See the Woocommerce Codex and the WordPress Codex and this excellent article for more information. This allows you to use code in the functions file of your Child theme to alter Woocommerce without editing its core files. See the notes on Tools and Child themes below.
The numbers at the end of the lines, in this case 20, effect the order in which things appear on the page. To be clear the numbers do not refer to a physical location, they are the order in which the actions run, lower numbers first. This then effects the order in which things are created and drawn to the page, thus effecting where they appear. More on priority can be found here.

Your theme may also have action hooks to allow you to add functionality without altering individual PHP files.

Woocomerce has these 2 hooks built in (and more)
‘woocommerce_before_single_product_summary’
‘woocommerce_after_single_product_summary’

So to wrap the product summary area in a new div I used this.

// attach my open 'section' function to the before product summary action
add_action( 'woocommerce_before_single_product_summary', 'my_non_image_content_wrapper_start', 20 );
// attach my close 'section' function to the after product summary action
add_action( 'woocommerce_after_single_product_summary', 'my_non_image_content_wrapper_end', 20 );

//This function opens a new css section tag called "no-image-wrap" to the page HTML before all of the woocommerce "stuff" except images
function my_non_image_content_wrapper_start() {
 echo '<section id="no-image-wrap">';
}
//This line adds the HTML to the page to end the new "no-image-wrap" section
function my_non_image_content_wrapper_end() { echo '</section>'; }