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

This entry was posted in VirtueMart on by .

About Sara Thornton

Sara is a Jack (or Jill) of many trades. A web designer and developer, an ethical SEO implementer, an AdWords advocate, as well as being our in house user-guide creator and trainer. In her spare time she loves a bendy/stretchy yoga session, and feels most happy when she's near the ocean (ideally with a ridiculously absorbing book).

Leave a Reply

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

35 thoughts on “VirtueMart 2.0 – How to Change the Thumbnail Size of Your Products

  1. Kent

    I understood the first part of your solution then…. I’m sorry, I have no idea what you’re talking about. I have Joomla and Virtuemart 2.0.2 and in the template sec in the admin it has a place to change the size of a thumbnail, which I’ve done, and made sure the dynamic resizing box is checked. I’ve also deleted and reloaded thumbnails several times. That was suggested in several posts. My product thumbnails are still tiny.

    I have no idea about code or html or even where to look for the css files you are talking about.

    Does VM not allow store owners setting up a basic website with a shopping cart the ability to choose a size of a product thumbnail? That seems like a pretty basic feature of a shopping cart. Any help would be appreciated on where in the admin/back end config area of virtuemart I should looking?

    Thanks and frustrated – Kent

    Reply
    1. Sara Thornton Post author

      Hello Kent,

      Thanks for your post, and sorry to hear that you’re having problems with the thumbnails.

      The files mentioned in the article above can be accessed through an FTP program such as FileZilla (free) https://filezilla-project.org/, and will need FTP access details (you should be able to get these from your hosting provider).

      As VirtueMart is created by volunteers they are still working out a few of the bugs in Version 2.0, but it unfortunately takes time to do so.

      There are a couple of VirtueMart extensions out there which allow a user-friendly way of editing the thumbnail size, but I haven’t personally used any of them and so wouldn’t be able to recommend any in particular: http://extensions.joomla.org/search?q=virtuemart+thumbnails

      If you’d like me to walk you through how the FTP solution works, just let me know and I can drop you a line directly.

      Best wishes,
      Sara

      Reply
      1. Olayinka

        Hello Sara,

        Thanks for your article. However, that option “Enable dynamic thumbnail resizing” is already ticked in my virtue mart, but the thumbnail pictures still do not display the specified dimensions, but rather the dimensions are greatly reduced.

        Reply
        1. Sara Thornton Post author

          Hello Olayinka,

          Thanks for your post. Did you follow the rest of the article instructions, such as deleting the “resized” folder, and making the FTP file changes?

          Thanks,
          Sara

          Reply
          1. Sara Thornton Post author

            Hello Reemet,

            Thanks for your post. Did you follow all of the article instructions, such as deleting the “resized” folder, and making the FTP file changes?

  2. Daryn

    Bought 2 books on Amazon to learn this and neither of them showed me how whilst your tutorial got it done in seconds. You are a rock star, thank you!

    Reply
  3. Pingback: VirtueMart 2.0 Troubleshooting

  4. Jane

    Very easy to follow instructions. First time when I got into the CSS. If I can do it, everyone can do it. Thank you!

    Reply
  5. Janis Keim

    Hi Sara–
    I followed this article to the letter, thinking I was going to be able to resize the thumbnails for my client who wanted them larger. I walked though your steps yesterday without having any issues. I was swapping out images for some of the categories and noticed they weren’t getting resized, but never got the issue resolved.

    Today, when I FTP’d into the website, I noticed the “resized” folders weren’t re-created, so I manually created them, thinking that would resolve the mix of thumbnail sizes, but I was still having issues with some images not resizing.

    So upon logging into the backend of the website, I noticed VM 2.6.4 was available, so I updated. Still the mix of two different dimensions of thumbnails. Then I had one of those “ah ha” moments. I noticed the paths in these two areas were slightly different:

    Product Media URL
    Category Media URL

    So I FTP’d back in there and found the “resized” folders and deleted them. Upon deletion, I saw a notice that said to recreate the folders, which I had not seen yesterday. Anyhow, I now have the thumbnail sizes the same on the site, although the original images will need some tweaking.

    Just wanted to share my own success from your steps above and to mention the tidbit of a non-default value being used in the two Media URLs.

    Thank you so much for saving me buckets of time trying to figure out how to resize thumbnails in VM.

    Janis

    Reply
    1. Sara Thornton Post author

      Hi Janis,

      What wonderful feedback! Thank you so much for sharing, and I’m glad to see that you found success in the end.

      Hopefully your comment will help others who encounter the same issues.

      Have a great day,
      Sara

      Reply
      1. sjeng

        Hi Sarah,
        Got a problem with the CSS. Did everything you said, but I missed something.
        In the new template folder: /templates/YOUR-TEMPLATE
        there is no CSS-folder, only the new structure ( /templates/YOUR-TEMPLATE/html/com_virtuemart/category ) I suppose I have to put: .browse-view .row .product .spacer img, .related-products-view .row .product .spacer img{max-width:100%;} into this folder.
        Can you tell me what I ,v missed ?
        Thanks for the help
        Jan Hugo

        Reply
        1. Sara Thornton Post author

          Hi Jan,

          The CSS changes will just go in your normal CSS override location, which tends to be template dependant (i.e. different templates can have different ways of overriding existing CSS). You can normally find your CSS file in your template/css folder, and then check with your template provider on how to override your template CSS.

          Alternatively you can edit the original CSS files (although this is not recommended, as it’s not upgrade proof), and you’ll probably be able to find this file in /templates/YOUR-TEMPLATE/css/.

          Good luck!
          Sara

          Reply
          1. manos stathakis

            Hi, My joomla template is from artisteer and there is no com_virtuemart folder in my Template html folder.
            The only folder that is called com_virtuemart is in components folder and in administrator folder. What I am supposed to do?

            Thanks you very much.

          2. Sara Thornton Post author

            Hi Manos,

            If you double check the instructions above they will guide you through how to create the missing folder structure in your template html folder.

            Hope this helps,
            Sara

  6. Ike

    Hi

    Hi Sara,

    Thanks for the post. I got stuck at the last bit.

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

    I am using virtumart 3.0 and i cant find the above line in the default.php file i copied to the category folder.

    Thanks

    Reply
    1. Sara Thornton Post author

      Hi Ike,

      Thanks for your post.

      This solution is for VirtueMart 2.0, so it might not work (or even be needed) for VirtueMart 3.0.

      Your best bet is to check the VirtueMart 3 forums to see if there’s a configuration fix or alternative fix for VirtueMart 3.0: http://forum.virtuemart.net/

      I hope that this helps,
      Sara

      Reply
  7. Heidi

    Thank you so much for this! Amazing tutorial that even I understood!

    I do have a bit of a followup question though. (No worries if you don’t have the time to answer I do understand everyone is majorly busy these days)

    But if you could tell me how I can centre the “Related Products” view for Virtuemrt. At the moment it is left justified but would look fab if it was in the centre instead.
    Is it a template issue that I have or is there way to edit the Virtuemart files themselves?

    Thanks in advance.

    Reply
    1. Sara Thornton Post author

      Hi Heidi,

      Glad this tutorial helped!

      For centring the “Related Products” view, you might be able to do this via your template (depending on the template you’ve used).
      I’d recommend checking out the options that your template offers, and if no luck there, you might be able to create a custom.css file and force the centring that way.

      Hope this helps,
      Sara

      Reply