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:
[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 is an awesome tutorial is great and just what I needed. One question, how do I make this a required field?
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?
Hello. How can I make this http://demo.flexiblewebdesign.com/stylemart/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=23&virtuemart_category_id=12&Itemid=515
on virtuemart 3.5 and also changing the price of the product
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!
Hi Alexander, it is not possible with the current Virtuemart. But you can use our another extensions, called: Flexible – Zoom Effect. More info: https://www.flexiblewebdesign.com/Virtuemart-Modules/Virtuemart-Zoom-Effect-Plugin
It will give you what you are looking for, live demo:
http://demo.flexiblewebdesign.com/~zoom
in the Flexible – Zoom Effect Live Demo, a drop down custom field is being used, but the same idea is valid for Image Type Custom Field as well. The live demo when Image Type Custom Field is used, can be seen through: http://demo.flexiblewebdesign.com/stylemart/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=23&virtuemart_category_id=12&Itemid=515
(FYI: The above URL is a demo of our Joomla Virtuemart Template: StyleMart, but the same Flexible – Zoom Effect is being used in that template as well)
Regards,
Flexible Web Design
If you get a blank page, it’s most likely a PHP error. You must eitehr enable display of PHP errors or look in the PHP error log (I can’t help you with the exact steps you need to take to do that since it differs from post to post).After you manage to do that, please contact me privately.
Hi! How can I do this (the shoes example) with virtuemart 3.5? It’s a little difficult for me. PD: I have the Flexible Zoom Effect!
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.
great post, but all the image type custom fields just show as default – a checked radio button next to each image attribute 🙁
Thanks for the head up in virtuemart. Really appreciate some good tutorial like this one in the future.
Thanks, very good tutorial.
How to enlarge attribute image on click
Jag
Click the thumbnail and the picture will be enlarged