Домой / WordPress / Урок 5. Добавление вариативного товара в интернет-магазин WooCommerce
Урок 5. Добавление вариативного товара в интернет-магазин WooCommerce

Урок 5. Добавление вариативного товара в интернет-магазин WooCommerce

Здравствуйте друзья! Сегодня мы поговорим о создании вариативных товаров в интернет-магазине.

Что такое вариативный товар? Вариативный товар — товар который имеет различные свойства (вариации). К примеру, одежда может иметь несколько цветов (белый, черный, красный) и размеров (X, XL, XXL). В таких случаях нам и нужно создавать вариативные товары, чтобы покупатель мог выбрать необходимый цвет и размер при покупке товара в вашем интернет магазине. При добавлении вариативного товара в магазин на WooCommerce вы можете устанавливать индивидуальные фото (миниатюры) и задавать разную цену на каждую вариацию.

Напомню, что в прошлых уроках мы уже разобрали:

Как создать вариативный товар

1. Для начала нам необходимо создать свойства, которые мы будем использовать в качестве вариаций. В нашем случае их несколько, это цвет и размер.

Для этого заходим в Товары -> Свойства и создаем свойство Цвет и Размер.

Добавление вариативного товара в интернет-магазин WooCommerce

Добавляем новые свойства товара

2. Теперь нажимаем на созданное свойство Цвет и в открывшемся окне добавляем значения этого свойства. В нашем примере мы добавим белый, черный и красный цвет.

Добавление цвета в свойства "Цвет"

Добавление цвета в свойства «Цвет»

По аналогии добавляем X, XL, XXL в свойство Размер.

3. Далее нам нужно создать новый вариативный товар или изменить уже созданный товар на вариативный. При создании товара нужно указать то, что он будет вариативным.

Для этого выбираем в выпадающем списке Вариативный товар (при создании по умолчанию стоит значение «Простой товар»). После этого переходим на вкладку Свойства.

Выбираем "Вариативный товар" и переходим на вкладку "Свойства"

Выбираем «Вариативный товар» и переходим на вкладку «Свойства»

4. После перехода в вкладку Свойства выбираем из выпадающего списка свойство Цвет и нажимаем кнопку «Добавить».

Добавляем свойство "Цвет "

Добавляем свойство «Цвет «

После добавления свойства Цвет и Размер необходимо выбрать значения, которые будут в вариации товара. Для этого при нажатии по полю с выбором значений выбираем цвета и размеры, которые соответствуют нашему товару.

Важно!!! Обязательно ставим галочку в «Использовать для вариаций» и после добавления всех значений нажимаем кнопку «Сохранить свойства».

Выбираем значения для вариаций Цвета и Размера

Выбираем значения для вариаций «Цвета» и «Размера»

5. Теперь переходим на вкладку Варианты и нажимаем Присоединить все варианты и в окошке которое появилось подтверждаем наше действия нажав ОК. После нажатия кнопки вы создадите все возможные комбинации свойств вариантов. Что это значит? Это значит что на каждый цвет будут все размеры, а на каждый размер — все возможные цвета. Такой способ является самым быстрым при добавлении множества вариантов.

Также можно создавать вариативные товары выбирая вручную на какой цвет у вас будут какие размеры. Для этого нужно нажать кнопку «Добавить вариант» и указать цвет и размер на добавленную вариацию.

Я рекомендую добавлять все вариации сразу. Проще и быстрее удалить лишние вариации когда их видно все, чем их добавлять поштучно. В нашем же примере мы будем использовать все возможные комбинации вариантов.

Добавление вариативного товара в интернет-магазин WooCommerce

6. После того как все вариации добавлены нужно обязательно указать цену на всех вариация (если есть скидка, то и скидку). Также на этом этапе можно назначить миниатюру на нужную вариацию (или на все).

Указываем обычную цену и цену со скидкой. Также задаем разные миниютюры.

Указываем обычную цену и цену со скидкой. Задаем разные миниатюры для вариаций если необходимо.

После того как вы добавите все цены, не забудьте обязательно сохранить изменения нажав кнопку «Обновить», а если товар новый то «Опубликовать».

Как видите все достаточно просто и интуитивно понятно. Возможно в первый раз и кажется все немного запутанным, но после нескольких добавлений вариативных товаров это пройдет 😉

Вот так выглядит результат добавления вариативного товара из этого урока:

Результат добавления вариативного товара

Результат добавления вариативного товара в WooCommerce

Если у вас возникли вопросы — пишите в комментариях.

Здравствуйте друзья! Сегодня мы поговорим о создании вариативных товаров в интернет-магазине. Что такое вариативный товар? Вариативный товар - товар который имеет различные свойства (вариации). К примеру, одежда может иметь несколько цветов (белый, черный, красный) и размеров (X, XL, XXL). В таких случаях нам и нужно создавать вариативные товары, чтобы покупатель мог выбрать необходимый цвет и размер при покупке товара в вашем интернет магазине. При добавлении вариативного товара в магазин на WooCommerce вы можете устанавливать индивидуальные фото (миниатюры) и задавать разную цену на каждую вариацию. Напомню, что в прошлых уроках мы уже разобрали: Урок 1. Установка и русификация плагина интернет-магазина Woocommerce Урок 2. Настройка ЧПУ (постоянных ссылок) в WooCommerce…

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.21 ( 21 голосов )
100

390 комментариев

  1. Аватар

    Здравствуйте. Подскажите пожалуйста как убрать надпись
    s019.radikal.ru/i608/1602/ce/5152395e240d.jpg

  2. Аватар

    Добрый день, при создании нового товара, я пользуюсь услугой копирование товара в черновик. После того, как я внесу изменения и опубликую новый товар, то в этом самом новом товаре остаются комментарии от прежнего товара. Как их (комментарии) убрать?
    Помогите советом, плиз.

    • Аватар

      Такое копирование может быть не совсем правильным, если оно сохраняет url адрес прошлого товара. Попробуйте изменить url нового товара, а лучше создавать с нуля.

  3. Аватар

    Добрый день, может вы сталкивались с такой проблемой, что при добавлении вариативного товара в корзину появляется сообщение: «пожалуйста, укажите опцию товара» и товар не добавляется в корзину, причем такая ошибка при выборе любого варианта (опции)?
    Использую тему Vantage.
    Буду очень признательна за помощь.

    • Аватар
      Наталья

      Анна, вам удалось как-то решить эту проблему? У меня такая же… Отпишитесь, пожалуйста!

      • Аватар

        К сожалению, нет. Если получится, напишу Вам или вы мне напишите, пожалуйста, если вам раньше удасться разобраться. Буду очень признательна за любую помощь.

        • Аватар
          Наталья

          Спасибо за ответ! Обязательно напишу. Пока «лопачу» интернет и пробую экспериментальным путём…

  4. Аватар

    У меня такой вопрос. В товаре указал, что нельзя добавить больше 1 товара в корзину. Сейчас при повторном добавлении пишет «Перейти в корзину Вы не можете добавить ещё «Платье» в корзину.»

    Можно ли как-то сделать, чтобы вместо этого сообщения сразу был переход на страницу оплаты или в корзину?

    • Аватар

      Здравствуйте. Можно сделать переход в корзину сразу после добавления товара. Для этого нужно поставить галочку в WooCommerce -> Настройки ->Товары -> Отображение (вкладка) -> «Перенаправить в корзину после успешного добавления»

  5. Аватар

    Добрый день, можно спросить, почему при добавлении товара, он не выводиться в «заказах» в личном кабинете?

    И второй вопрос при регистрации пользователя ничего не происходит, как исправить? регистрирует только после покупки.

  6. Аватар

    Добрый день! А можно ли как-то убрать все способы оплаты?? Т.е. чтобы при оформлении заказа, просто приходило письмо о том, что клиент оформил заказ??

  7. Аватар

    Здравствуйте.

    Необходимо в автоматической форме добавлять товар!!! Товаром являются данные, полученные через форму обратной связи на сайте. Как это можно осуществить?

  8. Аватар

    Доброго времени суток, Александр.

    Предлагаю Вам взаимовыгодное сотрудничество. Необходимо «довести до ума» и настроить магазин. Товаром для покупки являются запросы, полученные через форму обратной связи на сайте. Необходимо осуществить автоматическое пополнение базы с каждым новым полученным запросом+осуществить массовое оповещение по емайл возможных покупателей о новой поступившей заявке. Соответственно каждый запрос в зависимости от своей категории имеет разные цены. Тематика — транспортные перевозки. Сайт на испанском языке. WooCommerce и оплата по карте через банк уже установлены. Жду Вашего ответа. С Уважением.

  9. Аватар
    Антонина

    Здравствуйте! Спасибо за статью, по ней все настроила, все получилось!
    Подскажите пожалуйста, какую тему можно использовать, чтобы одной из ее функций было создание результатов фильтрации отдельной страницей? То есть, чтобы у нас не просто скрывались результаты, которые не подходят по параметрам фильтрации, а именно создавалась отдельная страница? Или может плагины какие-то есть для этого?

    • Аватар

      Здравствуйте. Смысл фильтра в скрытии ненужного, не выходя из страницы. Если же нужна отдельная страница, тогда проще создать категорию и поместить туда нужные товары.

  10. Аватар
    Владимир

    Здравствуйте! А у меня вообще на странице товара не появляется выбор по вариации, хотя всё делал по инструкции. Тему менял — не помогло. В чём может быть дело?

  11. Аватар

    Здравствуйте! У мене проблемаз варіативним товарм коли варіацій мало він відображається правільно і коли їх багато відображаються варіації які не створені при їх виборі відображається повідомленя що такого товару нема виберіть інші параметри ( тобто напиклад є двері кльору золотий дуб вони бувають розмірів 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.

    • Аватар

      Добрый день.

      У нас такая же проблема, удалось решить?

  12. Аватар
    Александр

    Подскажите почему при выборе вариативного товара (на страничке товара)не меняется цена соответствующая выбранному товару (Цена заданна каждому своя). И еще при добавлений товара в корзину пишет «Пожалуйста, укажите опции товара… » и не добавляет, хотя всё указанно.Все плагины и тему установил из офиц.иточников. Тема установлена Storefront пробовал и Mystile без изменений

    • Аватар

      Если все плагины и темы с официальных источников, все обновлено и нету никаких конфликтов скриптов и плагинов — проблема вероятнее всего в хостинге/сервере/настройке php.

  13. Аватар

    Добрый день! Подскажите, У меня в магазине кнопка купить под каждым товаром, но когда товара нет в наличии, размер кнопки меняется, а это как то не очень красиво и не симметрично. Т.е. в ряд 3 товара, кнопка КУПИТЬ у первых двух одинаковая, а у третьего товара она отличается, меньше по размеру… Александр, подскажите как сделать так, чтоб эта кнопка была одинакова на товарах которые как в наличии так и не в наличии? Где то видел подсказку типа Добавить пользовательский CSS для Внешний вид -> Настройка -> Тема Параметры -> Пользовательский код -> Пользовательские CSS… Как это сделать? Спасибо!

  14. Аватар

    Добрый день, на странице оформления заказа /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;
      }
      

      Если захотите и телефон убрать, тогда еще добавьте строчку:

      	unset($fields['billing']['billing_phone']);
      
  15. Аватар

    Пожалуйста, укажите опции товара, кто решил? напишите что сделать?

  16. Аватар

    Решение, переустановить тему, атрибуты начинают выбираться и в корзину добавляется товар правильно

  17. Аватар
    Александр

    Доброго времени суток, вот у вас показано что вы выставляете Вариативный товар и появляются Свойства у меня на сайте же не выходит такое в чём может быть причина:?

  18. Аватар

    Доброе Утро , подскажите у меня в WooCommerce нету данной функции «Свойство» что делать подскажите!

  19. Аватар

    Здравствуйте. Подскажите, можно ли изменить урл атрибутов? У меня выводятся фильтры как
    /?filter_razmer=68
    хотелось бы что-то типа /filter_razmer=180х200

  20. Аватар

    п.с. ярлыки прописаны

Оставить комментарий

Ваш email не будет опубликован.

*