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:
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.
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:
Now those icons are ready to use as “attributes” in the “Custom Field:Image Type”
STEP 4: Create the Image Type Custom Field.
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.
STEP 6: Add the Image type Custom field and choose the appropriate file name to show the correct icons for that attribute.
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.
STEP 8: Click SAVE and see the result in the website.
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:
(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.
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:
So the new layout will look like this:
Which looks much better, doesn’t it?
STEP 9 (final step): Add each attributes to shopping cart and see the result:
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