WooCommerce и WordPress: делаем интернет магазин

Если при регистрации домена вы выбрали  «Бесплатный сайт на WordPress» , то вы не ошиблись! Теперь с помощью конструктора сайтов и готовых шаблонов можно не только сделать обычный сайт, а и интернет-магазин. Все это благодаря WooCommerce. Это одна из лучших платформ для организации онлайн магазина. С ее помощью вы можете превратить свой простой сайт на WordPress в интернет магазин.

WooCommerce — плагин для электронной коммерции, с помощью которого можно продавать всё, что угодно, и делать это красиво.

Какие возможности дает WooCommerce?

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

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

Сегодня мы рассмотрим такие моменты:

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

Screenshot at янв. 27 1-46-05 PM

На этом этапе вы настроите Корзину, Витрину, Оформление заказа и Аккаунт пользователя. Кроме того сможете указать локацию магазина, условия доставки, налоги, способы оплаты заказа.

Вы можете пропустить этот момент и настроить самостоятельно или воспользоваться специальным меню позже.

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

Создание категорий товаров в WooCommerce.

Допустим, наш магазин продает одежду и нам элементарно нужно разделить на женскую и мужскую.
Добавляем каждую категорию в разделе Товары -> Категории в админке wordpress.

Screenshot at янв. 27 2-09-23 PM

Для основных категорий товаров, в поле Родительская необходимо поставить «Нет».Выбор этого флажка нам понадобится когда мы начнем добавлять под-категории товаров,к примеру: Мужская одежда-> Брюки.

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

К Категории можно прикрепить миниатюру, например иконку характеризующую ее. Картинки к категориям могут отображаться на сайте при определенных настройках.

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

Для того чтобы добавить новые товары в интернет магазин, заходим в раздел Товары -> Добавить товар. Перед нами откроется окно, где в принципе интуитивно понятно что и как заполнять: название, описание основная цена, если есть — акционная.

Screenshot at янв. 27 5-25-04 PM

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

Обратите внимание на таб Сопутствующее, он будет полезен для дополнительных продаж. В Апселы можно указать товар, который вы рекомендуете в замен этому, например когда данного нет в наличии. А в Кросселы укажите товар, который будет дополнением. Например к рубашке вы рекомендуете галстук.

Screenshot at янв. 27 5-24-02 PM

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

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

Витрина

Страница, на которой будут размещаться ваши товары называется Витрина и найти ее можно в разделе Страницы, в админке WordPress. Ее адрес будет sitename.domain/shop/ . Что бы пользователи имели к ней доступ, вам нужно добавить пункт в меню сайта. Для этого, в редакторе Upfront кликаем на меню и на иконку  Screenshot at февр. 03 2-02-42 PM для продолжения редактирования. В меню слева, появится редактор. Кликаем на  Add item после чего в списке существующих страниц, появится новая — New item. Разворачиваем ее и заполняем:

  • даем новое имя, например Магазин
  • в выпадающем списке «Ссылки на» нужно выбрать «Пост или страница», далее выбрать из списка страницу с названием Витрина
  • и выбираем как открывать ссылку — в этом или новом окне.

Screenshot at февр. 03 2-09-26 PM

 

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

Внешний вид Витрины

Если ваши товары поделены на категории, то их можно отображать на странице такими способами:

  • только категории в виде иконок, переход по которым будет вести на товары в категории;
  • все товары
  • сначала плитка их категорий, за ними весь список товаров.

Для настроек переходим в админку WordPress, далее: WooCommerce -Настройки — вкладка «Товары» — раздел «Отображение».

Screenshot at февр. 03 4-34-33 PM

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

Screenshot at февр. 03 4-27-35 PM

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

 

На сегодня все. В следующей статье мы рассмотрим настройки корзины, доставки и разных способов оплаты.

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