Return to previous page

Fix for product tabs and renaming them using functions and css

This topic has 2 replies, 2 voices, and was last updated 2 years, 9 months ago ago by Olga Barlow

Niddy

Participant

February 23, 2022 at 14:52
This isn’t a request for help, it’s more to help others fix a small issue renaming tabs on the product page and extending the additional information titles taken from the variables.

Hope it’s ok to post – please note this works on the xtheme perfectly.

I found myself needing to use variables but when the title echo’s to the product additional information tab, it repeats the exact variable title. Example, we wanted to use a variable for search called Size & Colour. So when you select a size or colour on the product, the label reads properly; i.e it says “Size” or “Colour” then offers the size / colour options. Further down, in the Additional Info tab, it repeats the same title; in this case “Size” & “Colour”. However we wanted this to read as “Colours Available” and “Sizes Available” without affecting the attribute selectors mentioned. So to fix this we add the following css on the individual product page:
```
.woocommerce-product-attributes-item--attribute_pa_colour th::after,
.woocommerce-product-attributes-item--attribute_pa_size th::after {
content: "s Available";
}
```
What this does is essentially take the attribute name and once you apply the ::after or ::before pseudo element; it will change the output shown only under the Additional Info tab.

You can do it with any attribute title by adding a new line to the css using the same slug as the attribute uses.

Additionally, we also wanted to rename the Description and Additional Info tabs within the product itself so we did the following; which you apply to your child theme functions.php file (Admin -> Appearance -> Theme File Editor -> Functions)
```
add_filter( 'woocommerce_product_tabs', 'description_rename_tab', 98);
function description_rename_tab($tabs) {
$tabs['description']['title'] = 'Details';
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'additional_rename_tab', 98);
function additional_rename_tab($tabs) {
$tabs['additional_information']['title'] = 'Info & Care';
return $tabs;
}
```
You can do this with any of the tabs, just ensure you change the function as shown above, so to change reviews you’d essentially add a new function to the above, like this –
```
add_filter( 'woocommerce_product_tabs', 'reviews_rename_tab', 98);
function reviews_rename_tab($tabs) {
$tabs['reviews']['title'] = 'My New Title';
return $tabs;
}
```
Hope this helps you control your product tabs better 🙂

edit to add – if the title heading echo’s into the tabs, at the top, then add the following function as well, remembering to change it to suit – this shows the method of renaming the additional information title within that tab (once it was renamed):
```
add_filter( 'woocommerce_product_additional_information_heading', 'rename_additional_info_heading' );
function rename_additional_info_heading( $heading ){
return 'Enter New Title Here';
}
```
Please, contact administrator
for this information.
#318235 Copied Theme version: 8.1 WooCommerce version: 5.9
1 Answer

Olga Barlow

Support staff

February 23, 2022 at 21:10

Hello,

Thank you very much for your post. We’ll be glad if that helps our users. Thanks!

Regards

#318275 Copied
Tagged: functions, product tabs, rename, themes, woocommerce, wordpress
Viewing 2 results - 1 through 2 (of 2 total)