[Resolved] How to edit a Single Product Page?

[Moretasks]

Hello team,

Could you please explain to me how to edit the single product page?
I would like to get a table containing product details beside the product image instead of quantity and add-to-cart buttons.

Thank you!

[David]

Hi there,

Woocommerce only provides 2 x areas for editing , the Short Description which is the area to the right of the image.
And then theres the Description field which by default appears in the Tabs.
Both of those accept HTML so you can add a HTML Table if you wish.

Other then that you’re fairly limited without adding plugins or code.

How is this Table to be generated ? Is it static data or is it comprised of product attributes ?

[Moretasks]

That is not a static data table. It contains product attributes. For example, Manufacturer name, Ingredients, etc.

[David]

OK – so that should show in one of that tabs.
And if you want it displayed after the summary you can add this PHP Snippet to your site:

add_action ( 'woocommerce_single_product_summary', function(){
  global $product;
  wc_display_product_attributes( $product );
}, 20 );

How to add PHP: https://docs.generatepress.com/article/adding-php/

[Moretasks]

I want to achieve this design. A table beside the product image.

Please find the link I have shared here for your reference.

https://www.powpills.com/product/cenforce/

[David]

That code i provided above will insert your attributes table in that position.
In the code you will see at the end: }, 20 ); the 20 is its priority, that positions it after the short description, if you change it to 15 it will place it before the description. You can see the Hook and its callbacks here for reference:

https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

If you can add that code to your site, and if it works share a link to a product where i can see them and ill assist with any CSS to improve its style.

[Moretasks]

Yes, it worked. I will manage the CSS.

Thank you.

Could you please tell me how to achieve the table structure of the product?

https://www.powpills.com/product/cenforce/

I want to get the data according to the pack size and unit price. I have created two attributes for both of them. But the unit price is repeating for all the pack sizes. For example, I want the data in this structure.
30 pack size -> $1
60 pack size -> $0.5

Instead, my output is as follows.
30 pack size -> $1, $0.5
60 pack size -> $1, $0.5

[David]

Thats not something i can help with, it would require custom development.

[Moretasks]

Okay. Thanks for your help buddy!

[David]

You’re welcome

[Author]

Posts