Автор: Анастасия, wphelp.ru

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

Самым легким плагином для создания интернет-магазина на WordPress можно считать Quick Shop. Он не будет перегружать сайт и настроить его можно в течение 10 минут.

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

Теперь давайте рассмотрим все этапы его настройки.

1. Устанавливаем и активируем плагин Quick Shop

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

2. Устанавливаем и активируем плагин cformsII

Данного плагина нет в хранилище WordPress, поэтому скачиваем его с сайта автора.

3. Создаем страницу оформления заказа

Переходим в раздел «Страницы», нажимаем «Добавить новую» (см. рисунок 1).

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

Важно! Мы НЕ вставляем на этой странице форму заказов cforms. Иначе мы получим дубль из двух форм, так как эта форма прикрепляется автоматически.

Аналогично создаем страницу, куда будет переадресован пользователь после оформления заказа. Например, назовем её «Ваш заказ принят». Здесь вы можете поблагодарить клиента за заказ и дать ему определенные инструкции.

Рисунок 1. Добавление страницы оформления заказа

4. Настраиваем плагин Quick Shop

Переходим на страницу настроек Quick Shop (см. рисунок 2).

Из обязательных пунктов Вам нужно указать валюту и символ валюты, выбрать страницу оформления заказа, которую мы создали в предыдущем шаге, а также включить опцию «Запрос счета по E-mail». При этом Вам будет отправляться оповещения об оформлении заказа, после чего Вы сможете связаться с клиентом и уточнить детали доставки и оплаты.

Важно! Чтобы перед символом валюты сохранился пробел, мы указываем его в виде html-символа  

Рисунок 2. Страница настройки плагина Quick Shop

5. Настраиваем плагин cformsII

Переходим в раздел настроек cformsII (см. рисунок 3).

Рисунок 3. Настройка плагина cformsII

У вас уже будет создана 1-я форма по-умолчанию. Вы можете оставить ее как есть.

Вместо нее будет использоваться форма самого Quick Shop.

Важно! Чтобы произошло прикрепление формы Quick Shop, используется именно первая форма, созданная в cformsII (id формы = 1), поэтому мы ее не используем под другие цели. Если Вам необходимо создать, например, форму контактов в с помощью этого плагина, Вы создаете новую форму (см. рисунок 4).

Рисунок 4. Добавление новой формы cformsII

На странице настройки формы вы можете указать в секции «Messages, Text and Button Label» русскоязычные сообщения, которые вы хотите показывать клиентам в ходе оформления заказа (см. рисунок 5).

Рисунок 5. Настройка сообщений для формы оформления заказа

Нам важнее секция Core Form Admin / Email Options. Здесь мы настраиваем переадресацию на страницу «Ваш заказ принят» после оформления заказа (созданную на 3-м шаге).

Обязательно ставим галочку «Hide Form after successful submission» и «Enable alternative success page» (под этим пунктом указываем ссылку для переадресации) (см. рисунок 6).

Остальные настройки можно оставить «как есть».

Рисунок 6. Настройка переадресации на страницу оповещения об успешном оформлении заказа

6. Добавляем список товаров

Нажимаем в админке на вкладку Quick Shop и попадаем на страницу, где нам заранее необходимо указать список товаров и их цен (см. рисунок 7).

Список задается в формате «Заголовок | Цена», каждый товар с новой строки. Сохраняем изменения.

Рисунок 7. Добавляем список товаров Quick Shop

7. Прикрепляем товар к записи в блоге

Переходим в раздел «Записи». Создаем новую запись. Добавляем описание продукта. Далее нажимаем на иконку в виде корзинки на панели инструментов визуального редактора и выбираем из выпадающего списка соответствующий товар (см. рисунок 8). Нажимаем кнопку «Insert». Сохраняем запись.

Рисунок 8. Прикрепление товара к записи

В итоге, на странице записи у нас появляется форма для добавления товара в корзинку (см. рисунок 9). В приведенном примере на уровне плагина удалено поле для ввода количества товара, по-умолчанию в плагине оно есть.

Рисунок 9. Товар на сайте

8. Добавляем виджет корзины

Теперь нам осталось только отобразить корзинку с товарами пользователя на сайте.

Для этого переходим в раздел «Внешний вид» → «Виджеты» в админке и перетаскиваем виджет Quick Shop Cart в необходимую область виджетов (см. рисунок 10).

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

Рисунок 10. Добавляем виджет корзины

Получаем корзину на сайте (см. рисунок 11).

Чтобы изменить внешний вид корзины, вы можете отредактировать файл widget.php в папке плагина Quick Shop, или воспользоваться редактором WordPress («Плагины» → «Редактор» → Выбираем из выпадающего списка в правом верхнем углу Quick Shop → Далее в боковом меню слева выбираем файл quick-shop/widget.php). Если у Вас нет начальных знаний php / html делать это не рекомендуется.

Рисунок 11. Корзина Quick Shop на сайте

На этом наш урок закончен!

Скачать русскую версию плагина Quick Shop вы можете по этому адресу.

Вам понравился материал?
  • http://twitter.com/FrilkaCom Копилка Фрилансера

    Прикольно! :) Надо будет попробовать :)

  • Xerox

    В чём проблема ?: не отображает корректно кириллицу.

  • Нурик

    Установил как все здесь написано, при добавление записей не меняется кнопка визуально на html и наоборот ? не подскажите в чем проблема и как ее решить ? заранее благодарю

  • Flamingoevent

    Установила плагин, стала добавлять Запись+картинку товара , появился небольшой белый прямоугольник на всех страницах сайта.

    • http://vitaest-s.ru/ Татьяна

      скорее всего Ваша тема не поддерживает этот плагин...

  • Xaaaaa

    получилось все отлично

  • Lenara96

    Хочу уточнить: в какой валюте можно указывать цены? Можно в украинских гривнах?

  • http://gota.hostenko.com/ Марина

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

  • Гость

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

  • http://sati.avtoblog.su/ Игорь

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

    • Игорь

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

  • Олег Капустин

    Подскажите плиз как поменять эту самую форму заказа? если меняю форму с айди 1 в самом cformsII — форма заказа не меняется, смысл в том что мне надо что бы в форме было только четыре поля — а остальные убрать — как это сделать?

  • Карина Кожевникова

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

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

    • http://wordpresso.org Wordpresso

      Попробуйте сменить кодировку на UTF-8 в браузере.

      • http://blogmihalev.ru/ Михалёв Евгений

        Сменил кодировку. Все по прежнему. И товара на странице вовсе нет. Что делать?

      • http://blogmihalev.ru/ Михалёв Евгений

        Вот такая штука происходит! Как исправить?

  • Тимур

    День добрый! Скажите пожалуйста, а нельзя ли сделать меню заказа из вертикального расположения в горизонтальное? А то очень много места съедает... товаров же много:)

    И как убрать строку доставки?

  • Андрей

    Добрый день! Все делал, как на видео, дошел до момента «7. Прикрепляем товар к записи в блоге», но у меня не появилась корзинка...Помогите пожалуйста, что надо сделать?

  • Anna

    Добрый день! Подскажите, а можно настроить вместо кнопки «добавить в корзину» — связаться с автором, который добавил товар. Хочу установить плагин в качестве каталога товаров, а о покупке договариваться уже непосредственно в сообщении.

    • http://wordpresso.org Wordpresso

      Пожалуйста, обратитесь в официальную поддержку данного плагина. Мы не консультируем по детальным кастомным настройкам работы плагина, а делаем обзор его основных возможностей.