How To Change The Title Text in Product Tabs

The tabs on the product page are useful in packing lots of information in a small space. The one drawback is that you cannot customize the tab titles from the control panel in case you want to display different types of information. For example, there is no way to change the warranty tab to read testimonials instead.

This article will show you how to do just that by modifying the warranty tab title to "Testimonials". The same technique can be used to change the titles for any other tabs on the product page.

1. Navigate to your control panel > Design > Edit HTML/CSS and edit the product.html file by adding the following code before the closing </body> element:

<script type="text/javascript">
$(document).ready(function(){
    $("li#ProductWarranty_Tab a").text("Testimonials");
});
</script>

2. Save the changes and load the product page. You should see the Warranty title replaced by Testimonials.

How It Works

The code finds the product warranty tab title using the following selector: li#ProductWarranty_Tab a . To use a different tab, for example, the "other details" tab you would use the following selector: li#ProductOtherDetails_Tab a. The li and a elements of the selector stay the same. The only part that changes is the identifier from ProductWarranty_Tab to ProductOtherDetails_Tab.

Troubleshooting

If the product tabs do not show up on the product page... then turn the feature on from the control panel > Setup & Tools > Store Settings > Display > Display Settings > Yes, enable product tabs.

If the tab title is unchanged... then the selector is incorrect. Some templates have different identifiers for the tabs. Try the following code instead:

<script type="text/javascript">
$(document).ready(function(){
    $("li#tab-warranty a").text("Testimonials");
});
</script>

If it still doesn't work... then contact us. We can install the modification for you.