Wrap product image and short description in single product page

Hi there,

can you provide a link to the product page? Will help providing a solution.

Hi David,

My site is under construction right now but it's the same html markup as in the standard WooCommerce single product page. I've attached some screenshots below to see where I want to add the containers:

Wrap product image and short description:
https://ibb.co/ZdCVSjY

Also wrap short description:
https://ibb.co/KzJDP0R

OK, so using the Hook Element, you can add those opening and closing elements to the following hooks and assign the display rules to Product:

Product summary wrapper:
Open: woocommerce_before_single_product_summary
Close:woocommerce_after_single_product_summary

The inner wrapper try:
Open: woocommerce_single_product_summary
Close:woocommerce_share

As some of these hooks will be being used you may need to increase or decrease the Hooks Priority to get them where you need them.

Thank you, it works! However there are 4 different hooks that I need to add and this doesn't seem to be very elegant. Isn't there a code to do this job because I don't feel really confident using this method.

You can add PHP functions for each of he hooks, example of one here step and repeat for each hook making sure each has a unique function:

add_action( 'woocommerce_before_single_product_summary', 'my_unique_named_function', 15 );
 
function my_unique_named_function() {
    echo 'HTML here';
}

Also it is ok to add the opening and close tags in different hooks because it looks kind of buggy... sorry but I'm not very familiar with php.

https://ibb.co/Xj8G8Gp

Yeah it looks buggy :) But is fine - its just the code checker reporting the fact the other part of the element is missing. I generally add a HTML comment before these elements to make it clearer e.g

<!-- close custom wrapper --?</div>

It will still flag red but it just makes it easier to read.

Thank you for the code, but I have a doubt when adding the html. If I add it without the closing tag, it automatically adds it on the product page and I wonder if this is ok or should I add it manually somewhere in the code?

add_action( 'woocommerce_before_single_product_summary', 'my_unique_named_function', 15 );
 
function my_unique_named_function() {
    echo '<div class="wrap-product-summary">';
}

Hi there,

some Hooks are related like those before and after hooks and will self close.
Personally i still add the closing function. It won't make any difference.

Where there isn't a relationship between the two like with the inner summary you will (should) need both.

Oh, ok. I was afraid that this will lead to some errors. Now I'm unsure which method should I choose for best results - using the hooks or adding the code? I want to make sure that everything loads perfectly. Thank you again!

Either way works. The code means you keep them all together. The Hooks makes them a little more accessible for editing. Glad to be of help.

Hi David,

Sorry for the confusion but when I add the code without the closing tag for woocommerce_before_single_product_summary it wraps the whole page and makes it impossible to apply a background color for the short description area.

This is how I added the closing tag but I'm not sure if this is the best method (please note that the priority is set to 9 because otherwise it will also wrap the description and reviews tabs):

add_action( 'woocommerce_before_single_product_summary', 'my_unique_named_function', 5 );
 
function my_unique_named_function() {
    echo '<div class="clearfix wrap-product-summary">';
}

add_action( 'woocommerce_after_single_product_summary', 'my_unique_named_functionn', 9 );
 
function my_unique_named_functionn() {
    echo '</div>';
}

Is there any way to add it without so much code?

That looks fine to me.