Using template overrides

If you already use template overrides

Then it is the override default file for

  • productdetails

that you will need to edit.

If you have a commercial theme

The file will be in

  • your-jooml-template/html/com_virtuemart/category/

In template overrides should be a placeholder in the templates

So check the

  • productdetails

override files.

Assuming you do not already use template overrides

or use a commercial Virtuemart 2 theme:

1. make a copy of the view template 

  • components/com_virtuemart/views/productdetails/tmpl/default.php

In Virtuemart 2 the view files (templates) can all be found under

  • components/com_virtuemart/views/

- each subdirectory from there has an obvious name.

If you disable SEO in Virtuemart 2 Configuration/SEO then the page url gives a good hint to the fileset used.

2. Then you can edit the file.

A. Check comments in it:
      // Availability

B. Use Firebug to look at the live page code to see where you need to edit.

C. For example short desc display begins  <p class="product_s_desc">.

3. You should use any edited view file as a template override.

Use the edited default.php file as an override so it does not get overwritten during Virtuemart 2 updates.

The product details template files will therefore be in

  • [your-joomla-template]/html/com_virtuemart/productdetails/

You may also need to make some css changes

1. If needed to improve the style of the layout.

You should append any new css style definitions to the end of your Joomla template css file. 

2. You just need to be more specific with your styles selectors.

Work back through the classes within the same div to find a class unique to the template you want to restyle.

For example

1. You could edit one of the price display templates (or both) to add an additional class or id to more accurately apply your styles.

2. E.g. the following works with defaul Virtuemart 2 templates to set the price font size on the product details page only:

.spacer-buy-area .PricesalesPrice  {font-size:20px;}

3. That is using the standard short desc class so all you need to do is append a suitable style to the end on your Joomla template css.


.product_s_desc {color:#A5250E;}


1. To create a template override for category view: 

  • joomla_root_folder/components/com_virtuemart/views/category/tmpl/default.php

or for other views:

  • .../components/com_virtuemart/views/productdetails/tmpl/default_showprices.php
  • .../components/com_virtuemart/views/cart/tmpl/default_pricelist.php

2. Just copy that file under

  • joomla_root_folder/templates/your_joomla_template/html/com_virtuemart/category/default.php

If the folders are not exist please create them.

If you already use template overrides edit the overridden file.

3. Place your changes inside there.

Default or 3rd party template

It depends on

  • ether your using the default Virtuemart theme's or
  • using a 3rd party template/theme for Virtuemart.
  • If your using a 3rd party template/theme, then the override files should be in templates/yourtemplate/html/com_virtuemart
  • If you are using the standard Virtuemart theme then you can create this path and add template override files here.
  • Within your override files you can add inline CSS to space these area's out (but this is a bit ugly).
  • Or better still create a custom.css file, create some new classes with padding, margin spacing, etc and apply these to the areas that you want spacing out.

If you don't already use it, then you should be using Firebug with Firefox, to take a look at whats going on with your current CSS for the areas you want spacing out.

And if you don't know about template overrides, there are some great documents about these in the Joomla Docs website, which can be found easily in a search engine.