Отборная информация, которая вставляет!

Интернет магазин на wordpress на базе wp shop

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

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

UPD. Читайте о новых, более стабильных плагинах интернет-магазина на wordpress

Изначально я планировал создать огромное руководство о том как с нуля сделать на базе wp shop красивый, яркий инет магазин. Даже для этого отрисовал универсальный современный темплейт — но потом подумал, что сделаю ошибку. Ведь если создавать все с нуля, то большинству людей это сложно будет сделать, потому что нужно как минимум знать хорошо html+css, и разбираться хорошо в wordpress, чтобы это реализовать. Кто это все умеет, то он и сам сможет сделать, а кто не умеет, то вряд ли руководство будет полезным. Поэтому, я лучше напишу как сделать инет магазин уже на основе готового сайта с любой темой, что может сделать любой новичок.

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

Допустим у вас уже есть рабочий сайт и в нем уже есть статьи, рубрики, много материала и вы хотите сделать отдельный раздел с магазином. Реализуем мы это при помощи кастомных типов записей(post type). Есть еще одно преимущество установки магазина в отдельный раздел — это то, что вы сможете отдельно оформлять записи с товарными позициями от остальных записей на сайте. Для этого просто создайте в папке шаблона файлик single-yourpost.php, где yourpost — название созданного типа записей о котором ниже. Если ничего не создавать, то оформление самой товарной позиции будет в стандартном файле single.php

Чтобы не ковыряться в файлах движка для создания нового типа записей, можно воспользоваться готовыми плагинами. Мне нравится плагин custom post type ui, его я и опишу.

Активируем плагин и добавляем новый тип записей «Товары».

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

Advanced Label Options — здесь вы можете настроить руссификацию различных названий, вроде «добавить» и т.д. Advanced Options — здесь вы увидите функциональные опции, обязательно поставьте true напротив Has Archive — так будет доступен архив этого типа данных. Т.е. если вы перейдете по ссылке ваш_сайт/product — в нашем случае, то увидите список ваших товаров в виде ленты. В поле supports будут доступны разные системные поля которые будут выводится при добавлении записи, отключите здесь все ненужное вам. Сделать это также вы можете и уже в самой админке на странице добавления. Для этого нажмите на кнопку настройки экрана в правом углу.

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

Также нужно создать таксономию для нашего раздела — это правая колонка. А что такое таксономия и с чем её едят? Вот смотрите, есть записи, каждая запись принадлежит к определенной рубрике и может иметь метки. Вот рубрики и метки — это таксономия. Она может быть иерархичной как рубрики, т.е. можно создавать подрубрики. Или без иерархии как метки.

Заметьте, я отметил галочкой attach to post type свой созданный ранее кастомный тип записей, тем самым привязав таксономию к нему.

Теперь когда тип записей — товары и таксономия созданы, то нужно добавить пару категорий в нашу таксономию. Если вы создавали такие же имена как на скринах, то в админке вы увидите, что появилась новая вкладка «Товары» и имеет подвкладку Категории товаров — переходим на неё и создаем пару категорий, которые будут самыми частыми у вас. В название пишем название, в ярлык пишем урл на латинице. Я добавил для примера 2 категории — компьютеры и телефоны.

Как я и говорил, создание новых типов записей и таксономии нужно только если вы хотите создать отдельный раздел на сайте. Если это не нужно, то пропускайте этот шаг и переходите к следущему — создание набора произвольных полей в админке. Это опять же проще реализовать при помощи плагинов, которых очень много для этих целей. Я покажу на примере magic fields 2. Вы можете взять и другой, но будьте осторожны, некоторые плагины добавляют в название поля свой префикс, в итоге инет-магазин работать не будет.

После установки плагина, когда перейдете на вкладку magic fields, то увидите список всех ваших типов записей и найдете там ранее созданный «Товары» — наведите мышкой и нажмите edit. Далее на странице нажимайте create a group и создавайте группу, после этого создаете поля в этой группе. Только не промахнитесь, чтобы создать поля именно в нужной группе, нужно нажимать на ссылочку рядом с группой.

Еще очень важный пункт, во всех плагинах, при создании любого нового типа будь чего, обязательно нужно указывать Name и Label. В первом нужно указывать имя латиницей, оно нужно будет для использования в шаблоне, а label — это название которое будет выводится в админке, тут пишите что угодно.

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


Он устроен так, что любую запись будет считать как товарную позицию если в ней вы укажите дополнительное поле с определенным именем. Если у вас все организовано по типу — один товар — одна цена, т.е. у каждого товара не будет различных модицикаций, то вам хватит всего одного созданного поля cost_1, в котором вы будете писать цену. Если каждый товар будет иметь несколько разновидностей с разными ценами, то вам нужно создать несколько доп полей. Для начала подумайте сколько максимально у вас будет разновидностей с ценой и создайте нужное количество полей. Имена у них должны быть строго name_1, name_2, name_3 — здесь будете писать наименование, cost_1, cost_2, cost_3 — здесь цену. Т.е. для name_1 будет установлена цена cost_1 и т.д.

Вернемся к созданию полей.

Для цен и наименований нужно выбрать тип поля -textbox, так как здесь будем вводить всего пару слов или цифр. В настройках отображения справа — уберите галочку с Evaluate Max Length — тогда не будет вводиться ограничение на длину символов в этом поле. Для первой цены — отметьте галочку required, ведь у каждого товара должна быть хоть одна цена, чтобы все нормально работало. Для второй и дальше — можете не ставить, ведь не у каждого товара будут модификации, там где не будет, то просто не будете заполнять эти поля.

Цену нужно указывать только цифрами. Если нужны не целые числа, то разделяйте точкой (не запятой)

К стати, у этого плагина есть хорошее вики

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

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

Если все будет правильно, то на странице товара вы увидите в углу

Добавьте еще несколько товаров, если их у вас очень много, то в плагине есть возможность загружать позиции через excel, подробнее об этом.

Расскажу о еще одной полезной мелочи с доп. полями — например, добавим чекбокс о том есть ли товар на складе в данное время. Для этого создадим при помощи плагина поле c типом chekbox. Назовем его sclad. Теперь в файле отвечающим за вывод товара (по умолчанию это single.php), в нужном месте (обычно это после тега the_content()) внесем такой код

    На складе: 
<? $value = get('sclad');?>
<? if($value):?>
да
<? else:?>
отсутствует
<? endif?>

Теперь если вы отмечаете чекбокс на странице добавления, то внизу автоматом появится надпись На складе: да, или же отсутствует — если не отмечаете.

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

Wp shop имеет функцию создания дополнительных свойств товара, как это выглядит — можете увидеть на демо. Как это реализовать описано здесь. К стати, реализовать поле комментарии как на демке в инструкции не указано. Это делается добавлением в описание метки

<!--wp-shop text_fied['Комментарий к заказываемому товару']-->

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

Сделаем сначала страницу с корзиной, для этого в любой странице вставьте в виз редактор код [сart] — все, теперь на сайте, вместо этого тега появится корзина.

Чтобы добавить мини-корзину, например, в сайдбар через виджет, то выберите текстовый виджет, а в содержании вставьте тег [minicart]. Более подробно о вставке корзины

Вот и вся основная работа, я в 10 раз дольше писал, чем это все делать.

Теперь можно перейти к дополнительным настройкам, для начала, если вы хотите установить разные способы оплаты, то в настройках плагина поставьте галочку «Показывать способ оплаты:», все способы можно настроить в вкладке WP Shop Payments. Все сообщения, формы заказа можно настроить в cforms — плагин автоматически создает все нужные формы, но вы их можете изменить по желанию. Описание всех настроек вы найдете на страничке. Дополнительные возможности плагина можно глянуть здесь

Я расскажу еще о полезной функции плагина — системе скидок, так как на сайте указана в инструкции устаревшая, неверная информация. Сейчас, чтобы установить скидки, вам нужно на странице настройки плагина, в поле скидка указать данные в подобном формате

300:5;500:30

где, 300 — это сумма выше которой устанавливается 5 % скидка, 500 — сумма выше которой скидка будет 30 % и т.д. Теперь скидка будет подсчитываться на странице корзины.

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

// отображение статей на главной
add_filter( 'pre_get_posts', 'my_get_posts' );
function my_get_posts( $query ) {
     if ( ( is_home() && false == $query->query_vars['suppress_filters'] ) || is_feed() )
     $query->set( 'post_type', array( 'post', 'product' ) ); // ВАЖНО! product меняешь на свой тип
     return $query;
}

Или же просто укажите ссылку на архив вашего раздела с товарами, в моем примере это мой_сайт/product.

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

<ul>
<?php wp_list_categories('title_li&taxonomy=product'); ?> 
</ul>

Удачи в освоении инет-магазинов.

Мониторинг сети. Практика продвижения сайтов на авторском блоге tytto.ru — понятно даже для новичка.


 

Похожие статьи:



57 комментариев к “Интернет магазин на wordpress на базе wp shop”

  1. Очень своевременная и актуальная для меня информация, благодарю!
    В закладки, позже вернемся.

    • ETNO:

      у вас тоже есть актуальный товар TRX, все хотел купить и не знал как оно называется. Только цена высоковата, так бы у вас заказал

  2. Оказывается WordPress очень гибкая система. Я и не думал что на этом движке можно сделать магазин.

  3. тесто:

    зачетная статья

  4. шапошник:

    а сложные магазины на нем можно делать?

    • ETNO:

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

  5. Elena Rubric:

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

    • ETNO:

      вопрос хороший и логичный. Конкретно как сделать я не смотрел, но думаю это возможно. Можно попробовать несколькими путями. Для начала, там вроде есть форма, в которой настраивается сообщение показываемое после оплаты — вот в неё и вставить ссылку. Второй способ — насколько знаю при любом методе оплаты, вы указываете страницу, на которую попадает пользователь, который совершил успешную проплату — вот на неё тоже можно вставить ссылку на скачку материала. Или же просто восспользоваться сервисом типа digiseller, я о нем уже писал как-то http://fleek.org/monetizaciya-digiseller/, но с точки зрения партнера, а не продавца, но там все довольно просто сделано и как раз заточено под продажи цифровых товаров.

  6. Elena Rubric:

    Надо с чего-то начинать, пожалуй, попробую, спасибо большое за статью, перечитала много, но ваша — вдохновила!

  7. Спасибо за очень полезный пост!
    Многое сделала как написано и бОльшая часть получилась. Но — увы!- пришлось всё вернуть к исходной точке, т.к. добавить вывод в основную ленту своих товаров оказалось для меня из области высшей математики. Внесла небольшой хак в functions.php темы как пишите, но из-за малого опыта получилось вот что: http://fleek.org/fleekaj/WBVNEgxMS08RT0paGABcQ19aFkcMG0cQG0cLFU0CBVAGVAhSGAsQVQo=/
    Теперь приходят мысли в голову, что заметки+сообщения+магазин — это в моём случае невозможно…
    Если подскажете, как быть, буду благодарна!

    • ETNO:

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

    • ETNO:

      и вы неверную ссылку дали, там что-то не то

  8. А вы сами делали ИМ используя плагин? Там почему то много чего не работает… если у вас все работает отпишитесь мне на мыло, я вам вопросики позадаю… спс

    • ETNO:

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

  9. Begemot:

    Добрый день. Как вы думаете, реально ли реализовать через этот магазин вот такую примерно конструкцию: Сайт, на сайте музыка, сортировка по исполнителям и альбомам, купить можно любую композицию из любого альбома. А дальше, видимо, так, как вы рекомендовали ранее «Для начала, там вроде есть форма, в которой настраивается сообщение показываемое после оплаты — вот в неё и вставить ссылку. Второй способ — насколько знаю при любом методе оплаты, вы указываете страницу, на которую попадает пользователь, который совершил успешную проплату — вот на неё тоже можно вставить ссылку на скачку материала.»?

  10. Begemot:

    я, видимо, криво вопрос построила:) С сортировкой всё понятно. Вопрос в том, как реализовать продажу рассортированных файлов — если подключить плагин и использовать его, то не слишком ли громоздкая конструкция получается?
    Спасибо за оперативность — здОрово, когда обращаешься за помощью к продвинутым специалистам и тебе отвечают:)

    • ETNO:

      понятно теперь, нужен магазин цифровых товаров с генерацией ссылки на скачку — в плагине wp-shop такого нет. Вроде есть в uvcart, но я его еще не тестировал. Если товар 1-2, то проще продавать его через digiseller

  11. Begemot:

    тогда пойду посмотрю в сторону ювикарт, поскольку товаров планируется овер 500… В любом случае, спасибо 🙂

  12. Привет! Установила e-commerce!
    Выпала Fatal error оперативки не хватает! Что делать? на хостинге нет вообще тарифа где хватило бы оперативки… Хэлп) Я в этом деле совсем чайник)

    • ETNO:

      вы вроде сами ответили на ваш вопрос — не хватает оперативки, значит надо сменить хостера или перейти на более дорогой тариф

  13. Подскажите, с помощью этого плагина можно сдлать просто каталог товаров, без цен, корзина так же не нужна
    это возможно?

  14. Скажите, а можно ли создать ИМ, но не заполнять его товаром. Например, мне нужно просто указывать ссылки на существующие магазины, чтобы посетители сами находили нужный товар. (я живу в США) и просто прописать условия доставки.

  15. Я имею ввиду оформить таким образом дизайн

  16. Александр:

    Спасибо за статью! Интересует такой момент. Как сделать ссылки вида http://fleek.org/fleekaj/WBVNEgxMS08RT0pKCBZcH0tAS0ITWlEQV0NLtoPhhbeysYyyhbPa6ebo3OjuTemL6YW1sLGA5dbkibXm6Ynk6R+xhLKGs9Po1OjU6dyygeGM/ товара

    Буду ооооочень благодарен.

  17. JAZzmiX:

    Здравствуйте спасибо за статью!
    Есть такой вопрос:
    как сделать например «витрину 2» по умолчанию.
    Или где найти код витрины по умолчанию которая выводится в рубрики, т.к. я переделал дизайн «витрины 2» нашел таблицу в ‘vitrina.php’ но не нашел где таблица по умолчанию.
    Подскажите пожалуйста.

    Еще, мне нужен разный дизайн витрины
    в Кратком описании поста
    сделать:
    картинка
    Текст
    Цена, «купить».
    , и в полном (single.php)

    В каком файле можно все это отредактировать?

    • ETNO:

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

  18. Блин, чёткий у тебя блог, в закладочки) Много полезного можно узнать)

  19. mill:

    Подскажите пожалуйста что нужно сделать, чтоб магазин был доступен по адресу:
    адрес_сайта/shop
    Делал всё по инструкции, изменял product на shop. При попытке зайти по адрес_сайта/shop ошибка 404.

  20. что-то у меня не получилось настроит толком єтот плагин. Думаю что лучше юзать специализированіе двиги для магазинов.Вордпрес конечно хорош, но скорость работы его не оч если ещо плагинами нагрузить, то тормозить начинает

  21. ЯН:

    Нуждаюсь в помощи программиста в работе с этим плагином.. отпишитесь кто сможет, пожалуйста!

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

  23. А как обстоит дело с расширенным поиском по товарам? Например, поиск по определенным параметрам, фильтр по цене, популярности, к примеру?

    • ETNO:

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

    • Я реализовала фильтр по определенным параметрам через выпадающий список с помощью Dropdown Taxonomy Widget (он ищет по меткам или рубрикам, мне было необходимо по меткам)
      А поиск по диапазону цены с помощью доп. полей и скрипта на php. Существует доп. поле cost_1, скрипт забирает параметры из адресной строки и с помощью query_posts выводит нужные в поиске. Правда, не в виде витрины.
      Сейчас разбираюсь, как страницу категории сделать витриной.

      • ETNO:

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

  24. Максим:

    Где находится шаблон мини-корзины?
    хотелось бы его немного изменить

  25. Владимир:

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

  26. Владимир:

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

  27. Андрей:

    «wp shop — это пока единственный плагин в рунете который развивается»
    не единственный. Плагин личного кабинета Wp-Recall позволяет установить расширение до интернет-магазина. Легкое подключение Робокассы и Интеркассы, настройка вывода товара, личный счет пользователя, личный кабинет, продвинутая административная часть.
    Если интересно, вот ссылка http://fleek.org/fleekaj/WBVNEgxMS08WSAtKFUxLRBY=/

    • ETNO:

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

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

  29. Qarsos:

    Проблема !
    Когда отправляешь форму заказа, приходят пустые письма. Подскажите как решить эту проблему.

  30. Юлия:

    Подскажите, как тут к комментариям в статье цепляется фото?

  31. Можно вопрос по wp-shop? как тебе этот плагин? не глючит? экспорт импорт как работают? норм?

    • ETNO:

      юзайте woocommerce лучше

      • Всем привет от разработчика Wp Shop. Много из того негатива что тут написано уже вылечили. Зацените последнюю версию WP Shop: подключили Единую кассу и Яндекс Кассу, PayPal, вылечили кучу ошибок, сделали видеоинструкции пошаговые, выпустили много тем для магазинов на WP Shop. Особо рекомендую скачать инсталлятор магазина и поставить себе, потестировать магаз в полной сборке. Если есть вопросы-пожелания-предложения, пишите на скайп wpshop

оставить отзыв

Если хотите вставить код в комментарии, то оберните его тегами ‹pre›‹/pre›