How To Use Product Tabs Manager
Welcome to your Ocean eComm Treasure Box dashboard!
The Product Tabs Manager module of your Ocean eComm Treasure Box (Ocean eCommerce) premium plugin empowers you to manage product tabs for your custom eCommerce website.
The Product Tabs Manager module gives you full control over WooCommerce product tabs and enables you to:
- Reorder product tabs, including default WooCommerce tabs (Description, Reviews, Additional Info),
- Rename product tabs, including default WooCommerce tabs,
- Remove product tabs, including default WooCommerce tabs,
- Create custom product tabs,
- Create WYSIWYG (What You See Is What You Get) product tabs,
- Add global tabs,
- Add individual tabs per product.
Your Ocean eComm Treasure Box Product Tabs Manager even enables you to create tabs content either by using Gutenberg or Elementor!
The Product Tabs Manager feature is available as of Ocean eComm Treasure Box 1.1.0 version.
In this article we will show you how simple it is to:
- Enable Product Tabs Manager,
- Create (Register) a Custom Product Tab,
- Create Custom Product Tab Content (Gutenberg or Elementor),
- Add Custom & WYISWYG Product Tabs per Product.
Enable the Product Tabs Manager Module
To enable and use the Product Tabs Manager feature, navigate to your WP dashboard, open the eCommerce OTB dashboard, and go to the Modules tab.
Click the "cog" icon next to the Product Tabs Manager option to enable.
A modal window with will appear once you click the "cog" icon.
In the modal window you need to use the Modify Tabs "toggle" button to enable the feature, then Save Changes.
After you have enabled the Product Tabs Manager feature, go to your WP dashboard, and under the eCommerce OTB options look for the Product Tabs. If you're not seeing this option, refresh your page.
Now you're ready to create your first custom tab!
Create Custom Product Tabs
To create custom product tabs, navigate to your WP dashboard, eCommerce OTB > Product Tabs.
Create a new product tab by clicking the Add New button. The process of creating a new tab is it exactly the same like when creating any page in WordPress.
When you click the Add New button, and like previously mentioned, the default WordPress editor (Gutenberg) will load.
Give your tab a name (title) and hit Publish.
Congratulations!
You have now registered your first custom product tab!
Now you just need to add the content.
Create Custom Product Tab Content
You can create your custom product tab content using either Gutenberg or Elementor! Or you can have a combination of both!
The process of creating content isn't any different than creating content for any regular page in WordPress. Obviously, you'll add content relevant to your products or tabs.
Now that we know how easy it is to create new custom product tabs and add content, let's learn how to manage tabs.
Manage Global Product Tabs
Global Product Tabs are tabs that are common and will appear on all our products.
To manage global product tabs, navigate to your WP Dashboard, eCommerce OTB > Modules.
Click the "cog" icon next to the Product Tabs Manager to load the tabs manager interface.
Reorder Global Product Tabs
To reorder global product tabs aka change the order of appearance, you simply need to click the tab, drag and drop it wherever you want. Done!
When you're satisfied with the order of your tabs, click Save Changes button.
If we check our product page, we'll notice the order of product tabs has changed and now Product Reviews are in front of the Product Description.
Rename Global Product Tabs
To rename any global product tab, you need to click on the tab you wish to make changes to. Additional options will appear in a form of an expanded menu.
In our example from the image above, we want to rename the global Reviews tab and give it a different name. Let's call it Product Rating instead.
To change a name of a global tab, you need to enter your own title in the Tab Label field.
You will also notice that, as you type, your Reviews tab in the interface is also picking up your custom tab label. This is done in order to avoid confusion and enable you to manage tabs in an intuitive way.
After you rename a tab(s), click Save Changes button.
If we check our product page now, we'll notice the tabs is displaying our custom label for the Reviews tab, which is now called Product Ratings.
Add New Global Product Tabs
To add a new global product tab, first you need to create (register) a custom tab via WP Dashboard, eCommerce OTB > Product Tabs.
After that, navigate to the eCommerce OTB dashboard, Modules tab, and click the "cog" icon next to the Product Tabs Manager to load our interface.
Click the Add Field button to add a new global product tab.
From the Tab area, click on the dropdown box and choose the template for your custom product tab.
These templates are the same ones you created via eCommerce OTB > Product Tabs, except for the default WooCommerce tabs, which are Description, Reviews and Additional Info.
IMPORTANT: Use only 1 (one) template per custom global tab.
Next, in the Tab Label area, type in the name for your custom product tab. This name will be displayed on the single product page.
After all changes have been made, click the Save Changes button.
If we now check our product page, we'll notice that our custom global tab is appearing.
For now, it's not possible to create dynamic global tabs, but we're working on it ;)
Delete Global Product Tabs
To delete (remove) any global product tab, navigate to WP Dashboard, eCommerce OTB dashboard > Modules.
Load the Product Tabs Manager interface by clicking the "cog" icon.
Click the "x" icon next to the tab you want to delete, and Save Changes.
In the example above, we've deleted the default WooCommerce product tab called Additional Information.
When we check our product page, we'll notice the tab is not appearing anymore.
Reset All Custom Product Tabs Settings
If you need to reset your global product tabs settings and quickly make things how they were by default, click the Reset to Default option in the Tabs Manager interface.
You will be prompted with a question to confirm your decision and avoid accidental resets.
To proceed with your decision and reset all options, simply click Yes.
The eCommerce OTB dashboard will reload and bring you back to the Modules tab.
When you click the "cog" icon next to the Product Tabs Manager and load the interface, you'll notice the Product Tabs manager feature is disabled.
If you enable the feature, all default WooCommerce product tabs are displayed only.
In the meantime, if we check our product page (assuming we didn't make any new changes using the Product Tabs Manager), we'll notice that all our global and individual product tabs are no longer displayed.
IMPORTANT: Using the Reset to Default option will reset ALL changes made using the Product Tabs Manager, global product and individual product tabs included. Use this option with precaution (the rhyme is good, but mistakes aren't).
And now that we mentioned individual product tabs, let's show you how you can create add those to your single product pages.
Add Custom Product Tabs per Product
You can assign a custom product tab to any product.
This means that this product tab will not appear on all products (like the global products tabs do), but instead only specific products of your choice.
First you need to create (register) a custom tab via WP Dashboard, eCommerce OTB > Product Tabs, and add content as usual.
After that, navigate to your WP Dashboard, Products > All Products.
Edit the product you want to assign a custom product tab to.
In the Product Data area you will see a new tab called Product Custom Tab.
Click on Product Custom Tab to load the options.
First, click the Add a Tab button to add your tab.
To add a custom product tab, aka a tab template you created via eCommerce OTB > Product Tabs, leave the Tab Source to CPT.
In the Tab Title area type in the title of your custom product tab which will be displayed on the frontend.
From the Tab Content dropdown menu select the template you wish to use. These are the same templates you created via eCommerce OTB > Product Tabs.
In a similar manner, you can add a WYSIWYG tab, you just have to choose the correct Tab Source.
Add your tab title to be displayed on the front end, add text and other relevant information for the product and all done!
Update the Product page and all custom product tabs will be displayed on the frontend.
You can add as many custom or WYSIWYG tabs per product as you like. Likewise, you can change the order of the tabs or remove tabs you no longer wish to use - the choice is entirely yours.
That's it!
Enjoy building your custom eCommerce website with OceanWP and Ocean eComm Treasure Box!