Уроки по созданию сайтов на WordPress Создание сайта и интернет магазина с нуля! Интересует вопрос как создать сайт? Тогда Вам сюда!
Здравствуйте друзья! Сегодня мы поговорим о создании вариативных товаров в интернет-магазине.
Что такое вариативный товар? Вариативный товар — товар который имеет различные свойства (вариации). К примеру, одежда может иметь несколько цветов (белый, черный, красный) и размеров (X, XL, XXL). В таких случаях нам и нужно создавать вариативные товары, чтобы покупатель мог выбрать необходимый цвет и размер при покупке товара в вашем интернет магазине. При добавлении вариативного товара в магазин на WooCommerce вы можете устанавливать индивидуальные фото (миниатюры) и задавать разную цену на каждую вариацию.
Напомню, что в прошлых уроках мы уже разобрали:
- Урок 1. Установка и русификация плагина интернет-магазина Woocommerce
- Урок 2. Настройка ЧПУ (постоянных ссылок) в WooCommerce
- Урок 3. Добавление товаров в интернет-магазин на базе WooCommerce
- Урок 4. Добавление валюты «Рубли» и «Гривны» в WooCommerce
Как создать вариативный товар
1. Для начала нам необходимо создать свойства, которые мы будем использовать в качестве вариаций. В нашем случае их несколько, это цвет и размер.
Для этого заходим в Товары -> Свойства и создаем свойство Цвет и Размер.
Добавляем новые свойства товара
2. Теперь нажимаем на созданное свойство Цвет и в открывшемся окне добавляем значения этого свойства. В нашем примере мы добавим белый, черный и красный цвет.
Добавление цвета в свойства «Цвет»
По аналогии добавляем X, XL, XXL в свойство Размер.
3. Далее нам нужно создать новый вариативный товар или изменить уже созданный товар на вариативный. При создании товара нужно указать то, что он будет вариативным.
Для этого выбираем в выпадающем списке Вариативный товар (при создании по умолчанию стоит значение «Простой товар»). После этого переходим на вкладку Свойства.
Выбираем «Вариативный товар» и переходим на вкладку «Свойства»
4. После перехода в вкладку Свойства выбираем из выпадающего списка свойство Цвет и нажимаем кнопку «Добавить».
Добавляем свойство «Цвет «
После добавления свойства Цвет и Размер необходимо выбрать значения, которые будут в вариации товара. Для этого при нажатии по полю с выбором значений выбираем цвета и размеры, которые соответствуют нашему товару.
Важно!!! Обязательно ставим галочку в «Использовать для вариаций» и после добавления всех значений нажимаем кнопку «Сохранить свойства».
Выбираем значения для вариаций «Цвета» и «Размера»
5. Теперь переходим на вкладку Варианты и нажимаем Присоединить все варианты и в окошке которое появилось подтверждаем наше действия нажав ОК. После нажатия кнопки вы создадите все возможные комбинации свойств вариантов. Что это значит? Это значит что на каждый цвет будут все размеры, а на каждый размер — все возможные цвета. Такой способ является самым быстрым при добавлении множества вариантов.
Также можно создавать вариативные товары выбирая вручную на какой цвет у вас будут какие размеры. Для этого нужно нажать кнопку «Добавить вариант» и указать цвет и размер на добавленную вариацию.
Я рекомендую добавлять все вариации сразу. Проще и быстрее удалить лишние вариации когда их видно все, чем их добавлять поштучно. В нашем же примере мы будем использовать все возможные комбинации вариантов.
6. После того как все вариации добавлены нужно обязательно указать цену на всех вариация (если есть скидка, то и скидку). Также на этом этапе можно назначить миниатюру на нужную вариацию (или на все).
Указываем обычную цену и цену со скидкой. Задаем разные миниатюры для вариаций если необходимо.
После того как вы добавите все цены, не забудьте обязательно сохранить изменения нажав кнопку «Обновить», а если товар новый то «Опубликовать».
Как видите все достаточно просто и интуитивно понятно. Возможно в первый раз и кажется все немного запутанным, но после нескольких добавлений вариативных товаров это пройдет 😉
Вот так выглядит результат добавления вариативного товара из этого урока:
Результат добавления вариативного товара в WooCommerce
Если у вас возникли вопросы — пишите в комментариях.
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Здравствуйте. Подскажите пожалуйста как убрать надпись
s019.radikal.ru/i608/1602/ce/5152395e240d.jpg
Посмотрите свойство ненужного Вам элемента (его класс или идентификатор) и добавьте ему в CSS свойство display:none;
Добрый день, при создании нового товара, я пользуюсь услугой копирование товара в черновик. После того, как я внесу изменения и опубликую новый товар, то в этом самом новом товаре остаются комментарии от прежнего товара. Как их (комментарии) убрать?
Помогите советом, плиз.
Такое копирование может быть не совсем правильным, если оно сохраняет url адрес прошлого товара. Попробуйте изменить url нового товара, а лучше создавать с нуля.
Добрый день, может вы сталкивались с такой проблемой, что при добавлении вариативного товара в корзину появляется сообщение: «пожалуйста, укажите опцию товара» и товар не добавляется в корзину, причем такая ошибка при выборе любого варианта (опции)?
Использую тему Vantage.
Буду очень признательна за помощь.
Анна, вам удалось как-то решить эту проблему? У меня такая же… Отпишитесь, пожалуйста!
К сожалению, нет. Если получится, напишу Вам или вы мне напишите, пожалуйста, если вам раньше удасться разобраться. Буду очень признательна за любую помощь.
Спасибо за ответ! Обязательно напишу. Пока «лопачу» интернет и пробую экспериментальным путём…
У меня такой вопрос. В товаре указал, что нельзя добавить больше 1 товара в корзину. Сейчас при повторном добавлении пишет «Перейти в корзину Вы не можете добавить ещё «Платье» в корзину.»
Можно ли как-то сделать, чтобы вместо этого сообщения сразу был переход на страницу оплаты или в корзину?
Здравствуйте. Можно сделать переход в корзину сразу после добавления товара. Для этого нужно поставить галочку в WooCommerce -> Настройки ->Товары -> Отображение (вкладка) -> «Перенаправить в корзину после успешного добавления»
Добрый день, можно спросить, почему при добавлении товара, он не выводиться в «заказах» в личном кабинете?
И второй вопрос при регистрации пользователя ничего не происходит, как исправить? регистрирует только после покупки.
Добрый день! А можно ли как-то убрать все способы оплаты?? Т.е. чтобы при оформлении заказа, просто приходило письмо о том, что клиент оформил заказ??
Добрый день! Могу порекомендовать только обновить WP и WooCommerce, также убедиться что проблема не в активной теме.
Попробуйте отключить все способы оплаты в настройках WooCommerce
Здравствуйте.
Необходимо в автоматической форме добавлять товар!!! Товаром являются данные, полученные через форму обратной связи на сайте. Как это можно осуществить?
Здравствуйте. WooCommerce в решении такой задачи не поможет.
Здравствуйте, Александр.
Тогда какие есть решения: плагины, скрипты, коммерческие сервисы ???
К сожалению, таких скриптов или сервисов я не знаю 🙁
Доброго времени суток, Александр.
Предлагаю Вам взаимовыгодное сотрудничество. Необходимо «довести до ума» и настроить магазин. Товаром для покупки являются запросы, полученные через форму обратной связи на сайте. Необходимо осуществить автоматическое пополнение базы с каждым новым полученным запросом+осуществить массовое оповещение по емайл возможных покупателей о новой поступившей заявке. Соответственно каждый запрос в зависимости от своей категории имеет разные цены. Тематика — транспортные перевозки. Сайт на испанском языке. WooCommerce и оплата по карте через банк уже установлены. Жду Вашего ответа. С Уважением.
Здравствуйте! Спасибо за статью, по ней все настроила, все получилось!
Подскажите пожалуйста, какую тему можно использовать, чтобы одной из ее функций было создание результатов фильтрации отдельной страницей? То есть, чтобы у нас не просто скрывались результаты, которые не подходят по параметрам фильтрации, а именно создавалась отдельная страница? Или может плагины какие-то есть для этого?
Здравствуйте. Смысл фильтра в скрытии ненужного, не выходя из страницы. Если же нужна отдельная страница, тогда проще создать категорию и поместить туда нужные товары.
Здравствуйте! А у меня вообще на странице товара не появляется выбор по вариации, хотя всё делал по инструкции. Тему менял — не помогло. В чём может быть дело?
Разобрался, был конфликт с плагином woocommerce catalog.
Здравствуйте! У мене проблемаз варіативним товарм коли варіацій мало він відображається правільно і коли їх багато відображаються варіації які не створені при їх виборі відображається повідомленя що такого товару нема виберіть інші параметри ( тобто напиклад є двері кльору золотий дуб вони бувають розмірів 860/1900 і 980/1900 і так іще пару кольрів (під дерево) і є коліри білий але двері розмірів 860/2050 і 1200/2050 коли я вибераю білий колір то чомусь при виборі розміру є такі параметри 860/1900; 980/1900;860/2050 і 1200/2050 але 860/1900; 980/1900 неробочі як зробити щоб їх невиводило).
Здравствуйте. Если я правильно понял, то удалите просто ненужную вариацию.
Нет Александр вы совсем правильно меня поняли когда у меня больше 20 вараций то выборку выборе вараций отражает не некорректно. При выборе одного атрибута в других показываются возможными те смысле которые я не прописывал например перейдите на сайт http://budstore.lviv.ua/tovar/arma101/ если выбрать атрибут назначения «квартирные» то будут доступны размеры 1200 * 2050; 960 * 1900; 960 * 2050; 860 * 1900; 860 * 2050 хотя вариации где фигурирует атрибут назначения «квартирные» есть только с размерами 1200 * 2050; 960 * 2050; 860 * 2050 все остальные размеры есть в вариациях где фигурирует атрибут назначения «Vinorit внешние». Такое отображение выборки начинается только если вариаций более 20 до 20 вариаций и при выборе назначения «квартирные» доступными являются размеры 1200 * 2050; 960 * 2050; 860 * 2050. Как сделать чтобы выборку отражало правильно если вариаций более 20.
Добрый день.
У нас такая же проблема, удалось решить?
Подскажите почему при выборе вариативного товара (на страничке товара)не меняется цена соответствующая выбранному товару (Цена заданна каждому своя). И еще при добавлений товара в корзину пишет «Пожалуйста, укажите опции товара… » и не добавляет, хотя всё указанно.Все плагины и тему установил из офиц.иточников. Тема установлена Storefront пробовал и Mystile без изменений
Если все плагины и темы с официальных источников, все обновлено и нету никаких конфликтов скриптов и плагинов — проблема вероятнее всего в хостинге/сервере/настройке php.
Добрый день! Подскажите, У меня в магазине кнопка купить под каждым товаром, но когда товара нет в наличии, размер кнопки меняется, а это как то не очень красиво и не симметрично. Т.е. в ряд 3 товара, кнопка КУПИТЬ у первых двух одинаковая, а у третьего товара она отличается, меньше по размеру… Александр, подскажите как сделать так, чтоб эта кнопка была одинакова на товарах которые как в наличии так и не в наличии? Где то видел подсказку типа Добавить пользовательский CSS для Внешний вид -> Настройка -> Тема Параметры -> Пользовательский код -> Пользовательские CSS… Как это сделать? Спасибо!
Здравствуйте. Не видя стиля кнопки, я ничего сказать точно не смогу. Укажите ссылку на Ваш сайт, так я смогу посмотреть и помочь с CSS.
Ссылку на почту отправил!
Добавьте в CSS:
a.button.product_type_variable { width: 100%; text-align: center; }Добавил! Огромное спасибо, с виду мелочь а для меня оказалось проблемой))
Спасибо за вашу помощь Александр!
Саш, а подскажите еще разок, как на вариативном товаре оставить только одну цену, например только минимальную? Чтоб везде фигурировала только одна цена. Сейчас показывается две цены, мин и макс, не корректно как то… Спасибо!
Нужно чтобы все вариации были одной цены, в таком случае и цена должна отображаться одна.
Но в одном товаре, вариации, могут быть с разными ценами, например: Кроссовки Nike — Black 100 грн White 150 грн. В таком случае хотелось чтоб цена возле товара была именно 100 грн, а уже когда человек выбирает цвет, цена изменялась…
Разные цены — разный диапазон цен. Всё логично.
joxi.ru/D2PKYZaCd4OKlm можно как то одну цену выводить или это невозможно? Спасибо)
Такой возможности в WooCommerce нету.
Ладно, спасибо большое!
Добрый день, на странице оформления заказа /checkout/ хочу оставить только поле «телефон»
как это сделать?
По поводу удаления полей на странице Checkout. Добавьте functions.php:
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); function custom_override_checkout_fields( $fields ) { unset($fields['billing']['billing_first_name']); unset($fields['billing']['billing_last_name']); unset($fields['billing']['billing_company']); unset($fields['billing']['billing_address_1']); unset($fields['billing']['billing_address_2']); unset($fields['billing']['billing_city']); unset($fields['billing']['billing_postcode']); unset($fields['billing']['billing_country']); unset($fields['billing']['billing_state']); unset($fields['order']['order_comments']); unset($fields['billing']['billing_email']); unset($fields['account']['account_username']); unset($fields['account']['account_password']); unset($fields['account']['account_password-2']); return $fields; }Если захотите и телефон убрать, тогда еще добавьте строчку:
Пожалуйста, укажите опции товара, кто решил? напишите что сделать?
Решение, переустановить тему, атрибуты начинают выбираться и в корзину добавляется товар правильно
Доброго времени суток, вот у вас показано что вы выставляете Вариативный товар и появляются Свойства у меня на сайте же не выходит такое в чём может быть причина:?
Попробуйте переустановить и обновить WooCommerce, также попробуйте сменить тему. Возможно проблема именно в ней.
Доброе Утро , подскажите у меня в WooCommerce нету данной функции «Свойство» что делать подскажите!
Здравствуйте. Подскажите, можно ли изменить урл атрибутов? У меня выводятся фильтры как
/?filter_razmer=68
хотелось бы что-то типа /filter_razmer=180х200
п.с. ярлыки прописаны