Skip to main content
Virtuemart Logo

VirtueMart 2.0 – How to Change the Thumbnail Size of Your Products

Below are the instructions to change the size of your product thumbnails to the size you really want:

Go to Components -> VirtueMart

Click the Configuration button

In the Templates tab, tick the Enable Dynamic Thumbnail Resizing? box and set Thumbnail Image Width and Thumbnail Image Height to your desired values

Save & Close

Using FTP, browse to your /images/stories/virtuemart/product and /images/stories/virtuemart/category folders, and delete the resized folder

Create a new folder structure: /templates/YOUR-TEMPLATE/html/com_virtuemart/category

Copy the file \components\com_virtuemart\views\category\tmpl\default.php and place the copy in /templates/YOUR-TEMPLATE/html/com_virtuemart/category

Open /templates/YOUR-TEMPLATE/html/com_virtuemart/category/default.php

Change div class=”width30 floatleft center” to div class=”width100 floatleft center” and change div class=”width70 floatright” to div class=”width100 floatright center”

Add the following code to your template CSS file: .browse-view .row .product .spacer img, .related-products-view .row .product .spacer img{max-width:100%;}

Admire your handiwork.

Discover More VirtueMart Troubleshooting Solutions

Sara Thornton

Sara is WebHolism's SEO Guide and Trainer. She's the one you'll see in all our YouTube videos, and helping folks out with their SEO queries on social media. She runs the fabulous SEO Clarity Club which teaches women how to do their own SEO. In her spare time she loves board games, and splashing around in the sea.


Leave a Reply

Your email address will not be published. Required fields are marked *