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:
- Title
- Price
- Add to cart / attributes
- Excerpt
- Meta
- Images
- Price
- Add to cart / attributes
- Tabs
- Upsell
- 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','output_opening_div',9);
add_action( 'woocommerce_after_single_product', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_after_single_product', 'woocommerce_template_single_add_to_cart', 10 );
add_action('woocommerce_after_single_product','ouput_closing_div',10);
}// end if woocommerce