Делаем интернет магазин WordPress, с плагином WooCommerce. Часть 2 настройка и запуск опубликовал Радик Алиев категория  
просмотры 87 003

Делаем интернет магазин Wordpress, с плагином WooCommerce. Часть 2  настройка и запуск

Нами уже были рассмотрены установка и первоначальная настройка WooCommerce в статье «Установка и настройка интернет магазина WordPress». Для дальнейшей эффективной эксплуатации этого плагина требуется добавление различных видов реализуемых изделий, а также добавление и редактирование некоторых параметров, недоступных из админ-панели. Именно о реализации данных действий и пойдет речь в этой статье.

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

Типы товаров, поддерживаемых WooCommerce

Тип «обычный товар»

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

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

Тип «группированный товар»

Тип «группированный товар» позволяет объединять товары, добавляя похожие. Ярким примером такого типа товаров служит предложение типа «купите этот телефон и эти наушники, наиболее подходящие к нему». Использование данного типа товаров позволяет реализовать такую возможность как приобретение помимо основного товара и дополнительной продукции. При этом у группированных товаров отсутствует цена. Ее добавление выполняется на страницах, относящихся к каждому «прикрепленному» товару.


Тип «внешний товар»

Тип «внешний товар» относится к одному из самых экзотических. С его помощью можно организовать «виртуальный» магазин, торгующий товарами, предоставленными крупными интернет-магазинами по различным партнерским программам. Для этого создается интернет-магазин и наполняется товаром, представленным в магазинах-партнерах. Клиент, при нажатии кнопки «Купить» перенаправляется на партнерский сайт, где и осуществляется окончательная покупка товара.

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

Тип «вариативный товар»

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

В детальной разборке каждой закладки в форме добавления нет особой необходимости, поскольку их организация довольно простая и, к тому же, на русском языке. Следует лишь упомянуть про опцию «Видимость», расположенную около кнопки «Опубликовать». Ее активация позволяет управлять пометкой «Рекомендуемый» и установить место отображения товара. Возможные значения данного параметра: нигде, везде, только в каталоге товаров, только в результатах поиска.

Тут плагин WooCommerce.

Темы оформления WooCommerce

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

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

  • находим файл /woocommerce/assets/woocommerce.css и производим его копирование в папку применяемого шаблона
  • производим копирование в папку, содержащую изображения шаблона, графических файлов из папки /woocommerce/assets/images/.

После этого выполняем подключение к движку нашего скомпилированного стиля. Это действие производится добавлением в function.php шаблона следующего кода:

В заключение выполняем отключение на странице основных настроек плагина использования встроенных стилей WooCommerce.

Теперь у внимательных читателей возникает резонный вопрос – в связи с чем нельзя выполнить обычную правку стиля плагина? Ответ на этот вопрос достаточно прост – очередное обновление WooCommerce, которые производятся достаточно часто, вызовет удаление внесенных изменений и возврат к значениям по умолчанию. Таким образом, будет большой ошибкой применять данный метод в больших проектах, поскольку очередное обновление вызовет необходимость проведения большого объема выполненных ранее работ заново. Не допускайте данного просчета. Файл же, в котором сохранены стили, можно смело подвергать редактированию – все будет корректно сохранено и никуда не пропадет.

Теперь рассмотрим вывод магазина на страницах сайта. Настройки этого процесса по умолчанию не всегда способны удовлетворить пользователей. В таком случае необходимо выполнить шаблон страницы собственными силами. Для этого производим копирование page.php и его переименование в woocommerce.php. Теперь дорабатываем его в соответствие со следующей схемой:

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

Добавление кода производится в functions.php. Конечно, возможно удаление всего этого из шаблона вывода в плагине. Однако не стоит забывать про его регулярные обновления. Выходом из данной ситуации может служить следующая последовательность действий: копирование папки woocommerce/templates в папку шаблона и ее переименование в woocommerce. Теперь при редактировании можно не опасаться об исчезновении внесенных изменений при обновлении.

Не забываем роо оптимизацию интернет магазина:

Вывод

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

Стоит отметить, что существуют и альтернативные плагины, позволяющие проделывать аналогичную работу. Однако, основываясь на собственном опыте, можно с уверенностью сказать, что WooCommerce является лучшим решением для WordPress, позволяющим создавать интернет-магазины.

Теги:

61 Комментарий

Оставить комментарий
  1. Александр Февраль 16, 2013 at 12:26 пп #

    Спасибо за хороший урок! Столько искал в Интернете, но подобного еще не находил!

  2. Андрей Сентябрь 1, 2013 at 11:01 пп #

    А как переименовать вообще «Магазин», «Товар»? Я просто хочу использовать плагин под бизнес-школу, построенную по принципу магазина, и надо переименовать.

  3. Максим Октябрь 1, 2013 at 12:58 пп #

    Андрей
    Сентябрь 1, 2013 at 11:01 пп #
    А как переименовать вообще “Магазин”, “Товар”? Я просто хочу использовать плагин под бизнес-школу, построенную по принципу магазина, и надо переименовать.

    Такая же проблема… уже и не знаю где искать.

    woocommerce\i18n\languages\woocommerce-ru_RU.po тут поменял!
    в базах данных не находит!
    в «Страницы» переименовал. магазин на каталог.
    а как поменять слово «ТОВАРЫ» в крошках и не могу найти…
    Есть ли люди которые знают где это править?

  4. Алексей Октябрь 2, 2013 at 12:50 дп #

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

    • Максим Октябрь 2, 2013 at 4:00 пп #

      какую тему используешь ?

      • Алексей Октябрь 7, 2013 at 3:13 пп #

        canvas

        • Татьяна Декабрь 18, 2013 at 4:08 дп #

          Та же проблема. Пробовала менять темы — всё равно съезжают виджеты вниз или отображаются !одновременно снизу и справа(где и должны быть)

          • Александр Февраль 15, 2014 at 3:44 пп #

            Кто-то нашел решение этой проблемы??? Столкнулся с той же проблемой(((

  5. Дмитрий Октябрь 11, 2013 at 5:52 пп #

    Подскажите, пожалуйста, как решить такую проблему — нажимаю «Добавить товар», а мне открывается белая страница с адресом «http://мой_сайт/wp-admin/post-new.php?post_type=product»
    Такая же проблема с «Категории»…
    Второй день гуглю — ответов не нашел. Даже не могу понять где проблема — ВП, ВуКоммерсе, хостинге или еще что-то…
    Заранее благодарю.

    • Gennady Октябрь 11, 2013 at 6:56 пп #

      проблема скорее всего в плагинах или теме что используется.. нежели в хостинге..

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

  6. Арип Октябрь 27, 2013 at 6:50 пп #

    У меня такая проблема на сайте… когда пишу отзыв к товару и нажимаю на кнопку “оставить”, то начинается бесконечное перенаправление и браузер сообщает об этом. Не знаете в чем может быть проблема? И еще – отзыв публикутеся не смотря на бесконечное перенаправление

    • Gennady Октябрь 28, 2013 at 4:13 пп #

      после публикации отзыва срабатывает какой-то редирект. возможно на страницу «спасибо за отзыв», которой уже нет…

      зацикленный редирект обычно бывает на ошибку 404, при отсутствии страницы обрабатывающей эту ошибку(т.е снова возникает 404 ошибка)

      • Арип Октябрь 28, 2013 at 4:49 пп #

        Спасибо большое за отклик! То есть возможно нет страницы 404, но если проверить и перейти по несуществующему пути, сайт выдает ошибку. Например перейдите https://modboy.ru/товар/шорты-в-обтяжку/324цук
        Кстати не знаете как проверить есть ли вообще страничка — «спасибо за отзыв», в каталоге страниц его нет…

        И еще я спрашивал у админов хостинга, они мне прислали такой ответ:
        «При добавлении отзыва в логах прописывается следующее:
        GET //%d1%88%d0%be%d1%80%d1%82%d1%8b-%d0%b2-%d0%be%d0%b1%d1%82%d1%8f%d0%b6%d0%ba%d1%83/

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

        Если это не поможет, будем разбирать проблему глубже.»

      • Арип Октябрь 28, 2013 at 6:29 пп #

        Отбой)! Проблема решена! Помогла настройка постоянных ссылок в параметрах wordpress (поставил по умолчанию). Как обычно бывает проблема оказалась в пустяке. Огромное спасибо за подсказку ребятам из Saphali — это разработчики русской локализации woocommerce ))

  7. Лев Октябрь 30, 2013 at 1:06 пп #

    Здравствуйте! У меня такая проблема. При оформлении заказа из корзины не могу пройти к оплате. А также не загружается аккаунт! все правильно прописано, страницы все связаны с плагином. но ничего не получается. пробовал разные шаблоны. все равно не получается. instrumentzatak.ru хотел уже товар заливать и дизайн делать. вовремя спохватился! помогите!!!

    • Gennady Октябрь 30, 2013 at 5:03 пп #

      возможно плагин WooCommerce не обновился под самую свежую версию WordPress 3.7.1, ждите обновления WooCommerce или используйте совместимые версии WordPress+WooCommerce

    • Арип Ноябрь 5, 2013 at 6:42 дп #

      А что появляется при переходе к оплате?

  8. Джаксер Ноябрь 4, 2013 at 2:17 дп #

    Возможно ли прикрутить плагин к уже суещствующему сайту с каталогом товаров? Чтоб на страницах с товаром рядом появилась цена и «купить» ??
    А то оно все по новой создает…

    • Gennady Ноябрь 4, 2013 at 11:35 дп #

      возможно,
      это называется перенос данных (вручную или автоматизируете) с вашего существующего каталога на WooCommerce, и правка шаблонов дизайна чтобы внешний вид остался вашего каталога.. т.к иначе это костыли

      если вам не нужны все функции плагина WooCommerce, в частности корзина покупателя, а нужно просто чтобы была цена у товара и посетитель мог сформировать заказ на этот товар посредством эл. почты, то проще(например если у вас 1000+ товаров) прикрутить цену товара и отправку письма-заказа по кнопке купить с нужными данными: ссылка на страницу товара, название, цена, кол-во, способ доставки, цена доставки…..

  9. Арип Ноябрь 5, 2013 at 6:37 дп #

    Здравствуйте! Столкнулся с проблемой в woocommerce (. Когда добавляю товар в корзину, то в корзине на продукте, не отображается количество товаров. Функция добавления и удаления (+ и -) работают, но не видно циферок. На explorerе открывал, всё нормально отображается, а в опере и гугл хром циферки не отображаются. Помогите, пожалуйста…

    Сайт miostat.ru

    • Gennady Ноябрь 5, 2013 at 4:32 пп #

      Здравствуйте! Арип, подобная проблема интернет магазина на плагине WooCommerce замечена на новой WordPress 3.7.1

      • Арип Ноябрь 5, 2013 at 4:47 пп #

        то есть такое у всех что-ли?

        • Gennady Ноябрь 5, 2013 at 5:43 пп #

          на версии WooCommerce 2.0.19 что вчера вышла (04.11.2013) говорят что работает, не проверял

          • Арип Ноябрь 6, 2013 at 1:00 пп #

            Нет, у меня версия обновилась, но проблема осталась

  10. Серг Декабрь 9, 2013 at 10:16 пп #

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

    • Gennady Декабрь 10, 2013 at 1:06 дп #

      конечно есть… как вариант на основании «проверки текущего url» подключать тот или иной кусок шаблона в вашей теме.. ведь WooCommerce это обычный плагин Wordprees

      ну а если вам всего лишь требуется выводить разные тексты перед товарами в разных рубриках, то возможно вам достаточно заполнить описание этих рубрик (а плагин Rich Text Tags, Categories, and Taxonomies расширит возможности этого поля — позволит управлять этим полем с помощью html редактора)

      • Серг Декабрь 10, 2013 at 2:21 дп #

        Спасибо! Еще всетаки нарыл в сети решение — шорткод вывода товаров на странице, а там уже нужный шаблон подключил и текст разместить не проблема. Но ваш способ тоже попробую!

  11. Серж Декабрь 17, 2013 at 9:26 дп #

    в коде, который приведён для function.php текущей темы это случайно не ошибка get_template_directory_uri() ? url проде так пишется )

    • Gennady Декабрь 17, 2013 at 3:21 пп #

      нет не ошибка, get_template_directory_uri() стандартная функция WordPress — получает URL до текущей темы

  12. Серж Декабрь 17, 2013 at 9:43 дп #

    В какую папку копировать page.php? у меня в этой файле совсем другая конструкция.

  13. Андрей Март 29, 2014 at 9:18 дп #

    Приветствую у меня такая проблема. Все сделал, категории назначил, начал уже товаром магазин забивать. И тут с главной страницы нажимаю на одну из категорий, а меня вместо того, чтобы перекинуть на страницу с товаром, перекидывает на страницу с Ошибка 404. Че это может быть за ерундь? Подскажите будьте добры. Я уж и переустанавливал, и сайт заново делал. В общем голову уже сломал. Спасибо.

  14. Арип Март 29, 2014 at 12:32 пп #

    У меня такая же проблема! Ещё плюс к этому, если обновляю плагин woocommerce до последней версии версии, то слетает оформление магазина, и сайт отображается очень криво!
    Дайте вашу ссылку посмотреть на сайт.
    Вот мой магазин: mastersporta75.ru

  15. adward Апрель 2, 2014 at 1:24 дп #

    Я создал несколько Свойств товаров. На странице товара указал эти свойства (цвет: красный, синий; размер: S, L и так далее)

    http://f6.s.qip.ru/jAMAwrqL.png

    Подскажите, plz, как мне их вывести на странице товара?

  16. Федя Май 4, 2014 at 9:26 пп #

    Я не понял как сделать функцию оплаты электронные деньги на плагине
    woocomerce а то это большая проблема!

    • Gennady Май 5, 2014 at 12:04 дп #

      как вариант использовать плагин Robokassa for WooCommerce — плагин добавляет платежный шлюз Робокасса и соответственно позволяет принимать оплату Webmoney, Яндекс.Деньги, Деньги@mail.ru, QIWI, RBKMoney, Z-payment и др.), терминалы мгновенной оплаты, ПК VISA, MasterCard

  17. Серг Май 4, 2014 at 10:58 пп #

    Кажется уже забросили эту страницу, никто не отвечает :-(((

    • Gennady Май 5, 2014 at 12:07 дп #

      весна, солнце, шашлык мешают отвечать на вопросы наверное )

      • Серг Май 5, 2014 at 3:08 пп #

        Другого объяснения я не вижу)))

  18. Федя Май 19, 2014 at 7:51 пп #

    А как добавить изображение к товару а то включаю товар
    и без изображения, и как вставить?

    • Серг Май 20, 2014 at 6:49 дп #

      В миниатюру добавляй. Если нет миниатюры в теме тогда много гемора и танцев с бубном.

  19. Олеся Июль 13, 2014 at 11:12 пп #

    Здравствуйте! Подскажите пожалуйста, как сделать цвета в квадратиках возле товара? Огромное спасибо!

    • Серг Июль 14, 2014 at 10:09 дп #

      Подробности в студию!

  20. Олеся Июль 14, 2014 at 11:45 дп #

    Например, в интернет-магазине продается футболка. Показана картинка футболки, а рядом квадратики с разными цветами(например, красный и синий). Нажимаем красный и покупаем. Как сделать эти самые квадратики с цветами, подскажите пожалуйста!

    • Серг Июль 14, 2014 at 5:04 пп #

      либо искать плагин такого рода, тут например http://wpcommerce.ru/portal/
      либо использовать доп поля для этого но там придется ковырять шаблоны сайта

  21. Сергей Июль 16, 2014 at 3:34 пп #

    Подскажите, при оформлении заказа, в корзине свойства товара (цвет: белый) выводится текст такого вида %d1%88%d0%be%d1%80%d1%82% . Знаю что дело в кодировке (база UTF ) не понимаю что делать, все перепробывал

  22. Иван Август 1, 2014 at 12:08 пп #

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

    • Серг Август 4, 2014 at 1:52 пп #

      ничего не понял на счет рубрик))

    • Станислав Ноябрь 27, 2014 at 7:37 пп #

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

  23. Юрий Август 4, 2014 at 2:05 пп #

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

    • Серг Август 4, 2014 at 6:47 пп #

      все стили в теме, которая активна, точно не могу сказать где именно, но чаще всего в корне темы
      а вообще файербаг в помощь 😉

  24. Сергей Май 13, 2015 at 1:45 дп #

    Как убрать картинку товара или услуги при выведении в магазин? В магазине предполагается оплата услуг и картинка в общем не нужна, а лишь только мешает. Спасибо

    • Серг Май 18, 2015 at 11:00 дп #

      Можно просто display: none

      • Сергей Май 18, 2015 at 5:27 пп #

        а где в настройках найти? не нашёл такого…

        • Серг Май 18, 2015 at 6:45 пп #

          Да это css свойство 🙂 в настройках вроде и нет, там либо хуки в php. Либо вот этот костыль, например есть картинка, она обрамлена в div а ему присвоен класс или айди и вот им дать свойство {display: none;} а лучше {display: none !important;}

          • Сергей Май 18, 2015 at 8:31 пп #

            А можете поконкретней написать где именно код искать? Я сам всё делаю и не очень в этом разбираюсь. Единственное, что смог сделать, это в картинках указал размер по нулям.

  25. Иван Май 25, 2015 at 10:35 дп #

    Здравствуйте. Есть такая проблема. На странице товара снизу есть блок с похожими записями, а под ним блок с похожими товарами. Как можно убрать блок с похожими записями? Просто он никак не вписывается в шаблон интернет-магазина, к тому же он по сути дублирует похожие товары. В интернете искал, нет нигде ответа. Заранее спасибо за ответ.

    • Серг Май 26, 2015 at 2:38 пп #

      в настроках вроде не уберешь((
      можно ковырять файлы самого плагина, что бы убрать эту пакость))
      а можно выводить товары на простых контентных страницах через шордкоды
      на офсайте есть
      http://docs.woothemes.com/document/woocommerce-shortcodes/

  26. Елена Июнь 10, 2015 at 1:07 дп #

    Подскажите,у меня фото товаров открывается в той же вкладке но на белом фоне,это очень не удобно(Может можно что то сделать?

    • Серг Июль 19, 2015 at 3:49 пп #

      Можно попробовать плагин FancyBox for WordPress или Responsive Lightbox by dFactory. Если не поможет то есть такой плагин Zoom Image. Либо найти тему для woocommerce со встроеными примочками для увеличения изображений. Ну или нанять когонибудь кто сможет сделать то что у вас не получиться типа меня))) еси что пишите sergzergof@gmail.com

  27. Юрий Июль 1, 2015 at 1:58 пп #

    добрый день,
    подскажите, если знаете:
    в карточке товара http://tiens5.com.ua/katalog-produkcii/cosmetica/vosstanavlivayushhaya-maska-dlya-lica-time-shadow/ прописал Сопутствующие товары. В визуальной части товары отобразились но, во-первых, отобразились в двух местах, а во-вторых, название этого модуля на английском языке -YOU MAY ALSO LIKE…
    где можно подкорректировать шаблон, чтобы данный модуль выводился один раз. И где изменить название модуля на русский

  28. Kladproraba Декабрь 19, 2016 at 12:27 дп #

    Здравствуйте! Подскажите, будьте добры, как решить проблему: у внешнего/партнёрского товара нет возможности добавлять отзывы, блок с отзывами «прячется», эта проблема только с внешним товаром, как решить проблему?

Добавить комментарий

vk_like_site