This article explains how to create a product tabs with custom fields.

Step 1 Creating a product custom fields

  • Navigate to any [Joobi product that you are using] in the Catalog >> Fields or Tools menu >> Models & Fields
  • From the Fields page, click New to create a field.
  • From the field creation page, fill in all required option according to your requirements

Name: Name of the field which will be displayed to the user.
Column: Optional, the name of the field in the database.
Description: A description to explain the field. The description will be showed to the user.
Type: Choose the type of field you want to create.

  • Text
  • Translated Text (This text will be translatable to other available language in your site)
  • Text-area
  • Translated Tex-area (This text-area will be translatable to other available language in your site)
  • Pick-list
  • Date
  • Date & Time
  • Yes/No
  • Link
  • Number
  • Percentage
  • Publish
  • Email
  • Password
  • Yes/No Reversed

View Access: Define the required access to view the field.
Edit Access: Define the required access to edit the field.
Searchable: Define if the field should be searchable.
Advance Search: Define if the field can be searchable with the advance search functionality.
Required: Define if the field should be required.
Publish: Enable to publish or unpublish the field from all views.

fields-product

field-new-product

Step 2 Edit product page view to edit an existing container or add new ones

  • From the edit field page, click "eye icon" to edit the view next to "Product Page" under Assignment section

field-view-eye

  • Locate "Description" and change the "type" from Widget box to Tab Container.

description-tab-view

  • From the same page, click "New" to create a new elements which will be your new Tab or edit the existing elements available for instance 'Fields"

form-elements-view

  • Specify "Tab Container" and "Middle Center" as area
  • From the Attributes tab, specify "Use as Parent"
  • Click save once you are done

attributes-field-view

Important

  • Ensure that the elements are ordered properly and has the same "Type" which is Tab Container, otherwise it will only hide the view in the storefront. Refer below image;
  • You cannot assign "Description" in the Widgetbox position while the Fields/Tabs are in the Tab Container.

elements-order-view

Step 3 - Assign the "Container" you just created in Step 2

Note that you can assign the field to show on specific product type pages only.

  • From the fields edition page step 1, navigate to Assignment section and assign the new container you've just created in step 2

license-tab-edit

Step 4 Edit your product

From the catalog area, locate the product that you want to edit with the new field to show in tab

product-tab-fe-show

Product tab looks like this in the storefront;

field-tab-fe-show

Friendly Reminder

Joobi uses "evaluate before you buy" approach, we do NOT issue refunds after a subscription is purchased.
All basic plan (3 months) includes a back-link to Joobi.org

We invite you to:

Use the 30 days trial period before buying
Test-drive Joobi products using the demo website
For Mobile apps, check our iOS and Android demo

joobi-custom-service

Web Hosting Partner

Web Hosting     DreamHost