Joomla Tutorials and Blog Posts

Add Custom Fields to Virtuemart Products

VirtuemartVirtuemart is the most popular Joomla shopping cart, but it can also be challenging for beginners.

We have covered Virtuemart several times, including a comprehensive beginner guide.

In this tutorial, we're going to show you how to make your product information more interesting by using custom fields. This will allow you to add all sorts of specific details to your products, beyond simply the name, price and description.

Step 1: Navigate to Custom Fields

tutuploadsmedia_1341090921735_439455fbfce7d6e540143e8ae39caa8c.png
  • Go to Components > Virtuemart.
  • Go to Products > Custom Fields.

Step 2: Choose a type

tutuploadsmedia_1341090955108_d8f0fb81620570a8c37fae6d1c880896.png
  • Click New.
  • Custom Field Type: Choose string. The types available are: string, integer, parent, boolean, date, time, image, cart variant, generic cart variant, editor, text area, plugins. For a simple information field like we're going to create, string is perfect.

Step 3: Give it a title and description

tutuploadsmedia_1341092996038_88d9e004685cbf41a935472b0af89932.png
  • Title: It helps if the title is meaningful, because this is the field name that will be shown when a custom field is selected for a product.
  • Description: This will be visible on the site as well as in administration.
  • Published: Yes or no. We want yes for the example.
  • Parent: If you are making a group of custom fields that will go together, you will be able to select a parent item. This will be the first one, so no parents will be visible. We don't need a parent for this simple text attribute anyway.
  • Cart Attribute: No in the example. Yes allows you to add some options to a product that can modify the product price.
  • Description: Keep it short It shows on the website.
  • Default: a default value that will show on the site.

Step 4: Choose the layout position and add a tool tip

tutuploadsmedia_1341093549814_48cf2f619e2f30a9e583076fcb87d4bd.png

Tool tip: If this is filled in there will be a tool tip that pops up when you click the information icon.
Layout position: There are three default positions you can use here:

  • ontop
  • normal
  • onbot

These layout positions do not work with "cart attributes" which means custom fields that will affect the price of the item. Those are handled in a different way.

Advanced users can create any type of position they want by adding code to the template. I'll include the code here even though it's beyond the scope of this tutorial.


product->customfieldsSorted['my-position'])) {
$this->position='my-position';
echo $this->loadTemplate('customfields');
}
?>

tutuploadsmedia_1341093568746_2fa722446469177a00ee8a17e2d9bca2.png

Admin only and Hidden are self-descriptive. The one that causes most confusion is "Isa list?" You you would use this to create a selection list of multiple attributes like a list of radio buttons for colors. We're just making a simple label. We'll use this when we have a more complicated example. For now "No" is the best answer.

Exercise: Adding a message to a product

Let's suppose that for certain items, batteries are not included. You need to put that notice on some items but not others. Below is an example of how to fill out the form. Let's fill out the whole form and then see what it looks like.

tutuploadsmedia_1341272673247.png

Step 5: Add the field to a product

tutuploadsmedia_1341272821940.png
  • Click Products in the admin menu.
  • Click the name of a product or create a new product.
tutuploadsmedia_1341272930698.png
  • Click the Custom Fields tab.
  • You'll see a dropdown box for any fields you've created.
  • Expand the box and double-click the name of the custom field.
tutuploadsmedia_1341272587232.png
  • You'll see your new custom field listed under Custom Field Type.
  • Notice that the Value column has the value of the Default field you used in the creation form. You can edit this directly in the list and don't need to open the form again to edit it. It will only change it for this one product, however. Changing it here does not make a global change.

Result

tutuploadsmedia_1341273415942.png

You can see the results of your effort on the product detail page. Everything you entered shows on the site, so take care with your wording. If you entered a tool tip, you will see the blue tooltip icon, otherwise there won't be one there. Mouseing over the icon reveals the tip.

This is the procedure for a simple text message. You can add more than one text message to a product. The design and layout of the message is not controlled through the administration. This is dependant on the template and the CSS.

Comments

 
Windy
#1 Windy 2012-07-09 15:47

Thank you so much for this tutorial, OS Training!

You've saved me a lot of my time with this post.

Regards,
Windy - OIC Academy Specialist
 
 
Francois du Toit
#2 Francois du Toit 2012-11-02 14:03

Sometimes it helps to get someone else's input.

Thanks for this instructions. You helped me to get create the custom solution for my client.

Francois
 
 
Nick Johnson
#3 Nick Johnson 2012-11-08 06:55

A very helpful tutorial about virtuemart customization . It is helpful in many ways....
 
 
priyank
#4 priyank 2012-11-20 13:20

hi,
i am new in virtuemart.
i just want to know that how to put text box on product detail page? and if customer fill that textbox than how to get that textbox value.?

thank you
 
 
Brenton
#5 Brenton 2012-11-28 04:11

Do you know how to add a static value like "Please Select" to appear initially in the drop down, but doesn't allow you to continue unless you select an option?

I want to add this globally, so would prefer not to have to add it for every product.
 
 
Yannis_r
#6 Yannis_r 2013-01-11 14:02

I want to add a list field named Color. But then each product must have its own colors. How do I do that?

Thank you!
 
 
Azam
#7 Azam 2013-02-01 06:01

This does shed some light and make Virtuemart 2.0 more user friendly. I was looking for Related product field, let say Color Red is chosen, the image should change according to the selection..
 
 
Saroj
#8 Saroj 2013-03-14 06:09

Hi,
I have tried to add the custom fields data in VirtueMart vr.2.0.18a but it did not accept more than 16 fields for a product.

While adding custom fields in product, it accepts upto 15 fields only and when trying to add more than that it redirects to Control panel of VirtueMart while saving data.

Can you please tell me what will be the problem here?
 

Add comment


Security code
Refresh

blog-ad

Start Online Training

Members get access to all our video training. That's 1,142 training sessions in Joomla, Drupal, WordPress and Coding.

Manage All Your Joomla Sites

adminicredible

With Admincredible you can update and manage all your Joomla sites. If you have 5 or 500 sites, Admincredible will make your life easier! Visit Admincredible.com.

Latest Comments

The License for Our Tutorials

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:

  • You can re-use these tutorials.
  • You can modify these tutorials.
  • You must link back to our original tutorial.
  • You can't use these tutorials commercially.

Click here to read the full license.

Open Source Training is not affiliated with or endorsed by the Joomla, WordPress or Drupal projects.
All product names and trademarks are the property of their respective owners.

Copyright 2013 Open Source Training, LLC. All rights reserved.