Trying to set up custom product tabs for WooCommerce?
Custom product tabs let you add additional information to a single product page, such as size charts, technical specifications, and more.
If you want to customize the Products tab in WooCommerce or add new options, you’ll need to either use a plugin or manually edit your active theme. As you might expect, the plugin route is a much simpler option.
How You Can Use Custom Product Tabs for WooCommerce
Product tabs are an essential part of most online shops. If you check out your favorite store, you’ll probably notice that each product includes several tabs that differ depending on the item. This is because not every product will benefit from a single tab.
For example, let’s say you sell electronics and clothing. It might make sense for electronics to have a product tab describing specifications about voltage and protection. Meanwhile, for clothing, you may want to display a size guide.
By default, WooCommerce only includes product tabs for description, additional information, and reviews:
Whether or not these product tabs appear depends on your theme. In any case, there is a good chance that these default tabs will not be sufficient for your store.
Here are some of the things you can achieve when you customize the Products tab in WooCommerce:
- Present specific product information, Every product is unique. Custom tabs can ensure that shoppers have easy access to all the specific information they need, such as Ingredients and Care Instructions, technical specificationsetc.
- Enhance Layout and Aesthetics, Dividing information into tabs helps maintain a clean, well-organized layout. This can make the product page more visually appealing and easier to navigate.
- boost seo, Each custom tab provides an opportunity to include relevant keywords. This can increase the visibility of the product in search engines.
- Add cross-sells and upsells, custom tabs like related product Or You may also like Display other products that customers may be interested in. This can improve user experience and increase average order value, which can increase your income.
The real question isn’t really when it comes to customizing the Products tab in WooCommerce. Why It makes sense to do so, but how. WooCommerce doesn’t include tab customization options and it can be complicated to modify your theme’s code to include the new sections. That’s where plugins come in.
How to set up custom product tabs for WooCommerce in three steps
For this tutorial, we are going to use the Sparks for WooCommerce plugin. Sparx adds a number of new features to WooCommerce, including options to set up ‘wishlist’ functionality, show product variations, use the announcement bar, and more. And Customize a Product Tab in WooCommerce.
Sparks lets you set up a global product tab that applies to all products. Or, you can set up rules to only display a certain tab on specific products.
To control all the content in your custom product tab, you can use the native WordPress block editor (aka Gutenberg).
To proceed, you must first sign up for the Sparks plan. After that, install and activate the plugin. Then, you’re ready to go!
Step 1: Create a Global Product Tab
The first step is to create a global product tab. To do this, go to Settings > Sparks and click Active Below Product Tab Manager Option:
After activating that setting go to WooCommerce > Products tab, This page will show you a list of the default product tabs in WooCommerce. just click add new To create a new tab:
This will then open the block editor, allowing you to customize your new tab. Keep in mind that, by default, any tabs you add using Sparks are global. This means that it will appear for every product in your store unless you change its default setting.
Step 2: Customize the New Tab Using the Block Editor
Sparks enables you to create and customize product tabs using the block editor. When you add a new tab, you’ll have the option of setting a title and adding blocks to it:
For our new tab, we’ll set up a size guide. This product tab option is perfect for any online clothing store:
What kind of tab you make is up to you. Since you have access to the block editor, you can use any of the base WooCommerce blocks or custom blocks available on your website.
Note that any tabs you create will appear next to the default WooCommerce options. However, you can change the tab order, which we’ll show you how to do in a minute.
Here’s a quick look at what our new Products tab looks like, built using Sparks:
You’ll notice that the style of the new tab matches the rest of the product page. If you want to make changes to the design, you can always use the style rules in the block editor.
Also note that you can include as many blocks as you want in each custom tab. However, we recommend that you do not overload the tab with too many elements. You don’t want to deviate from the basic information.
When you’ve finished editing the tab, click To publish button. now, when you come back WooCommerce > Products tab screen, you will see new tab with default WooCommerce options:
Sparks enables you to edit custom tabs at any time. But keep in mind that you cannot change the default WooCommerce tabs. This shouldn’t be a problem though, as the default tabs are useful for almost every type of online store.
Step 3: Configure which products display custom tabs
By default, any tabs you add using Sparks will appear for each WooCommerce product, at the top of the default options. However, the plugin also lets you change this. You can configure tabs so that they only appear for specific products.
This can be useful if you create custom tabs that don’t apply to every product type. For example, you may want to set up unique size guide Tabs for different types of clothing. Sparx gives you complete control over this aspect of your store by trusting the product categories,
To configure which products your custom tabs display, return to WooCommerce > Products tab Page. then, select edit Select the option under the Products tab that you want to customize.
This will open the block editor for that tab. once there, go to product tab section under Page Settings in your right hand menu. search for categories List at the bottom of the tab:
Next, select the product categories for which you want the custom tab to be displayed. Keep in mind, you can select as many categories as you want. Once you are happy with your selection, click on Updates button to save your work.
now, return to WooCommerce > Products tab page and select sorting out, Using this option, you can change the order in which tabs are displayed on product pages:
To change the tab order, drag and drop items until you’re satisfied with the results.
Remember that product order does not affect the visibility settings you configure for each tab. Meaning, if a tab is in the first order but is set to be displayed only for specific product categories, it will not be shown for any other type of product.
Create your custom product tabs for WooCommerce today
WooCommerce allows you to convert your WordPress website into an ecommerce platform. However, its default product tabs are a bit limited.
Luckily, when you use a plugin like Sparks for WooCommerce, you can easily set up custom product tabs for WooCommerce. It also enables you to add Wishlist functionality, display product variations, and more.
Here’s how you can add and customize the Products tab in WooCommerce using Sparks:
- Create a Global Products tab.
- Customize the new tab using the block editor.
- Configure which products the custom tab displays.
