If you’ve decided to use VirtueMart 2.X on your Joomla! site to sell any number of products, you may be running into some trouble trying to set up some custom fields for specific types of products. For example you may have a t-shirt that comes in different sizes, or a type of bracelet that has different gold or silver type options, maybe you sell sweaters that come in a number of different colors as well.
Trying to navigate VirtueMart’s custom field options can leave an individual who is unfamiliar with the platform tearing at their hair trying to get them to behave properly. VirtueMart is notoriously confusing, especially when it comes to establishing a simple drop down menu to allow a size or color option for an individual product. What I’ve outlined here are a list of steps that can take the average online store owner through the process of setting up a series of custom attributes, and then how to display those attributes as a simple drop down menu on the front end of the site. This can also be applied towards other types of attributes such as text fields.
For the purpose of this tutorial, we assume you already have VirtueMart installed with some products setup.
Lets’ begin by logging into the admin panel of your Joomla! Site.
1. Go to Components → VirtueMart
2. Click the “Custom Fields” tab on the menu at the far left side of the page under the Products section.
3. Click the “New” button at the top right of the page with a green plus icon above it, right next to the cancel button.
4. For “custom field type” select “cart variant.”
5. Type the name of the attribute in “title,” for example I will make a drop down list for “Size.”
6. Click “Yes” for the “cart attribute” radio button
7. In the field “Default” type in the attributes separated by a semi-colon. In this case I will type “small; medium; large”
8. Then go to the question “Is this a list?” and select “Yes.”
9. Then click “Save” in the top right to save the custom attribute.
10. Now go to the “Products.” tab on the menu at the far left side of the page under the Products section.
11. Select the individual product you would like to add this attribute to.
12. Click the “Custom Fields” tab of that individual product at the top right of the page.
13. Now go to “Custom Field Type” drop down, and select “size,” or whatever custom field you desire to be displayed on that page.
You must add that same custom field for each instance of that attribute. It is intuitive to think that by adding the size custom field to a product that you would then see a drop down list of sizes on the store. THIS IS NOT THE CASE.
14. So you have just added the size custom field and you will see a drop down list that shows small, medium, and large as specified.
Select “small” and then in the open box to the right you can add an additional cost if there is a price change associated with that size. If there is no price change leave that field empty.
Now you must select “size” once again from the “custom field type” drop down. Again you will see size appear below size. Now select “medium” from the drop down. If there is a price increase you can specify it here as well.
Once again select “size” from “custom field type” and this time specify “large” from your drop down. You can then add any price increase information in the empty field to the right if necessary.
This will create a single drop down on the front end with the options “small, medium, and large.”
15. Click “save” and go to the product on the front-end, you should now see a drop down with your new custom attributes.
If a specific product only has the options of “small, medium” then just leave off “large” when you are adding each attribute to the product.
The key here is that each custom field created can have all of the options, or just a few of them, but that needs to be specified by you for each product, even when a product will use all attributes for a specified custom field.
To achieve this, at step 2, we can create all of the different custom fields that we would like for our products. Just create the field for size with the values desired entered into the “default” field separated by a semi-colon.
Then save that custom field and add a new field called “color” with the “default” field having the color values desired inside of it separated by a semi-colon. e.g. “green; blue; pink.”
When we go to the product page we will then add one “custom field type” for each attribute required. e.g. “small, medium, large, green, blue, pink.”
Because these are now two different attribute types they will automatically show as “size” and “color” on the front end with drop downs showing the values specified for that product in the product custom attributes list.
Congratulations! You’ve successfully just set up custom attributes for use on any of the products in your store. This same process can be use to apply any number of options to your products as well as apply new prices for those options if necessary.
Sysgen Media LLC