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

Posted by on Apr 28, 2014 in Blog, E-Commerce, Themes, Woocommerce, Wordpress | No Comments

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.


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)

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>'; }

For more on modifying the Woocommerce Single Product page layout see this. and also this.


You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac,
Notepad++ for the PC

Child Themes

You want to change code in a way that will not be over-written when you update your theme. So if you do not already have one you should setup a child theme. I always do this if I am making any changes to the main theme, even if it is only CSS. That is not the topic of this post so here is a link to a tutorial on creating a child theme, you will find the WordPress codex article here.

Leave a Reply