OpenCart Custom Tabs For Products

When you are selling a product online, you need to display the information in a way that people will find them easily and also improve the user experience.

Now you can also display product information such as technical, physical specification, return policy, etc in their own tabs so that product information remains organised with the help of OpenCart product custom tabs module.

Use this module to create extra tabs on the product page. Admin can create as many extra tabs for the product page as required. Also, the admin can write the title of each tab.

Our module is compatible with OpenCart versions 2x, 3x and 4x. Also compatible with the multi-language. You can enter the information in all the languages installed on the website. Whenever a customer changes the language, the content of custom tabs also shows the same language.

Installation of OpenCart Product Extra tabs Module

OpenCart follows the same process for the installation and activation of all extensions. We are going to talk about two methods of installation. The easiest way is to upload the extension to the admin panel. The next steps are the same for both methods of installation. Let’s start with the first and easy one.

Through Admin

It is the easiest method to install the module. Login to the website admin panel.

extension installer page of opencart

Navigate To Extension > Extension installer. Upload the OpenCart custom tabs module zip file that you have downloaded from the website.

Wait for the module installation success message in yellow coloured.

Now move to Activate the Module From the Admin Section

Using FTP or CPanel

It is a harder method of extension installation. It requires technical knowledge. Anything that goes wrong will make your website in parts and show errors. Be careful while proceeding to the next steps. As we are going to place the extension files into the website files.

Extract the module files

Extract the downloaded module zip file using any extraction software like WinZip, 7zip, windows inbuilt extractor, etc. After the extraction, you will have the module folder.

Follow these steps if you are going to use FTP or CPANEl

For FTP Connection:
filezilla website connection

Use secure software like FileZilla, and CuteFTP. This software makes the connection btw you and the website secure and reliable.

For CPanel Connection
cpanel file manager

You can open the Cpanel of your website by visiting https://www.yourwebsite/cpanel or https://www.yourwebsite:2083 or https://IP/cpanel

Now navigate to File Manager> public_html or www folder. You will see your website OpenCart files are present. Now follow the steps below.

  1. Open the module extracted folder
  2. Now check the file structure of the module, and place that file, into your website file. Be sure, you must not replace any file. Also, be careful to follow the same file structure as the module. Else, the module will not work.
  3. Now double-check that all the modules files are placed correctly.
  4. Move to Activate the Module From the Admin Section

Activate the Module From the Admin Section

The next step is checking whether our module is displaying on the module list page or not.

tmd custom tab module displaying in opencart extension list a page

Navigate to Extension > Modules. Here select the module in the drop-down list. You will see all the modules present in the list. Our module is displayed here too.

It’s time to activate the module. click on the green coloured button to install the module. Wait for a few seconds. The module will install and activate on the website.

It’s time to do setting up product custom tabs so that we will use them on the product page.

Guide to Configure the OpenCart Custom Tabs Extension

We are going to configure the custom tabs for the products. You can create multiple extra tabs for specific products, categories, and manufacturers. It will give you more flexibility to show your data according to your products.

Let’s start the configuration.

On the left menu list, you will find the Custom Tabs. Click on this menu. You will land on a list of extra tabs you have created so far. All the tabs will show here.

opencart-custom tabs list showing in admin

Creating a New Extra/Custom Tab

It takes only a few minutes to create a new tab in the TMD OpenCart product extra tab module. You can add the tab title, description, attach to products add sort order etc. Follow the below steps to create a new Product custom tab.

Navigate to the Custom Tab menu. On the extra tabs list page. A blue-coloured “+” button is at the page’s top-right corner.

You will land on the new custom tab form, First one is

General information

admin writing title and description in OpenCart product extra tabs

Title: It will be used to identify the custom tabs section in the product edit section. It must be unique.

Description: You can write the information that’s related to the tab. It is just for internal use. Visitors or customers won’t be able to see the description or title.

Next Step

selecting status and sort order of product extra tabs  in opencart

Status: It is used to activate and hide the custom tab. Enable value indicates the custom is working, and should show on the product page. Disable value tells the module to this custom tab is no longer in use and hence makes hide it from everywhere.

Sort: It takes the natural number. When there are multiple custom tabs created and assigned to the product. This value will tell the module to show custom tabs in the same order as defined in the sort.

Link

attaching custom tabs to product manufacturer catgeories in opencart

You are almost ready with the custom tab, It’s time to attach it to products. So that you will find this extra tab in the product edit section. There are three ways p Product, categories, and manufacturer selection. Follow the steps below.

Products: Select the individual products. Just type the name of the product. The matching product will show in the drop-down. Select the product. You can select one or multiple products.

Category: It follows the same behaviour as OpenCart, All the products linked with selected categories will have this custom tab. It saves you time when you have a large inventory and you want to have custom tabs for products.

Manufacturer: It is the same as categories. You can select one or multiple manufacturers. Products having the same manufacturer will automatically be assigned this custom tab.

Setting

setting of product extra tab in opencart

The setting allows various kinds of options like who can see the product extra tab, hide on devices, and customer group to store selection. You can use the setting to create various conditional custom tabs.

Device to hide: You can show or hide the particular custom tab on tablet, mobile, and desktop. For example, the custom tab will show when the website is accessed through mobile devices, and tablets and hide on desktop. Or you can hide or show on all devices, any two or a single device.

Customer Type: Sometimes we must show detailed information to our customers only. Visitors won’t access that information. You can do so by selecting the customer. It will hide the custom tab on the product whenever a non-customer that is a visitor access the product page. You can do vice versa too.

If you like to show the custom tab to both, then select the customer and visitor in the setting.

Customer group: This setting makes the custom tab show only those logged in a customer whose customer group is matching with selected customer groups. This module will automatically detect the customer group of logged-in customers.

All the customer groups will show in the setting. Just select those for whom you want this product extra tab on the OpenCart website.

Store: This module supports the multistore feature of OpenCart. If you are not running the multistore, you must select the default. Nothing else to do. Else, select stores from the list that will display this extra tab on their product page.

Delete The existing Product Extra Tabs In OpenCart

You can select the individual tab and many tabs together.

All you have to do is click on the checkbox displaying before the tab title and hit the delete button located at the top right corner after the Create new tab button. The selected extra tabs will be deleted.

NOTE: Deleting the tabs will get de-attached from the products. And tabs won’t show on the product page anymore. The data you have written on the tabs on the product page will be lost. If you like to take the backup the of content, please do so before deleting the tabs.

Edit Existing Custom Tabs

When a tab is created successfully. You will edit them later. To edit the extra tabs follow these steps.

Navigate to Custom Tabs Menu. You will see a list of all tabs listed here.

In the list, you will see the blue-coloured edit button with every tab. Just press the edit button that you want to edit that extra tab.

It will open the custom tabs detail page, All the fields data will be populated automatically. You can update the data. Press the save button. It will update the tab setting.

Adding multiple Custom Tabs on the Product in OpenCart

This extension gives you the feature to add as many custom tabs on the product. The process is the same for adding tabs. See below

adding extra tabs in product custom tab opencart modul

Go to the product list page > Edit the product that is attached to the custom tab.

  1. Select the Custom tab.
  2. Click on Add Tab button. It will add the custom tab 0 just above the Add Tab button. If you like to add more custom tabs, then click the Add Tab button that time.
  3. Now Click custom tab 0. You will see the title description, status and sort order. This is the custom tab that is going to display on the product page.
  4. Enter the title and write the description, and if you have more than 1 custom tab on the product page. Then you can write the number. The module will take the number to display the custom tabs on the OpenCart product page.
  5. Status tells the module to either the custom tab should show or hide. Enable == show and disable == hide
  6. Save the product.

Creating the Custom tab process is completed. Now we can check it on the product page.

Its time to see the Custom Tab on the Product Page

Navigate to your website front-end. Find the product that you edited and fill in the custom tabs information. Go to a product detail page.

Scroll down to the description section. You will see the custom tabs displayed after the review.

The custom tab has the same name as you had entered in the title. Select the custom tab title, and it will show the description. Extra tabs will show on the product page in the same order as you mentioned in the sort order.

Final Thought

OpenCart product extra tabs module get ride of constraint of fixed tabs on product page. You can have additional tabs on product page and show the more information in systmatic way.

If you have facing any issue, feel free to create a ticket, our support team will assist you.

We have created more then 250+ modules and 30+ themes. You check our our OpenCart Extensions may be you find useful extension for your website.

Leave a Reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.