Шаг №114.Как сделать каталог товаров на wordpress?

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

В принципе, если из интернет магазина удалить функционал позволяющий производить online продажи, то мы могли бы вплотную приблизиться к нашей задаче создания каталога товаров на wordpress. Но в то же время, если мы так и сделаем, это не будет идеальным решением. Есть намного более элегантный способ решить данную задачу. И именно об этом способе, дальше и пойдет речь.

Каталог товаров на wordpress.

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

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

Каталог товаров на wordpress

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

При создании страницы товара, выберите справа в выпадающем списке родительской ранее созданную страницу «Каталог товаров»

Как сделать каталог товаров на wordpress?

Как видите из рисунка, я создал три страницы и назвал их соответственно:HTC One X, Iphone 5 и Samsung galaxy s4. Как обычно добавил миниатюры.Так как плагин Page list не содержит никаких настроек, то он вызывается при помощи шорткодов wordpress. Теперь все что осталось сделать это добавить на главную страницу «Каталог товаров» шорткод:

[pagelist_ext show_content = "0" image_width="200" image_height="200"]

После сохранения странички Вы не увидите такой же результат как и у меня, потому что еще нужно заменить соответствующие CSS стили в файле wp-content/plugins/page-list/css/page-list.css для .page-list-ext .page-list-ext-item у меня они находятся в 27 строке:

width: 200px;
height: 275px;
display: inline-block;
vertical-align: top;
background: #fff;
position: relative;
padding: 10px;
margin: 20px 12px 20px 0;
border: 1px solid #E2E7E9;
box-shadow: 0 0 3px 1px #E2E7E9;

После сохранения файла, можно посмотреть на результат.

Как вывести произвольные поля в каталоге товаров на wordpress?

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

1)Для каждого товара нужно добавить произвольное поле.Для этого отредактируйте страницу с товаром, и пропишите в произвольное поле значение price:

Произвольные поля в каталоге товаров на wordpress

Если у Вас нет такого поля, значит нужно нажать «Настройки экрана» и поставить галочку возле раздела «Произвольные поля».

2)Поменять шорткод, который вставляется на страницу «Каталог товаров» на:

[pagelist_ext show_content = "0" image_width="200" image_height="200" show_meta_key="price" meta_template="Цена: %meta%"]

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

  • http://baffuto.ru Ася

    Спасибо огромное!!!
    Очень помог Ваш урок! 🙂

  • Виталий

    Спасибо!

    Как сделать отображение название страницы (товара) по середине?

  • http://www.dimadrug.ru Дмитрий

    Редактирование page-list/css/page-list.css (неактивен) я так понял, что нужно под строкой
    .page-list-ext .page-list-ext-title {
    clear: none;
    Написать
    width: 200px;
    height: 275px;
    display: inline-block;
    vertical-align: top;
    background: #fff;
    position: relative;
    padding: 10px;
    margin: 20px 12px 20px 0;
    border: 1px solid #E2E7E9;
    box-shadow: 0 0 3px 1px #E2E7E9;
    Так?

    • http://www.dimadrug.ru Дмитрий

      все — получилось. спасибо

  • http://mybin-option.ru/ fedea

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

  • Семен

    Доброе утро! Сделал все как написано, выбрал 6 шт. товара. С сайдбаром выводится в виде таблицы 3х3, без сайдбара 4х2. Но все очень не ровно, описание (название страниц) накладывается друг на друга. Могу прислать скрин на почту. Созданием сайта заинтересовался совсем недавно, так что новичок. Может подскажете что не так. У фоток товара разное разрешение да и описания разной длины. Может в этом дело? Потренироваться решил с косметикой товар у них разных размеров соответственно и фото. Хотелось бы создать простенький сайт с каталогом товара и категориями товаров в боковой панели. Работаю в Денвере. Заранее спасибо.

  • http://meshok.com.ua Виталий

    Спасибо. Помогли сэкономить массу времени.

    • http://meshok.com.ua Виталий

      По ходу возник вопрос: а как добавить несколько произвольных полей? Как должен выглядеть шорткод?
      Попробовал вот такой — [pagelist_ext show_content = «0» image_width=»200″ image_height=»200″ show_meta_key=»model» meta_template=»модель: %meta%» show_meta_key=»article» meta_template=»артикул: %meta%»]
      результат — http://joxi.ru/WYO9UhjKTJDfL7JBUQs

      • Юрий

        День добрый! Подскажите ,Вам удалось разобраться как вывести несколько произвольных полей? Заранее спасибо за ответ

  • http://forhome.com.kz Марат

    Спасибо все работает, но когда прописал КСС в page-list-ext и в page-list-ext-item то он через всю страницу в ряд прошли, но когда убрал КСС под page-list-ext, то все заработало нормально.
    Это не как не помешает в будущим? и как сделать так что бы не выходили все страницы, а только те которые я указал. Спасибо

  • http://itpep.ru/ Radik

    Большое спасибо, за счет уроков сделал не плохой сайт!

  • http://prom-pol.pusku.com/?page_id=4 Sergey

    Здравствуйте,
    Огромное спасибо за информацию…

    Дочерние страницы выводятся, но картинки не видны — в чем может быть дело??

    вот САЙТ

    С уважением,
    Сергей.

  • Людмила

    Добрый день! Подскажите,пожалуйста, по работе с плагином page list. Установила версию WordPress 3.8. Создала страницу, далее потребовалось создать подстраницу: указала родительскую страницу. В родительской прописала нужный мне шорткод [pagelist_ext show_first_image=»1″]. В итоге выводятся ПОДстраницы и просто Страницы с содержанием Подстраниц. Как настроить так, что бы выводились только ПОДстраницы? Буду благодарна за ответ!

  • Настенька

    Здравствуйте! Подскажите пожалуйста! Сделала всё как написано в статье, на страницу каталог товара вставила шорткод который у вас указан, а в page-list-ext .page-list-ext-item вставила текст с новыми параметрами с вашего сайта…. по итогу на странице появилась рамка с названием товара, а картинки товара нет 😥 при нажатии на название товара осуществляется переход на страницу с товаром где есть картинка… помогите пожалуйста советом, что то упустила видимо, как сделать чтобы картинка была как у вас на странице каталог товаров 🙁

  • Рустам

    простите пожалуйста, а сделать вывод произвольных полей на странице непосредственно товара не предусмотрен? Так как все товары представлены в виде отдельных страниц, то организовать вывод в файлах шаблона не предоставляется возможным, так как произвольные поля выводятся на всех страницах сайта, в подкатегориях и категориях. А составлять шаблон для вывода на каждую страницу не совсем удобно. Спасибо!

  • Александр

    ПОМОГИТЕ ПЛИЗ! Уже двое суток не могу найти решение проблемы! 😥 Съезжает вниз сайдбар только на странице магазина. Понимаю, что где-то не закрыт div, но найти где именно не могу!!!:( ПРОШУ ПОМОЩИ, ЛЮДИ ДОБРЫЕ!!! WordPress 3.8.1 + WooCommerce от WooThemes версия 2.1.2. Шаблон свой

  • Василий

    Здравствуйте!
    возникла проблема!
    вроде все делал по уроку а получил вот такую картину http://eurodomplus.ru/?page_id=9 как исправить???

    • http://wpcreate.ru Артем Петрусенко

      так вроде же все хорошо?

      • Василий

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

  • Юлия

    Добрый вечер! Написала как вы указали, получилось вот так
    .page-list-ext {
    }
    .page-list-ext-item {
    width: 200px;
    height: 275px;
    display: inline-block;
    vertical-align: top;
    background: #fff;
    position: relative;
    padding: 10px;
    margin: 20px 12px 20px 0;
    border: 1px solid #E2E7E9;
    box-shadow: 0 0 3px 1px #E2E7E9;
    В результате на страница каталога появились все страницы сайты в столбик. Как сделать так чтобы там были только «дочки» каталога? Спасибо!

  • Tisha

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

    • Николай

      Присоединяюсь к вопросу!

  • http://skyexpress.lg.ua/ Сергей

    Здравствуйте!
    Плагин отличный! Подскажите пожалуйста как подключить сортировку скажем по цене товара. От дешевых к дорогим и наоборот? И вывести кнопку данного сортировщика.

  • Николай

    Добрый вечер.
    Ткните, пожалуйста, куда смотреть!!!
    Есть страница (допустим «каталог») и 3 дочерних страницы (производитель), у которых тоже будут 5-8 дочерних страниц. На странице «каталога» прописал код «[pagelist_ext show_content = «0» show_first_image=»1″ show_title=»1″ image_width=»200″ image_height=»200″]» все бы замечательно, но выводятся ВСЕ дочерние страницы «каталога» (производители и сами товары), а нужно вывести только «производителя». Понимаю, что нужно что-то прописать, чтобы ограничить вывод дочерних стр. 2-го уровня. Но не могу понять какой оператор за это отвечает.
    Буду очень благодарен за разъяснение и помощь!

  • Юрий

    День добрый ! Подскажите ,а как вывести несколько произвольных полей шорткодом. Пробовал ,выводится только одно поле?

  • Ольга

    Добрый день. Огромное спасибо за Ваши уроки. Подскажите пожалуйста, как изменить расположение блоков с вертикального на горизонтальное. Точнее где изменить. Нашла что нужно изменить значение
    float на left. Но никак не могу найти в каком файле это float находится. Файл темы или файл плагина pegelist?

    • Николай

      Ольга, здесь давно тишина!!! 😮 Раскопал хороший сайт _www.indeso.ru/prostoj-katalog-tovarov-na-wordpress-na-baze-plagina-page-list/ админ отвечает/помогает с вопросами, да и почитать можно разобраться самому… ❗ Лично я там учусь, не получив здесь ответа. 🙁

      • tunec

        Более того, там первоисточник данного способа.

  • http://women-special.ru/ Юля

    Очень интересно! Скажите а можно в коде плагина переделать на вывод каталога для записей? не для страниц а именно для записей? )))))

  • Саша

    Ты красава 😉

  • Рафаэль

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

  • Варвара

    Добрый день! Помогите, не понимаю, где мне найти «нужно заменить соответствующие CSS стили в файле wp-content/plugins/page-list/css/page-list.css для .page-list-ext .page-list-ext-item у меня они находятся в 27 строке»
    Никак не могу сделать каталог товаров. Плагин активирован, но как работать с ним не понимаю. Помогите!!!

  • Мария Кушнир

    у меня нет файла wp-content/plugins/page-list/css/page-list.css в БД. может не там ищу?

  • Александр

    Здравствуйте! Столкнулся вот с какой проблемой при применении данного плагина. Когда делаешь каталог товаров список получается большой. Как можно разделить на страницы данный список?

  • Александр

    ну а на странице самого товара картинки то где ???

  • Nikita

    Есть проблема с шаблоном Kora. Товары стояли в ряд, все устраивало, но в друг по не понятным для меня причинам товары перестроились в колонку по 2 товара (Теперь колонка ужасно длинная и не удобная) Вопрос : Как перестроить обратно ? Причем все категории перестроились под колонну!

  • Дмитрий

    Добрый день!
    Скажите, как можно таким образом добавить категории? Чтобы получилось Каталог-Категория-Товар?

  • Булат

    Подскажите пожалуйста, почему то у меня товары прописываются не в ряд, а в столбик. и название страниц не под картинкой, а рядом. хотя шорткод сделал так жк как и ваш, и css плагина в строке для .page-list-ext .page-list-ext-item Как с этим быть? Спасибо.

    • Андрей

      Была такая же проблема, решение-нужно изменить размер (ширину) в стилях CSS для .page-list-ext .page-list-ext-item (сделать меньше) например указать не 200, а 150

      • Булат

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

  • Darya Yakovleva

    Добрый день вставила изменения как Вы рекомендовали но дочерние страницы все равно выходят списком http://ковка812.рф/uslugi, а не в 3 колонки как у Вас. Как можно это настроить?