Честно говоря, данный функционал просто обязан быть по-умолчанию в интернет-магазине, но разработчики Virtuemart как-то это упустили. Решение, о котором я расскажу Вам ниже, рабочее, но крайне не удобное. Так например, отдать сайт заказчику в таком виде лично мне стыдно, но если Вам не стыдно или Вы пытаетесь найти решение для себя то эта статья специально для Вас.

Установка плагина Dropbox with image picker

1. Скачиваем плагин Dropbox with image picker или смотрим демо.
2. Устанавливаем через менеджер расширений
3. Переходим в менеджер плагинов и активируем его

Настройки плагина и описание его работы

Создание настраиваемого поля

Для того, что бы начать работать с данным плагином, заходим в «Настраиваемые поля» в Virtuemart 2. Создаем новое поле «Цвет», выбираем тип «Плагин», ставим галочку «Атрибут корзины», в самом низу выбираем плагин Dropbox with image picker и производим следующие настройки:

• Пользовательский заголовок Dropbox: «Выберите цвет»
• Dropbox Выбор с разделителем |: голубой;blue.png|красный;red.jpg|чёрный;black.png
• Путь к картинкам, например, images/1: указывайте путь к изображениям (голубой, красный, чёрный). Здесь логика такая, что для каждого товара нужно будет создавать отдельную папку с картинками. Напишите в это поле просто: images/products/. Также для каждого цвета, можно задать наценку: голубой;blue.png;+100|чёрный;black.png;+200 и т.д
• CSS класс оригинального изображения, например, .main-image: найдите DIV в котором обрамлено Ваше изображение и укажите его в это поле.
• Дочерний элемент в блоке с изображением: первый элемент внутри класса с изображением. В стандартном шаблоне это img
• Ширина изображения, например, 300px: укажите ширину изображения в пикселях
• Высота изображения, например, auto: укажите высоту изображения
• Скрыть цену на странице товара: если не хотите отображать цену
• Увеличивать цену товара: если хотите что бы при выборе цвета менялась цена
• Показать цены в корзине: включите если хотите показать стоимость цвета в корзине

На этом настройки плагина по-умолчанию закончены. Переходим в карточку товара на вкладку «Настраиваемые поля»

Выбираете тип поля «Цвет» и производите минимальные настройки, а именно верно указывайте путь до папки с изображениями к этому товару, например /images/products/1 (слэш в конце не указывать). На этом настройка закончена.