Virtuemart – Image type Custom Field – Tutorial with Screenshots

Hi everybody, here comes an another tutorial about how to create “Custom Fields” in Virtuemart.

This tutorial will show you how to have “image type” custom field. Image type custom fields will include the “image” or “icon” instead of plain text. It is very useful if you have a clothing store and that specific product has some color attributes. So instead of giving the color options with a plain texts such as: RED – BLUE – BLACK, you will let buyers to see RED-BLUE-BLACK icons.

Eventually you will get this look below as you can see in our PureMart DEMO:

http://www.flexiblewebdesign.com/virtuemart-2-template-puremart/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=6&virtuemart_category_id=1

[click the image to view larger]

 

let’s get started.

STEP 1 : Make ready the icons that you are going to use as product attributes. In this tutorial i am going to use GOLD, BLACK and SILVER icons as an attributes for “metallic Texture” as you can see in the DEMO above.

STEP 2: Open “Media Files” section in your Virtuemart Backend.

[click the image to view larger]


STEP 3: Upload the icons through “Media Files” section. Simply, click “NEW” button and choose the icons (do this one by one). And eventually you will see get this look:

[click the image to view larger]

 

Now those icons are ready to use as “attributes” in the “Custom Field:Image Type”

STEP 4: Create the Image Type Custom Field.

[click the image to view larger]

 

Now you have created the “Custom Field: Image Type”. Now you can add this custom field to any product you would like.

STEP 5: Simple open any product and click the “Custom Fields” TAB.

[click the image to view larger]

 

STEP 6: Add the Image type Custom field and choose the appropriate file name to show the correct icons for that attribute.

[click the image to view larger]

 

STEP 7: Price Difference. You might want to increase/decrease the price depends on the color selection, or the price will remain constant. Virtuemart gives you this ability. Simply alter this through PRICE field.

[click the image to view larger]

STEP 8: Click SAVE and see the result in the website.

[click the image to view larger]

 

The “BLACK” icon says “No Additional Charge” next to icon which doesn’t fit there. And it is really unneccessary to have a text next icon, right? But Virtuemart (by default) adds it. We should remove it for better viewing. For this purpose, open this INI file:

ROOT/language/en-GB/en-GB.com_virtuemart.ini

(this is for English website, for instance, if your Virtuemart is Spanish, then you should open this file: ROOT/language/es-ES/es-ES.com_virtuemart.ini (same idea for other languages)

And find the line that has “No Additional Charge” text.

[click the image to view larger]

 

Simply change it to something else, or even complete delete it.

IMPORTANT: If you decide to delete it, don’t completely delete this line but change it with this:

COM_VIRTUEMART_CART_PRICE_FREE=””

So the new layout will look like this:

[click the image to view larger]

 

Which looks much better, doesn’t it?

 

STEP 9 (final step): Add each attributes to shopping cart and see the result:

[click the image to view larger]

 

As you can see the prices are different for each attributes.

 

That’s all. Thanks.

NOTICE: The layout in the screenshot is valid for our VM2 Template – PureMart. Which can be purchased through here: http://www.flexiblewebdesign.com/Virtuemart-Templates/Virtuemart-2-template-PureMart

But it is more or less the same for our other VM Template – FashionMart. Which can be purchased through here: http://www.flexiblewebdesign.com/Virtuemart-Templates/FashionMart-Virtuemart-2-template

 

 

 

 

This entry was posted in Virtuemart Tutorial. Bookmark the permalink.

12 Responses to Virtuemart – Image type Custom Field – Tutorial with Screenshots

  1. Jason says:

    This is an awesome tutorial is great and just what I needed. One question, how do I make this a required field?

  2. Jason says:

    This is awesome and easy to follow. I have 2 questions. How do I get rid of the radio buttons and two how do I make it a required option?

  3. Alexander says:

    First of all sorry for my english, it’s not my native language. Can you help me? How to get effect changing main image if you choose some color? F.e. if I choose gold color main picture must be change to another with real picture with gold watches. In your example just color could be choose, main picture is same. Thanks!

  4. Dubai Web Design says:

    Amazing Work!! you have tried best to give us a amazing lessons about Virtuemart, i m happy to get this all information, some points are very new for me.

  5. chris says:

    great post, but all the image type custom fields just show as default – a checked radio button next to each image attribute 🙁

  6. Azam says:

    Thanks for the head up in virtuemart. Really appreciate some good tutorial like this one in the future.

  7. Jag says:

    Thanks, very good tutorial.
    How to enlarge attribute image on click

    Jag

Leave a Reply to SAC Cancel reply

Your email address will not be published.