In this article, we’ll discuss some example use cases for custom product tabs<\/a> for WooCommerce. Then, we’ll show you step-by-step how to set up 100% custom tabs<\/a> using the Sparks for WooCommerce plugin.<\/p>\n<\/div>\n\n\n\n Product tabs are an essential part of most online shops. If you check your favorite stores, you’ll probably notice each product includes multiple tabs that vary, depending on the item. That’s because not every product will benefit from the same tabs.<\/p>\n\n\n\n For example, let’s say you sell electronics and clothing. It might make sense for electronics to have a product tab describing specifics about voltage and safety. Meanwhile, for clothes, you may want to display a size guide.<\/p>\n\n\n\n By default, WooCommerce only includes product tabs for a description, additional information, and reviews:<\/p>\n\n\n Whether these product tabs appear can depend on your theme. In any case, there’s a good chance that these default tabs won’t be enough for your store.<\/p>\n\n\n\n Here are a few things you can achieve when you customize product tabs in WooCommerce:<\/p>\n\n\n\n The real question when it comes to customizing product tabs in WooCommerce isn’t really why<\/em> it makes sense to do so, but how. WooCommerce doesn’t include tab customization options and tweaking your theme’s code to include new sections can be complicated. That’s where plugins come in.<\/p>\n\n\n For this tutorial, we’re going to use the Sparks for WooCommerce plugin<\/a>. Sparks adds several new features to WooCommerce, including the options to set up ‘wishlist’ functionality, show product variations, use announcement bars, and <\/em>customize a product tab in WooCommerce.<\/p>\n\n\n\n Sparks lets you set up global product tabs that apply to all products. Or, you can set up rules to only display a certain tab on specific products.<\/p>\n\n\n\n To control all of the content in your custom product tabs, you can use the native WordPress Block Editor (AKA Gutenberg<\/a>).<\/p>\n\n\n\n To follow along, you’ll first need to \ud83d\udc49 sign up for a Sparks plan<\/a>. After that, install and activate the plugin. Then, you’re ready to go!<\/p>\n\n\n\n The first step is to create a global product tab. To do this, go to Settings > Sparks <\/em><\/strong>and click on Activate <\/em><\/strong>under the Product Tabs Manager <\/em><\/strong>option:<\/p>\n\n\n After activating that setting, go to WooCommerce > Product Tabs<\/em><\/strong>. This page will show you a list of the default product tabs in WooCommerce. Just click on Add New <\/em><\/strong>to create a new tab:<\/p>\n\n\n This will then open the Block Editor, enabling you to customize your new tab. Keep in mind that, by default, any tab you add using Sparks is global. That means it will appear for every product in your store unless you change its default settings.<\/p>\n\n\n Sparks enables you to create and customize product tabs using the Block Editor. When you add a new tab, you’ll get the option to set a title and start adding blocks to it:<\/p>\n\n\n For our new tab, we’ll set up a size guide. This product tab option is perfect for any online clothing store:<\/p>\n\n\n What kind of tab you create is up to you. Since you have access to the Block Editor, you can use any base WooCommerce blocks<\/a> or custom blocks available on your website.<\/p>\n\n\n\n Note that any tab 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.<\/p>\n\n\n\n Here’s a quick look at what our new product tab created using Sparks looks like:<\/p>\n\n\n You’ll see that the new tab’s style matches the rest of the product page. If you want to tweak the design, you can always use the style rules in the Block Editor.<\/p>\n\n\n\n Also note that you can include as many blocks as you want in each custom tab. However, we recommend you don’t overload tabs with too many elements. You won’t want to distract from the core information.<\/p>\n\n\n\n When you’re done editing the tab, click on the Publish <\/em><\/strong>button. Now, when you return to the WooCommerce > Product Tabs <\/em><\/strong>screen, you’ll see the new tab alongside the default WooCommerce options:<\/p>\n\n\n Sparks enables you to edit custom tabs at any time. But keep in mind that you can’t change the default WooCommerce tabs. That shouldn’t be a problem though, as the default tabs are useful for almost every type of online store.<\/p>\n\n\n By default, every tab you add using Sparks will appear for every WooCommerce product, on top of the default options. However, the plugin also lets you change this. You’re able to configure tabs so they only show for specific products.<\/p>\n\n\n\n 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<\/em> tabs for different types of clothing. Sparks gives you full control over this aspect of your store by relying on product categories<\/a>.<\/p>\n\n\n\n To configure which products display your custom tabs, return to the WooCommerce > Product Tabs <\/em><\/strong>page. Then, select the Edit <\/em><\/strong>option under the product tab you want to customize.<\/p>\n\n\n\n This will open the Block Editor<\/a> for that tab. Once there, go to the Product Tab <\/em><\/strong>section under the page settings in your right-hand menu. Look for the Categories <\/em><\/strong>list at the bottom of the tab:<\/p>\n\n\n Next, select the product categories you want the custom tab to appear for. Keep in mind, you can select as many categories as you want. Once you’re happy with your selections, click on the Update <\/em><\/strong>button to save your work.<\/p>\n\n\n\n Now, return to the WooCommerce > Product Tabs <\/em><\/strong>page and select Sorting<\/em><\/strong>. Using this option, you can change the order in which tabs display on product pages:<\/p>\n\n\n To change the tab order, drag and drop items until you’re satisfied with the results.<\/p>\n\n\n\n Remember that the product order doesn’t affect the visibility settings you configure for each tab. Meaning, if a tab is first in order but only set to appear for specific product categories, it won’t show for any other type of product.<\/p>\n\n\n WooCommerce allows you to transform your WordPress website into an ecommerce platform. However, its default product tabs are a bit limiting.<\/p>\n<\/div>\n\n\n\n Fortunately, you can easily set up custom product tabs when you use a plugin like Sparks for WooCommerce<\/a>. It also enables you to add wishlist functionality, display product variations, and more.<\/p>\n\n\n\n \ud83d\udc49 Here’s how you can add and customize a product tab in WooCommerce using Sparks:<\/p>\n\n\n Do you have any questions about how to set up custom product tabs for WooCommerce? Let’s talk about them in the comments section below!<\/em><\/strong><\/p>\n\n\nHow to use custom product tabs in WooCommerce<\/h2>\n\n\n\n
![\"Default](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/default-product-tabs.png\")
<\/figure><\/div>\n\n\n\n
Set up custom product tabs in WooCommerce in three easy steps<\/h2>\n\n\n\n
\n
Step 1: Create a global product tab \ud83d\udecd\ufe0f<\/h3>\n\n\n\n
![\"Activating](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/activate-products-tab-manager.png\")
<\/figure><\/div>\n\n\n![\"Adding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/add-new-product-tab.png\")
<\/figure><\/div>\n\n\nStep 2: Customize the new tab using the Block Editor \ud83c\udfa8<\/h3>\n\n\n\n
![\"Add](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/new-custom-tab.png\")
<\/figure><\/div>\n\n\n![\"Clothing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/size-guide-woocommerce.png\")
<\/figure><\/div>\n\n\n![\"An](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/woocommerce-product-tab-example.png\")
<\/figure><\/div>\n\n\n![\"A](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/custom-tab-list.png\")
<\/figure><\/div>\n\n\nStep 3: Configure which products display custom tabs \ud83d\udccb<\/h3>\n\n\n\n
![\"Select](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/select-product-categories.png\")
<\/figure><\/div>\n\n\n![\"Sorting](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/sorting-product-tabs.png\")
<\/figure><\/div>\n\n\nConclusion \ud83d\ude80<\/h2>\n\n\n\n
\n