How do I wrap a div around the actions in the code below?

PHP in functions.php file:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_title', 5 );

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 6 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_price', 6 );

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 30 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_excerpt', 10 );

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 6 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_add_to_cart', 6 );

Question Background Info:

I managed to move the title, price, excerpt, and add to cart before the images so that now I have the page set up as follows and it's what I want. But I want a div with the class "mobile-summary" around the first set.

<div class="new-div-i-want-to-add">
    Add to Cart<br>

<div class="images">Images</div>
    <div class="summary">
    Add to Cart<br>


What have I tried?

I don't know what it's called so nothing. I am learning Genesis and Woocommerce w/o much previous experience in php or Wordpress (even blogging as a user).

2 Answers 2


I did the same thing a different way and now it's stacked like I want with a div wrapping the content.

This stacks the single product woocommerce output to be as follows:

  1. Title
  2. Price
  3. Add to cart / attributes
  4. Excerpt
  5. Meta
  6. Images
  7. Price
  8. Add to cart / attributes
  9. Tabs
  10. Upsell
  11. Related

So now on large viewports we float the .product div.images to the left, float the .product div.summary to the right, clear the stuff after it. Hide the .footer-cart-section on large viewports and now the person on a mobile phone won't have to scroll the the entire height of the image to add to cart - if they wish.

In functions.php

if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {

// ==== wrap in div
  function output_opening_div() {
      echo '<div class="footer-cart-section">';
  function ouput_closing_div() {
      echo '</div><!-- /.footer-cart-section -->';

// ==== put the excerpt below the add to cart and before the meta
  remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt',20);
  add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt',35);

// ==== move images (with the thumbs) below the content
    remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
    add_action( 'woocommerce_after_single_product_summary', 'woocommerce_show_product_images', 50);

// ==== move all the content after images
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

    add_action( 'woocommerce_after_single_product', 'woocommerce_output_product_data_tabs', 20);
    add_action( 'woocommerce_after_single_product', 'woocommerce_upsell_display', 20);
    add_action( 'woocommerce_after_single_product', 'woocommerce_output_related_products', 20 );

// ==== repeat cart after image with opening and closing div functions


    add_action( 'woocommerce_after_single_product', 'woocommerce_template_single_price', 10 );
    add_action( 'woocommerce_after_single_product', 'woocommerce_template_single_add_to_cart', 10 );


}// end if woocommerce

I would do it with jQuery, something like:

$('.element').wrapInner('<div class="mobile-summary"></div>');

.element needs to be the div before where you want the code to work e.g.

<div id="content>
 <div class="mobile-summary">
  <img src="image.jpg" />

Without a URL to work from it's hard to give a 100% answer but that will give you a starting point

  • Thanks, I figured it out by adding a function, calling the action, and all that.
    – Christina
    Oct 21, 2015 at 20:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.