Question about product specification presentation

How to write the content of the product parameters like in the demo (for example: brand on the left edge, apple on the right edge like screenshot ‘a’). currently i am writing the content in the ‘tabs’ section of the product but have to use my hand to press the space bar in the middle until one letter is in the left corner, one letter is in the right corner, quite inconvenient and time consuming but when displayed they are still uneven (the letters are not close to the edge but some lines are indented into 1 cell) like screenshot ‘c’. please guide me how to display it like in the demo

Attachments:

You must be logged in to view attached files.

Hello,

This demo is using a custom layout for a single product page. You can use Woocommerce builder of WoodMart allowing you to create custom templates for product pages and other functional pages that are not editable by default. Woocommerce builder is the inbuilt functionality widget included in the builder you use on the site. You can create a custom layout for a single product page and choose the predefined layout design which you want.
https://ibb.co/pwQQk2d

Please check this manual:
https://xtemos.com/docs-topic/single-product-page-builder/

Best Regards

I am currently using ‘layouts’ to design a single product page, and I use the ‘product tabs’ component to present the content, but I don’t know how to present the content in the demo style and I have encountered some problems that I have clearly presented above. I hope you will review and guide me on how to solve them. Thank you very much.

Attachments:

You must be logged in to view attached files.

Hello,

You can achieve a layout similar to the demo by using the Product Additional Information Table widget in the Layout Builder.

Please note that this widget cannot be used directly within the Product Tabs component, as the Additional Information tab already displays these details by default on single product pages.

Like this: https://ibb.co/MkMq9RHV

However, you can separately add the Product Additional Information Table widget in the layout to achieve the structured design seen in the demo. You can also use the predefined layout designs available in the Layout Builder to match your preferred style.

For reference, please check this demo layout: https://ibb.co/pwQQk2d

Best Regard,

For the Product Info Panel widget in Layout Builder, where do I enter the information to display it and how can I present it the way I want (item by item and with an image for each item title like the demo)

Best Regard.

Attachments:

You must be logged in to view attached files.

And how can the content of the parameters I entered in the ‘tabs’ section in the product be displayed on the left and right corners as presented by the product’s Additional Information Panel widget. The problem I encountered with the tab section I also presented in the first question, I hope you will review and guide me on how to do it, thank you in advance

Hello,

As mentioned in my previous reply, try using the Product Additional Information Table widget in the layout to achieve a similar look to the demo with the image and title: https://ibb.co/SnD1sNb

These Product Additional Information tables are added in the custom layout and edited in Elementor. They automatically pull data from the Product Attributes section: https://ibb.co/nNvgjyYV

Additionally, you can include more details by utilizing the Data Source option in the Elementor widget:
https://ibb.co/sdJ2vJ1G

Please note that this widget cannot be used directly within the Product Tabs component, However, you can separately add the Product Additional Information Table widget in the layout to achieve the structured design seen in the demo.

But alternatively, create a custom tab for every product from Products > Edit Product > On the edit product page, check the Product Settings > Tabs tab and create a custom tab for each product separately and add the content.
https://ibb.co/z53zhnm

Best Regards,

Hello, I would like to ask where to add these details in the backend of the single product editor so they appear on the frontend. I have attached a reference image for clarification.

Attachments:

You must be logged in to view attached files.

Hello,

@Amit

These Product Additional Information tables are added in the custom layout and edited in the page builder.
These are product attributes, which can be edited and configured for each product individually.
They automatically pull data from the Product Attributes section: https://ibb.co/nNvgjyYV

Best Regards,

[Author]

Posts