Домой / WordPress / Создание интернет-магазина на WordPress с нуля. Урок 3. Добавление товара в WooCommerce
Создание интернет-магазина на WordPress с нуля. Урок 3. Добавление товара в WooCommerce

Создание интернет-магазина на WordPress с нуля. Урок 3. Добавление товара в WooCommerce

Здравствуйте друзья! В этом уроке мы продолжаем создание интернет-магазина, и сегодня я покажу как правильно добавлять новые товары в магазин.

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

Как добавить новый товар в WooCommerce

Для того чтобы добавить новый товар переходим с административного меню в Товары -> Добавить товар.

Создание интернет-магазина на WordPress с нуля. Урок 3. Добавление товара в WooCommerce

Добавление названия, описания и категории товара

В открывшемся окне добавляем название товара (самое верхнее поле для заполнения).

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

Создание интернет-магазина на WordPress с нуля. Урок 3. Добавление товара в WooCommerce

Указываем название товара, категорию, и описание

Добавление цены, краткого описания, изображения и галереи товара

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

Изображение товара (миниатюра) добавляется абсолютно также как и обычная миниатюры к записи WordPress.

Для добавления галереи товара (дополнительные изображения продукта) нажмите «Добавить картинки галереи товара» и укажите необходимые изображения.

Краткое описание товара — описание, которое отображается обычно с правой стороны от изображения заполняем в блоке «Краткое описание товара».

Создание интернет-магазина на WordPress с нуля. Урок 3. Добавление товара в WooCommerce

Результат который получился:

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

В результате добавленный товар в интернет магазин на базе плагина WooCommerce и темы Storefront получился как на изображении ниже:

Создание интернет-магазина на WordPress с нуля. Урок 3. Добавление товара в WooCommerce

Спасибо за внимание! Если у вас остались вопросы или появились проблемы при добавлении товаров/настройке WooCoomerce — пишите их в комментариях!

Читайте далее:

 

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

Обзор

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

Оценка

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

Рейтинг: 4.17 ( 14 голосов )
100

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

  1. Аватар

    Здравствуйте! Скажите как реализовать сетку, как у вас на скрине , для формы «краткое описание товара»? И еще установил плагин Saphali Woocommerce Russian, но не все переведено, например «товары -> add product».

    • Аватар

      Здравствуйте!
      В примере как на скрине вы видите обычную html таблицу. Чтобы добавить такую же таблицу как у меня на скрине, перейдите с визуальной вкладки редактора на вкладку текст и вставьте код (взят из примера как на скрине):

      <table>
      <tbody>
      <tr>
      <th>No.</th>
      <td colspan="2">88 07 250</td>
      </tr>
      <tr>
      <th>EAN</th>
      <td colspan="2">4003773019343</td>
      </tr>
      <tr>
      <td align="center"></td>
      <th>Клещи</th>
      <td>хромированная</td>
      </tr>
      <tr>
      <td align="center"></td>
      <th>Ручки</th>
      <td>с чехлами созданы методом погружения, испытаны в соответствии нормативам VDE</td>
      </tr>
      </tbody>
      </table>
      

      По поводу перевода. Рекомендую обновить до последней версии Woocommerce. В данный момент на моем тестовом сайте стоит последней версии Woocommerce без Saphali Woocommerce Russian и перевод полностью русский (включая наличие в выборе валюты «рубли»). Если не поможет — переводите плагин вручную 😉

      • Аватар

        Спасибо за ответ! Пару лет назад изучал основы html, и не дотукался, про сетку. Вуукоммерц сегодня попробую обновить. Если можно хочу уточнить еще один момент. Нас 4 человека, хотим создать инет магазин. Продвижением сайта (статьи, новостная лента, настройка плагина и т.д.) буду заниматься я, и полный доступ в админку сайта будет только у меня. Наполнять сайт «товаром» (описание, фото, выставление цен) будут остальные трое, но у каждого из них должна быть своя, независимая категория в магазине, где каждый из них может в любой момент добавить или удалить «товар», но у них должен быть ограниченных вход в админку плагина или движкка, например как сотрудник который расставляет товары в супер маркете. При всем этом у каждого из них не будет возможности внести изменения в ветку другого. Вот не могу понять как это реализовать.

  2. Аватар

    Спасибо! Правда в англ я полный ноль, но через гугл переводчик уловил главную мысль, теперь есть еще одна тема для размышлений.

  3. Аватар

    Здравствуйте. Такая проблема: товары не отображаются в категориях. Т.е. товары есть, категории есть, жму на категорию, а там ничего не найдено. Что может быть? Заранее спасибо

  4. Аватар

    Добрый день. Интересует плагин по WooCommerce для реализации цифрового товара (заплатить/скачать книгу). Что можете посоветовать?

    • Аватар

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

      Вам остается только подключить необходимую Вам платежную систему для оплаты в онлайн режиме, и все будет работать!

  5. Аватар
    Ворон 65

    Товар после нажатия кнопки -в корзину,не попадает в корзину а просто отражается страница товара.Что я делаю не так?

    • Аватар

      Здравствуйте!
      По умолчанию, после добавления товара в корзину, перехода в нее и не должно быть. Для того чтобы пользователь переходил в корзину после добавления товара сделайте следующее:
      Зайдите в WooCommerce — Настройки — Товары — Отображение. Поставьте галочку в «Перенаправить в корзину после успешного добавления» и сохраните настройки.

  6. Аватар
    Ворон 65

    Попробовал на другом сайте.Уже с другой темой-кнопка»добавить в корзину » есть,а товар все равно не попадает в корзину.Чего то точно не догоняю…. Вот второй сайт- http://avto.zt.ua/

  7. Аватар

    Приветствую, Александр! Все примеры на Storefront.
    Вот создал я категорию «Платья». Добавил в неё товары, как все Вы описали выше. Дальше, все товары отображаются на основной странице магазина, которую мы указываем в настройках WooCommerce. Теперь создаю в меню Вордпресса страницу или рубрику с таким же названием-«Платья»
    1. Непонятно, как теперь «связать» и заставить отображаться группу товаров в необходимой категории??
    2. Кроме того, если я захожу просто со страницы магазина на карточку товара, то в урле появляется лишнее звено. Например, при наведении курсора на карточку товара урл правильный http://wptest.ru/shop/plyatya/plate10/. А при переходе на сам товар, в хлебных крошках появляется следующее: Главная / Каталог / Платья / Платье10. Где «Платья» имеют урл wptest.ru/товарная-категория/plyatya, который при переходе дает 404. Т.е. совсем не могу понять откуда берется «товарная-категория», еще и на русском (использую Cyr to Lat)?
    Заранее спасибо)

    • Аватар

      Здравствуйте, Артём!
      1. Связывать ничего не нужно, как и не нужно создавать страницы или рубрики для вывода категорий товаров на странице сайта. В меню нужно добавить категорию магазина. По умолчанию в Внешний вид — Меню, на левой панельки такого пункта может и не быть. Для этого нажмите в верхнем правом углу кнопку «Настройки экрана» и отметьте галочкой пункт «Категории товаров». После этого вы сможете добавлять в меню категории товаров!
      2. Сделайте все как в уроке «Настройка ЧПУ в WooCoommerce».

  8. Аватар
    Ворон 65

    Александр Овчаренко и снова здравствуйте.Не сочтите за наглость.Но я так и не догнал как должна появляться кнопка добавить в корзину.Если Вам не составит труда глянте одним глазом на ,этот тренировочный сайт- berdichev.zt.ua.Я видно уже зациклился и не вижу ошибки.Сайт мне не важен ,я на нём просто тренируюсь.

    • Аватар

      Глянул, ошибка действительно из-за Вашей зацикленности 😉 Нужно было всего лишь указать цену товару. Без указанной цены кнопка «Добавить в корзину» не появляется.

  9. Аватар
    Ворон 65

    Я благодарен Вам безмерно,если возможно я буду к Вам обращаться?

  10. Аватар
    Ворон 65

    Еще раз благодарю! Удачи Вам во всех начинаниях!

  11. Аватар

    Большое спасибо! Ну и намучился же я. Так очевидно и в то же время нет) Я просидел часов 15 и дошел все-таки до шорткодов. Получается с их помощью можно также добавлять категории, но только на страницы. Получается, что для реализации категорий существует несколько вариантов, если я правильно все понял.
    Еще раз спасибо!!!

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

    Здравствуйте! Подскажите пожалуйста как реализовать такую структуру выведения товаров спортивного питания — в боковой панели должны выводится производители (реализовала при помощи категорий), а также списком должны выводиться группы — протеины, гейнеры, и т.д. При помощи меток выводится облаком, а нужно именно списком. Выводить при помощи атрибутов и виджета фильтра? Когда задала атрибут к товару — напр. протеины, не поняла что писать в поле — Задайте значение. Виджет добавила — фильтр по атрибутам, но ничего не появилось в боковой панели. Возможно я что-то делаю не так, подскажите плиз.

    • Аватар

      Здравствуйте, Антонина!
      Вы правы, такой список (фильтр, навигацию) лучше всего делать с помощью атрибутов. Создайте атрибуты в Товары -> Атрибуты (Не добавляйте индивидуальные атрибуты в товаре! Сперва создайте их в Товары -> Атрибуты). Структура будет выглядеть так:
      Вы создаете атрибут: «Продукция» и внутри него добавляете свойства «протеины», «гейнеры» и т.д. Далее для создания списка рекомендую использовать плагин YITH WooCommerce Ajax Navigation. Он дает возможность с помощью виджета сделать фильтр (навигацию) по атрибутам товара.

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

    И еще такой вопрос, добавила плагин Hompage control, в виджетах он появился, но галочки хоть снимаю, хоть ставлю никаких визуальных изменений не происходит. Может нужно как-то его настраивать, не поняла как, если знакомы с этим плагином подскажите хоть в двух словах, что и как с ним делать. Буду очень признательна!

  14. Аватар

    Добрый вечер,подскажите пожалуйста. у меня рядом с картинкой товара не отображаются цены.

    • Аватар

      Здравствуйте, Елена!
      В случае если товар вариативный, убедитесь что цены проставлены на всех вариациях. Также, возможно в настройках Вашей темы нужно убрать «режим каталога». Причин может быть очень много…

  15. Аватар

    Здравствуйте. Подскажите, пожалуйста, во время загрузки фото у меня происходит ошибка HTTP и после публикации товара — картинка его не отображается

    • Аватар

      Причин может быть достаточно много, проверьте следующее:
      1) Возможно изображение превышает допустимый размер для загрузки, в этом случае поможет урок http://wordpress-club.com/kak-uvelichit-maksimalnyiy-razmer-zagruzhaemyih-faylov-v-wordpress
      2) Права доступа к папкам. Установите 777 и посмотрите на результат.
      3) Попробуйте добавить в файл wp-config.php код:

      define('WP_MEMORY_LIMIT', '64M')
      

      4) Обратитесь в службу поддержки хостинга, возможно они смогут подсказать более точную причину.

  16. Аватар

    Добрый день.
    Такая проблема. При добавлении товара, добавляю картинку товара, как положено, через миниатюру, но почему-то картинка стала вылезать дополнительно в шапку в увеличенном виде. Раньше такого не было. Видно здесь: http://www.e-mily.ru/product_cat/%d0%bc%d0%b0%d0%b9%d0%ba%d0%b0-poker/
    Чую что дело в настройках, но не могу разгадать, что влияет на это. Если есть мысли, буду благодарен.

    • Аватар

      Здравствуйте!
      В стандартный настройках WooCommerce ответ думаю Вы не найдете. Если нет дополнительный настроек в самой теме, то у Вас 2 варианта:
      1) Откройте файл header.php и удалите часть кода отвечающего за вывод изображения. (Более правильный вариант. Но нужно постараться сделать все правильно, чтобы отображался логотип, а не просто удалить изображение)
      2) Спрячьте изображение с глаз долой. Для этого добавьте в CSS следующий код:

      #branding img {
          display: none!important;
      }
      
  17. Аватар

    Здравствуйте!
    Я пока новичок wordpress и в woocommerce.
    Такая проблема. При выводе товаров на главной не отображаются изображения товара и нет кнопки Купить. Шаблон поддерживает Woocommerce, но не понимаю куда копать…
    И еще, хотелось бы изменить размеры блока одного товара на главной и отцентрировать его на странице по центру. Спасибо.
    http://guardian.in.ua

    • Аватар

      Здравствуйте!
      Убедитесь что Вы указали цену товару и что не включен в настройках темы «режим каталога».
      Для вывода изображений нужно указывать миниатюру в товаре. Если ничего из этого не помогает — вероятнее всего проблема не в плагина, а в Вашей теме.
      Для изменения размеров блока нужно изменить размер его изображения, сделать это можно перейдя в WooCommerce -> Настройки -> Товары -> Отображение -> Изображения Товара -> указываем нужные размеры и нажимаем кнопку «Сохранить изменения». А все остальные делайте с помощью CSS.

  18. Аватар

    Добрый день!

    При переходе на страницу «Оплата» сайт почему-то становится трехколоночным, из-за чего невозможно заполнить форму оплаты. http://test.tovaropt.biz/checkout
    Подскажите, пожалуйста, что нужно сделать, чтобы убрать ненужные колонки?

    Спасибо!

  19. Аватар

    Вопрос уже не актуален. Проблемка решена )

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

    Здравствуйте. Такая проблема: товары не отображаются в категориях. Т.е. товары есть, категории есть, жму на категорию, а там ничего не найдено. Что может быть? Заранее спасибо

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

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

*