[Resolved] Wrap product image and short description in single product page

[wonzilla]

Hi there,

I need to add a different width to the short description area but I can’t since the product image and short description have separate div containers. Beside the div container around these two, I want to wrap the short product description with a second div container to apply some padding. Hope someone can help me with this. Thank you!

[David]

Hi there,

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

[wonzilla]

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

[David]

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.

[wonzilla]

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.

[David]

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

[wonzilla]

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

[David]

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.

[wonzilla]

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

[David]

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.

[wonzilla]

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!

[David]

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.

[wonzilla]

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?

[David]

That looks fine to me.

[Author]

Posts