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

Thank you for your purchase!

We are committed to a policy of fair-trading and we shall make every effort to ensure that you are happy with our products and services. We invite you to review the following terms that will apply to any order you place with us and if you find yourself unable to agree to them, then you must contact Joobi support for further clarification.

  • Refund Policy: All purchases made through Joobi store are final and there are no refunds. Joobi uses "evaluate before you buy" approach (30 days trial), we do NOT issue refunds after a membership is purchased.
  • Support Policy
  • Terms of Use
Note: Your subscription is renewed automatically at the end of the initial period, and the recurring payment will be made with the payment method you used to sign up. You can cancel the subscription at any time via Paypal.

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