WooCommerce product additional information shows attributes and shipping details. However, the default tab may not be enough. In this article, I will show what the tab contains and how to customize this product section.
Contents
- WooCommerce product tabs
- Additional information (basics)
- How to customize the additional information tab in WooCommerce?
- Summary
- Product tabs WooCommerce (how to adjust default and add custom ones)?
- How to change the WooCommerce shop page (options & customization)
- How to customize the WooCommerce shop page (checkout & product)?
- WooCommerce Products - The basics of e-commerce product management
- How to use WooCommerce product tags (quick guide)
WooCommerce product tabs
By default, WooCommerce uses 3 tabs to show the product description, attributes & shipping information, and reviews (if they are added or enabled).
But, it’s also possible to customize them or add new ones.
Additional information (basics)
Let’s take a look at the Additional information tab.
It will appear if the product has any attributes to show or shipping details. So, one needs to add attributes and shipping information by editing the Product data section.
Of course, usually, there will be less additional information compared to the product Description. However, the product attributes can be enough (it’s still text-based).
The tab layout and styling may also depend on the theme. Some plugins can also modify, hide, or style the tab. But, adding custom data to the tab is quite simple. Disclaimer: it requires some technical knowledge.
How to customize the additional information tab in WooCommerce?
The plain text information in the tab can suffice especially as it’s the second tab and people may skip it anyway. In many cases, attributes are also used for variations, so visitors see them upfront and do not open the tab.
However, it’s possible to customize the tab, move it, or add new elements inside using the woocommerce_product_tabs filter. Styling is also possible with CSS.
WooCommerce Additional information tab customization
Let’s see 5 examples of adjusting the tab.
-
Styling
The first example shows how to change the styling of tab content. For instance, making some elements uppercase and adding a color. It’s possible with a few lines added to Themes → Personalize → Additional CSS or stylesheets (style.css, linking, inline).
-
Layout
Secondly, there is also a way to use CSS for customizing the tab layout which can depend on the theme as well. Adding a few lines can rebuild the tab.
-
Change the tab name
It’s possible with the woocommerce_product_tabs and woocommerce_product_additional_information_heading filters.
The code added to the theme’s functions.php file will affect the output in the product tab.
-
Remove Additional information for products
The filter can be used to remove the tab for all or certain WooCommerce products. In fact, the conditions for the code may also be related to the product category, price, or reviews.
In the example below, I make WooCommerce hide the tab for one product category or cheaper products.
Of course, the tab will not appear also if the product has no attributes and shipping information. But it may happen that some products will have only partial data.
-
Add new data to the tab
Finally, one may want to include more information about the product. For example, I used the woocommerce_display_product_attributes filter to show the product quantity and SKU. What's more, with the new callback for the tab, the Additional information tab got the custom heading and paragraph.
Summary
In the article, I described the WooCommerce product’s Additional information tab. Also, how to customize the layout and data inside. You may read more blog posts about WooCommerce and plugins here.
