VP Advanced Custom Field is a Custom Field / Cart Attribute / Product Variant extension for VirtueMart. You can add stockable or non-stockable product variants to your VirtueMart products and display then as radio button, checkbox, dropdown list, coloured button, image button etc. The fields created with the extension also support multilingual sites.

Installation

You can download the latest installation packages from our site's download page for VP Advanced Custom Field. If you have an older version of Joomla! or VirtueMart or PHP please check the compatibility section to find the version of VP Advanced Custom Field compatible with your Joomla!, VirtueMart and PHP versions.

All VP Advanced Custom Field installation packages contain the component and all of its associated plugins. Installing it will install all of these items automatically. It can also be used to upgrade/update VP Advanced Custom Field; just install it without uninstalling the previous release.

Uninstallation

You can uninstall the extension just like any other Joomla! extension. In your site's back-end, just go to Extensions Manager, click on Uninstall, select Package - VP Advanced Custom Field and click on Uninstall. This will completely remove VP Advanced Custom Field package including all plugins and database information.

Configuration

Add Set

To start with the extension, you first need to create new sets. A set can be considered at an individual field displayed against your products which can be used alone or in different combinations with other sets. We will discuss this in more detail later.

To add a set, navigate to VP Advanced Custom Field → Sets. Here you can see a list of all available sets in your site. Now click on the New button displayed at the top-left section of the page.

Title

Provide your desired title to the set. Examples: Color, Size, Model etc.

Language Key

Translatable language key for the Title. You can use this to translate the set title in multilingual sites. This is an optional field. When empty, the language key is generated automatically by the system.

Field Type

Select your desired field type from the dropdown list i.e. Drop Down List or Radio Button. Note: Radio Buttons are automatically displayed as Checkboxes when multiple selection option is enabled in the Custom Field settings. This is further explained in Custom Field configuration section.

Attribute Type

Select your desired attribute type from the dropdown list i.e. Text, Color or Image. If Text, only text name can be assigned to individual options. If color, hexadecimal colour code can be assigned to individual options. If image, a image can be assigned to individual options.

Show as Button

This parameter is available only when Field Type is set as Radio Button. If yes, radio buttons (or checkboxes) are displayed as normal button.

Filter Support

If yes, standard String type custom fields are automatically added to the products against selected sets and options when you save your product in VirtueMart. You can use this String type custom field for filtering purpose in your filtering extension. They are marked as 'hidden' so you will not find them shown in your product details page.

Status

Set publication status.

Help Title

Help title is displayed at the bottom of the field. If help description exists, then it is displayed as a link. When the users clicks on the link, help description is shown.

Help Description

Add instructions and any other the field information here. Note: You must enter a Help Title to show Help Description.

Created By

Displays the username of the user who created the set.

Created Date

Displays the date and time when the set was created.

Modified By

Displays the username of the user who last modified the set.

Modified Date

Displays the date and time when the set was last modified.

Add Option

When you have created your sets now you have to add the available options under each sets. Creating an option is extremely straight forward.

To add an option, navigate to VP Advanced Custom Field → Options. Here you can see a list of all available options in your site. You can also filter these list of option by their Set and publication status. Now click on the New button displayed at the top-left section of the page.

Title

Provide your desired title to the option. This is the text which will be displayed against each available variants. Examples: For color type set they can be Black, Green, Model etc. For size type set they can be 32, 34, 36 etc. You can use any desired texts here.

Language Key

Translatable language key for the Title. You can use this to translate the option title in multilingual sites. This is an optional field. When empty, the language key is generated automatically by the system.

Set

Select the Set from the dropdown list under which the option will be added.

Color

This parameter is applicable only if Attribute Type is selected as Color in the Set settings. You can assign your desired Hexadecial color code for the option here.

Image

This parameter is applicable only if Attribute Type is selected as Image in the Set settings. You can assign your desired image file for the option here.

Tick Color

This parameter is applicable only if Field Type is selected as Radio Button, Attribute Type is selected as Color or Image and Show as Button is selected as Yes Set settings. You can assign your desired Hexadecial color code for the tick displayed above the option when selected by the user.

Status

Option publication status.

Created By

Displays the username of the user who created the option.

Created Date

Displays the date and time when the option was created.

Modified By

Displays the username of the user who last modified the option.

Modified Date

Displays the date and time when the option was last modified.

Add Custom Field

Now when you have created your desired sets and added options under the set, you will need to create Custom Field in VirtueMart so that you can use the sets in your products.

To add a Custom Field, navigate to VirtueMart → Custom Fields. Here you can see a list of all available Custom Fields in your site. Now click on the New button displayed at the top section of the page.

Custom Field Type

Select the Custom Field Type as Plug-ins.

Title

Give a unique title to the field so that you can easily recognise it when adding to your product.

Show Title

You may decide not to show title of the field. That is because individual set title will be displayed against each sets.

Published

Select this as Yes to publish the field.

Custom Group

This is completely optional. If you wish you may add the field under your desired group. You can leave it as it is.

Cart Attribute

Select this as Yes.

Cart Input

Select this as Yes.

Searchable

Select this as No.

Description

This is an optional parameter. If you want you can use this field to describe the custom field for future reference.

Default value

Leave it empty. This parameter has no use for the plugin.

Tooltip

This is an optional parameter.

Layout position

Set this as "addtocart".

Admin only

Select this as No.

Is a list?

Select this as No.

Hidden

Select this as No.

Additional Parameters

You need to select VM Custom - VP Advanced Custom Field here. After selecting this the following parameters will be displayed.

Add Sets

Select the set or the sets which you want to assign to this custom field.

Selected by Default

If yes, the first available option will be pre-selected while displaying in the product.

Required

If yes, the custom field selection will be mandatory before users can add the product to the cart. This features works better when Selected by Default parameter is selected as No.

Multiple Selection

If yes, the final level of variants is displayed as multiple selection field. In case of radio button type set, the field is displayed as checkbox.

Show Price

If yes, additional prices for each variants are displayed at final level.

Check Stock

Select this as Yes in case of Stockable variants.

Add Custom Field to Product

When you have created the custom field you can now assign it to your product.

Navigate to VirtueMart → Products. Open one of the existing products or click on the New button to create a new one. Go to Custom Fields tab.

Scroll down to Custom Field Type section and select the Custom Field from the dropdown list. The selected field form will be loaded at the bottom of the Custom Field Type section. Select the desired options against each sets, maintain stock or price.

You can repeat the above step to add more variants.