web design, England, Britain, UK, belgium
 

Virtuemart 3 - Add a simple cart select variant by custom fields - Joomla & VirtueMart Tips & How To's

GJC Website Design UK, Joomla Developer, VirtueMart Developer, Template Developer, web site designs, England, Britain, UK, Belgium, search-engine optimisation (SEO). Multilingual.

Home Joomla VirtueMart Tips Virtuemart 3 - Add a simple cart select variant by custom fields

Sun

01

Mar

Virtuemart 3 - Add a simple cart select variant by custom fields
  • VirtueMart 3.0
  • Virtuemart Custom Fields
  • Joomla 3.x & 2.5

virtuemart logo lg-sm Adding a simple cart variant in Virtuemart 3 (for example a color or size for the product) as a drop down select in the product page is done as follows.


virtuemart logo lg
  1. Go to the Virtuemart 3 administration and browse to Products->Custom Fields
  2. Click on the "New" button - the Custom Field Form will open
  3. Fill out the form as in the image below: (this is for a Color example)

    virtuemart 3 custom fields cart variant

  4. Save and then browse to the product you want to add VirtueMart 3 cart variants to: Products->Click on Product name
  5. When the product opens select the Custom Fields tab on the top right hand side
  6. Move down to the Custom Field Type: section where you will see a select with the Virtuemart 3 custom field you just made

    virtuemart 3 custom fields cart variant select



  7. If you have only one custom field it is already "selected" so just click it to open the select and select, in this case "Color" again.
    A new blank custom field will open.

    virtuemart 3 custom fields cart variant select new

  8. The layout is confusing, the currency symbol is for the left field. "Value" refers to the text you want to show in the drop down.
    If there is no price difference if this variant is chosen then leave the "Price" field blank.
    If e.g. this variant costs $2.00 more than the base price then add 2.00.
    If the price reduces then add e.g. -1.00.

  9. Re-select the "Color" dropdown as many times as you need a new variant. A new custom field will appear each time.
    DO NOT forget to click "Save" at the top of the page before closing the product page!

    virtuemart 3 custom fields cart variant select new 2

  10. Now check the frontend for this product and you should see your variant drop down select.

    virtuemart 3 custom fields cart variant select product

    Note the price change as the different colors are selected.

    virtuemart 3 custom fields cart variant select product2


  11. You can change the order of your variants by "grabbing" the virtuemart 3 custom fields cart variant order symbol   symbol and dragging the variants to the order you want.

    virtuemart 3 custom fields cart variant select order

  12. You can remove the individual variant by clicking the virtuemart 3 custom fields cart variant remove symbol  symbol.
    Don't forget to click "Save" after doing this. I assume the star symbol is meant to set the default but not working for me.
    I see no field in the DB for this either.

  13. The above info is stored in the #__virtuemart_product_customfields table with a unique id, the product id and the custom field id so imports and manipulation are done there.

    virtuemart 3 custom fields cart variant select table
Last Updated on Sunday, 01 March 2015 23:36
 
VirtueMart
Your Cart is currently empty.

Latest Joomla & VirtueMart Tips

See all tips & examples



Virtuemart 3 - Add a simple cart select variant by custom fields|Joomla & VirtueMart Tips & How To's



GJC Website Design UK, Joomla Developer, VirtueMart Developer, Template Developer, web site designs, England, Britain, UK, Belgium, search-engine optimisation (SEO). Multilingual.


field, custom, product, virtuemart, select, variant, click, price, color, symbol, page, save, add, open, variants, fields, drop, forget, blank, browse, order, selected, change, products, form, example, cart, check, remove, manipulation, closing, colors, note, frontend, different, individual, grabbing, dragging, doing, unique


guru

We use cookies to improve our website and your experience when using it. Cookies used for the essential operation of the site have already been set.
To find out more about the cookies we use and how to delete them, see our privacy policy.

I accept cookies from this site.