J2Commerce Documentation
DownloadExtensions
  • Welcome to J2Commerce
  • Getting Started
    • Introduction to J2Commerce
    • Getting started with J2Commerce
    • Technical Requirements
    • Installation
    • Update
    • Upgrade from FREE version to PRO version of J2Commerce
  • Migrating from J2Store 3 to 4 3 to 4
  • Set up
    • Content plugin settings
    • Configuration
    • Currency
    • Custom fields
    • Set up multi-currency
  • Quickstart guide
  • Product Types
    • Simple product
    • Variable product
    • Configurable product
    • Flexible variable product
    • Downloadable product
  • Layout
    • Products List View
    • Products Tag View
    • Usecases
    • Category Tree for displaying filters
    • Special module positions
  • Catalog
    • Assigning a product to multiple categories
    • Product Description
    • Short codes
    • Adding specifications to your products
    • Advanced Pricing
    • Setting up tax for your products
    • Options
      • Import product options
      • How to create options and add them to your products
    • Filters
      • Product filters
      • Translating filters to your language
    • Manufacturers
    • Vendors
    • Adding related products
    • Ordering products on your storefront
  • Subscriptions and Memberships
    • Introduction to subscriptions and memberships in J2Commerce
    • Quickstart
    • Requirements and Installation
    • Basic Settings
    • Creating subscription based products
    • Simple Subscription Product
    • Paypal Reference Transactions for Subscriptions
    • Usecases
    • Customizing the subscription mail templates
    • Frequently Asked Questions
  • Partial Payments
    • Introduction to Partial payments
    • Basic Settings
    • Setting up plans for Partial Payments
    • Instances
    • Usecases
  • Booking and Reservations
    • Limitation of the booking products type
    • Requirements and Installation
    • Basic settings and Booking Management
    • Booking and Reservations
    • Creating a Bookable Product
    • how to restrict multiple booking for a product person based restriction
    • Usecases
  • Localisation
  • Translation
    • Translate J2Commerce into your language
    • Setting up the store in your Language
    • How to write language override for plugin in multilingual site
    • Language overrides in Joomla with examples
    • Translating Product Options
  • Design
    • Email templates
    • Invoice Template (Pro Feature)
  • Tax configuration
    • Untitled
    • Recommended Tax configuration for US States
    • Recommended Tax configuration for Canadian Stores
    • Recommended Tax Configuration for EU stores
    • Setting up European VAT Rules for selling Physical Goods with J2store
    • A simplified guide for New EU VAT rules 2015 for digital goods and setting them up in J2Store
    • How Tax is Calculated
  • Easy Checkout
    • Easy checkout
    • Trouble shooting issues
  • Shipping methods
    • Free Shipping
      • How to create coupons for free shipping
    • How to set up local store pick up shipping method
    • Australia post shipping plugin
    • Bring shipping plugin
    • Canadapost shipping plugin
    • FedEx shipping plugin
    • Purolator
    • Postal Code shipping plugin
    • Royal Mail Shipping
    • Standard shipping methods
    • Table Rate Shipping
    • UPS Shipping
    • USPS Shipping
    • United States postal service Shipping Plugin
    • USPS Advanced
  • Payment Methods
    • AliPay Payment Plugin
    • Authorize.Net plugin
    • Bank Transfer
    • Barclays Payment plugin
    • Braintree payment plugin
    • Cash on Delivery
    • CardSave Payment plugin
    • CCAvenue payment plugin
    • CECA Payment
    • Checkout fi¨
    • Culqi Payment
    • DIBS payment plugin
    • Direcpay Payment Plugin
    • EBS Payment Plugin
    • Elavon Coverage/Virtual Merchant Payment Plugin
    • eway Payment Gateway for j2store
    • First Data Plugin
    • Flo2Cash for J2Store
    • GestPay
    • Heartland Payment Plugin
    • Icepay Payment Plugin
    • Interpay
    • Klarna Payment Plugin
    • Mollie payment plugin
    • Money Order
    • Moneris eselectplus Hosted Paypage
    • MultiSafe Payment Plugin
    • Nochex Payment Plugin
    • NMI Payment Gateway
    • Ogone Payment plugin
    • Pagseguro Payment plugin
    • Paybox Payment plugin
    • Payeezy
    • Payfast Payment plugin
    • Paygate Payment
    • Paymate
    • Paypal Sandbox
    • Paypal Adavnced Payment plugin
    • Payment Express for J2Store
    • Payment Sense
    • Paypal Express Checkout
    • Paypal payment plugin
    • Paypal Pro Payment Plugin
    • Payseal Payment Plugin
    • Paysera Payment Plugin
    • Payson Payment Plugin
    • Payson Invoice Payment Plugin
    • Pay U Latam
    • PayUMoney plugin
    • Poli Payment Plugin
    • Post Finance
    • QuickPay
    • Razorpay
    • Rabobank Omnikassa
    • RealEx Payment Plugin
    • Redsys/Servired/Sermepa Payment Plugin
    • Sagepay Form Payment Plugin
    • Secure Trading Plugin
    • Sepa Payment
    • Sisow Payment for J2Store
    • Skrill Payment Plugin
    • Sofort Banking
    • Stripe
    • Squareup Payments
    • Tranzila Payment Plugin
    • USAePay Payment Plugin
    • Voguepay Payment Plugin
    • Worldpay Payment Plugin
    • 2Checkout Plugin
  • Sales
    • Coupons
    • Vouchers
    • Customers
    • Orders
  • Report Sales
  • Modules
    • Product search module
    • J2store Detailed Cart
    • Product categories module
    • Product display module
  • Apps
    • Add to user group
    • Additional fee
    • Ask question / quote
    • Availability-notification
    • Bundled Products
    • Bulk discounts
    • Change Password
    • Checkout Redirect
    • Custom Tabs
    • Data validation
    • Donation
    • Drop-box
    • Email basket Plugin
      • Email basket issues
    • GDPR compliance
    • Google-analytics-ecommerce-tracking
    • Group Products
    • How to send download links through email notifications
    • Image Popup
    • Invoice Prefix Generator
    • Open hours (time based restriction)
    • Pay later/Pay against invoice
    • Points and Rewards
    • Re-Order
    • Shipstation
    • Simple CSV import and export tool
    • Tax Utilities
    • Upload file in checkout
    • Quantity dropdown
  • Frequently Asked Questions
    • Where can i find my sub-template
    • Products not aligned properly on list view
    • SCA support for payment plugins
    • To show the base price instead of price range in flexivariable products
    • Where do I add the CSS on my site
    • Unable to save the settings in any app
    • Difference between product types
    • Commonly found issues
    • Frequently Asked Questions
    • Quantity Restriction
  • Troubleshooting Guide
    • Products not visible on storefront
    • Cart not Working
    • Troubleshooting Cart related Issues
    • Moving the description
    • Troubleshooting Checkout Issues
    • Troubleshooting Common Issues
    • How to disable shipping address and payment in checkout
    • Joomla Article Error decoding json data
    • Troubleshooting Email Issues
    • Troubleshooting Paypal related Issues
    • Troubleshooting Product Display Module Issues
    • How to create a custom thank you message
    • Troubleshooting Shipping Issues
    • Troubleshooting Tax Issues
    • Troubleshooting Translate related Issues
  • Common Overrides
    • To add options to downloadable products
    • Moving additional image list to the left of the main image in product view page
    • To display the UPCE/BAN/ISBN on the product page
    • To Display Both the main Image and the additional image in the product view page
  • Video Tutorials
    • Quick Start
    • Catalog Management
    • Subscriptions
    • Booking and Reservation
    • Partial Payments
    • Tax
    • Shipping Methods
    • Discounts
    • Language
    • Apps
    • Email and Invoice Template
    • Checkout and Payment
    • Sales and Orders
    • J2Store CPanel
  • General
    • How to set cron job on your server
    • How to create an FTP account and super user account in Joomla
  • Developer Guide
    • Introduction
    • Queue System
    • App for J2store
    • Sub-templates
    • Creating an integration plugin for your component
    • Payment plugin
    • Templates
  • Canonical URL Plugin
Powered by GitBook
On this page
  • Introduction
  • How variable products work:
  • When to use Variable product type:
  • Disadvantage of Variable Product Type:
  • How can I overcome this disadvantage ?
  • Creating a variable product
  • General
  • Images
  • Variants
  • Filters
  • Relations
  • A step-by-step guide to creating a variable product
  • Creating an Article
  • General
  • Images
  • Variants
  • Filters
  • Relations
  • Apps
  • Video Tutorial:
  1. Product Types

Variable product

Introduction

Variable is a complex product type. It lets you define variations of a product where each variant may have different attributes, e.g. SKU, price and stock level.

Since this is a complex product type, it might take some time (quite some time) to create it. You will need a lot of patience and also require quite some work. So be prepared.

A perfect example for a variable product is: T-shirts. T-shirts always come with a size and colour combination. Example: Small-Blue, Small-Red, Small-Green.

You will be adding a price, SKU and stock PER combination.

NOTE: If your product does not require a combination or stock / price management for each variation, then a simple product will suit your requirements.

How variable products work:

Variable type product uses a Matrix algorithm to generate combinations.

Example:

Say you have two options: Size, Colour

Size has: Small, Medium

Colour has: Red, Blue

This forms a 2x2 matrix - 4 possible combinations

Small - Red

Small - Blue

Medium - Red

Medium - Blue

If we add just one more size (Large) and one more colour (Green), this will make a 3x3 matrix - meaning 9 combinations

When to use Variable product type:

  • Only when you want to manage inventory at the variant level. Example: You want to maintain a stock for Small - Blue, Small - Red. (As you can see, when you sell a T-Shirt, you naturally maintain the stock based on the Size and the Colour… you cannot maintain an inventory just by Size or Colour)

  • Only when you want to set different prices for different variants (Example: Small - Blue costs $10, Medium - Red costs $15)

Disadvantage of Variable Product Type:

When you change any option values or want to introduce a new variant, then entire combination (matrix) changes. So you will have to re-generate the entire variants, and set the prices.

How can I overcome this disadvantage ?

As the name suggests, it is very flexible and is based on the cartesian set algorithm. So you can add, remove a variant anytime without re-generating the entire combinations.

Creating a variable product

General

  • Visible in Storefront: First, select whether the product is to be displayed in front of the store. If it is, set the option to ‘Yes’

  • Brand or Manufacturer: Select the brand or manufacturer of the product from the available list

  • Vendor: Select the vendor from whom the product is available for purchase - This is J2Commerce PRO feature

  • Tax Profile: Specify whether the product is taxable, and if it is, select the tax profile relevant to the product

  • Cart button text: The unique text for the cart button could be mentioned here.

Images

This feature is available for native Joomla articles and in J2Commerce Product Layouts

To display the thumbnail, main and additional images in Joomla articles, you should first configure the Content - J2Commerce plugin in Plugin Manager. Otherwise, you won't see these images in your products.

Let's assume that a customer would like to purchase a car. Now, car images need to be loaded in this tab.

  • Main Image: The main image will be a general photo image of the car, which has to be uploaded by clicking on the ‘Select an image’ button and selecting the appropriate image from the files.

  • Thumbnail Image: The thumbnail image would be something that represents the original product, but it would be a much smaller one to fit into a button, which will be shown in the cart. By seeing this, the customer will understand that his product is displayed on the button and will click the button to see more details about the car.

  • Additional Images: Additional images help the customer to know more details about the car, which will show the car view from many angles, and the customer will understand it clearly how it looks, what the technical details of the car are, the colour, and so on.

Variants

Variants are products of the same type and nature but with different attributes. For e.g., consider a Laptop of a particular brand with certain attributes, say

  • Colour - Metallic Grey

  • Screen - 15.6 inches

  • RAM - 2 GB

  • HDD - 500 GB

  • SKU - MTG8620

and so on. This is a variant of the particular brand. Now, the same product with the same brand will be another variant with some attributes changed, like

  • Colour - Black

  • Screen - 15.6 inches

  • RAM - 2 GB

  • HDD - 500 GB

  • SKU - BLK8640

For both the items, the brand and model name may be the same, but the attributes like colour and SKU differ. These are two variants of a particular laptop brand.

  • A variant defines how this product differs from other products of the same type

  • It may be SKU no, price, stock level or colour

Let's discuss it with some image illustrations:

If you select ‘Size’ from the list, your screen will look like this:

You can see the option you have selected from the list added below. Now, SAVE the form to proceed.

You can see ’Set Values’ near the option name Size and click it. You will get a pop-up window to add attributes as illustrated below:

Once you are done, save changes and close the pop-up window to get back to the main window. Now you have set the values for the variants to be generated. Why wait? Just go and generate the variants like this:

The button you have clicked for variant generation will adjust itself to show you a message, ‘Generating variants… " Please wait.

And that’s it. You have your variants generated! Wonder how? Just check the image below for a surprise…

If you want to edit the properties of the variants, click the open all button, and you will get a screen like below:

Now you know how to deal with variants, options, attributes, properties and how to edit them.

Filters

Filters are certain attributes that help narrow the search of a particular product.

For e.g., assume that a customer searches for purple t-shirts in the store. Now, the product filter is set as colour > purple, to narrow the search. See the image below:

Now the cart will display only the purple t-shirts.

Relations

  • In this tab page, relations are set for Upsells and Cross-sells

  • An upsell is to get the customer to spend more money – buy a more expensive model of the same type of product considered for purchase.

  • A cross-sell is to get the customer to spend more money by adding more products from other categories, additionally, along with the product intended for purchase.

  • Example: The terms cross-sell and upsell are often used interchangeably because, let’s face it, this gets confusing. Say the customer is viewing a Laptop with 2GB/500GB for $500.4GB/500GB-> $550 - Upsell, same product family, more expensive4GB/1TB -> $700 - Upsell, same product family, more expensive. Laptop Bag -> $25 - Cross-sell, related product, additional sell

Custom fields / settings from applications will be displayed in this tab.

A step-by-step guide to creating a variable product

J2Commerce implements an innovative concept in creating products. It uses the Joomla articles as products. So, to create a product is to create an article.

So, let's create an article.

Creating an Article

Have a look at the image below:

As given in the above illustration, click in the top menu or in the left pane of the control panel. You will get a new screen like this.

  • Enter the name of your product.

  • Since you are creating an article, you need to tell that the article should be treated as a product. So, select ‘Yes’.

  • Select the type of product, i.e., ‘Variable’.

  • Now, click the ‘Save and Continue’ button.

Your product is successfully created, and a message will be displayed like this.

General

Now you need to configure your product with the necessary details. Begin with the general tab.

  • If you select ‘Yes’ in the first option, your product will be displayed in the storefront

  • Select the brand or manufacturer of the product from the list

  • Select the vendor to order the product

  • Select the tax profile that matches the product profile

Now switch to the Images tab.

Images

You can add main, thumbnail, and additional images relevant to your product in this tab. Click the ‘select an image’ button to get a pop-up window to select the image.

Move on to the variants tab.

Variants

If you select the option, then you need to set values for the option.

In the image, as you can see, you have added the option size. Now, save the configuration by clicking ONLY the red coloured button ‘Save’. DO NOT press any other button. Now, see the changes in the screen.

You can see the blue link, ‘Set Values’, adjacent to the option ‘Color’. Click this link to set some values for the option ‘Color’. Then only you can generate variants. Go ahead with setting values and see what happens…

If you select the value for the option and click the create button, you will get the resulting screen like this.

Close the window using the X in the top right corner and return to the tabs.

Now, as shown in the image, click on the ‘Generate Variants’, a green colored button, to generate variants for the products.

As you click the buttons to generate variants, the buttons adjust themselves to display the message ‘Generating variants… please wait’. Now it's done. See the variants listed below, as shown in the image.

Once the variants are generated, you can edit the variants and add necessary details to them. When you edit a variant, you will have all the tabs in cart except the variant tab. Fill in the required details for each product variant. Don't forget to save your changes.

Having completed the variants tab, now move on to the filter tab.

Filters

Here, you can set the filters to narrow product search. When you set the filter value as ‘Mens’, all men's T-Shirts will be displayed. Likewise, women and kids. See the illustration below:

Relations

The next tab is Relations. Here, you can add products of higher value than the one being viewed by the customer and recommend the customer to buy that product, citing its advantages and additional features. This is an upsell.

Also, you can add some other products to convince the customer to buy these products additionally. This is cross-selling.

For a more detailed explanation, refer to the Relations section of the Variable Product.

Apps

In this tab, you can add third-party tools or plugins that are available to enhance the J2Store functionality, like adding additional fields, applications, functions, or features.

Now, let's have a look at how your product is viewed in your online store. Check the image below:

Video Tutorial:

Here is a video that could help you create a product with variants:

To know how to manage inventory for variable products, follow the instructions given here:

PreviousSimple productNextConfigurable product

Last updated 2 days ago

In the latest versions of J2Commerce, we introduced a new product type :

Setting option values
Article manager
Choosing product type
success message for creating variable product
Select images
Set values
Set option values
Relations
Frontend view
Flexible variable product
General tab
Adding images
Adding variants
Saving variants
Click on set option values
List of variants
Open all variants
Filters
Relations
General tab
Images
Variants
Variants of product
Variants creation
Generate variants
Generating variants
Generated variants list
Editing variants
Filters
Apps section