Шаг №103.Создание интернет магазина на wordpress.Часть 2:Установка шаблона и создание новых категорий товаров в WooCommerce.

Приветствую всех читателей сайта WPcreate.ru, сегодня всех ждет продолжение цикла статей создание интернет магазина на wordpress. Прежде чем начинать читать эту статью, предлагаю ознакомиться с предыдущими статьями из этого цикла:

Часть 1:Установка и русификация WooCommerce.

Установка шаблона адаптированного для работы с WooCommerce.

Итак, после прочтения предыдущей статьи мы имеем, установленную платформу для создания интернет магазина на wordpress — WooCommerce. А также установленный плагин русифицирующий WooCommerce — Saphali Woocommerce Russian. Что же делать дальше? Предлагаю найти подходящий шаблон для интернет магазина, и установить его на wordpress. Так как я сейчас пишу инструкцию по созданию интернет магазина на основе WooCommerce, то для меня не критично будет использовать бесплатный шаблон для WooCommerce. Ну а если Вы всерьез занимаетесь разработкой интернет магазина, советую купить один из платных шаблонов, найти их можно на сайте ThemeForest. Ну а в данной инструкции я воспользуюсь шаблоном под названием Wootique, доступным для скачивания на сайте woothemes.com.

Примерно выглядит он вот так:

Бесплатный шаблон для WooCommerce

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

Установка страниц WooCommerce.

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

Установка страниц WooCommerce

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

Страницы создающиеся плагином WooCommerce

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

Кстати для корректного отображения url на сайте советую сразу же при создании интернет магазина сделать правильный формат вывода URL.Более подробно об этом читайте в статье Создание ЧПУ ссылок (Человеко-подобные-УРЛ).Более подробно на этом я еще остановлюсь в следующей статье.

Давайте теперь создадим несколько категорий для нашего интернет магазина созданного на wordpress.

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

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

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

  • Мобильные телефоны
  • Планшеты
  • Ноутбуки
  • GPS навигаторы

Добавляем каждую категорию на странице WooCommerce -> Товары -> Категории в админке wordpress.

Добавление категорий товаров в WooCommerce

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

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

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

Загрузим к примеру картинку для категории Мобильные телефоны:

mobile-phone

После загрузки всех категорий и под-категорий мы сможем наблюдать примерно такую картину:

Список категорий товаров в WooCommerce WordPress

Как видите подкатегория Iphone унаследована от Мобильные телефоны, сделано это через родительскую рубрику.

На сегодня все, в следующей части цикла создание интернет магазина на WordPress я более тщательно расскажу про url структуру сайта а также мы создадим несколько новых товаров на сайте.Что бы не пропустить новую часть советую подписаться на RSS или следить за новыми уроками в Twitter.

  • Роман

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

  • http://ateljemod.ru Александр

    Здравствуйте, Артём. Подскажите как переименовать страницу Home. Вообще, хорошо бы найти русскую тему для магазина. Не подскажите? 🙂

    • Александр

      Решено. С помощью Poedit перевел понравившийся шаблон.

  • Александр

    Здравствуйте.
    Подскажите а как в шаблоне Wootique можно изменить ширину сайдбара.
    Пробовал все делать по Вашей инструкции http://wpcreate.ru/step/kak-izmenit-shirinu-blokov-wordpress-ili-uvelichit-shirinu-shablona-wordpress.html, но меняется только ширина отображаемого текста на сайдбаре.
    А сам сайдбар (который бежевый по умолчанию) никак не двигается.
    Спасибо!

    • Алексей

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

    • Алексей

      Хотя в уроке Артема так и написано :mrgreen:
      Возможно не тот блок редактируешь просто. Обычно в шаблонах куча вложенных div, внимательней поищи.

  • Сергей

    Подскажите пожалуйста как импортировать каталог товаров из 1с ?

  • Алексей

    Артем, подскажите пожалуйста. Как сделать, чтобы никакого меню магазина на сайте не было, а была только кнопка ведущая в магазин? То есть я имею в виду например рукописную кнопку в текстовом виджете с линком на магазин. Как сделать кнопку с линком я знаю, но не знаю где взять этот линк, если не нажимать «Установить страницы WooCommerce», ведь получается если нет магазина в меню сайта, то и нет физически на сайте. Если я ошибаюсь, прошу разъяснить. Спасибо.

    • Алексей

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

  • Дмитрий

    привет, Артем! вопрос: как можно сделать блок категорий в разделе «магазин» на сайте. т.е. чтобы категории товаров отображались справа от самих товаров на вкладке «магазин».

  • http://novikovtoday.ru Алексей

    Здравствуйте, Артем!

    Подскажите, пожалуйста, как исправить ошибку: некорректно работает виджет «категории товаров». Категория добавлена, в нее добавлены товары, но при нажатии на категорию в сайдбаре выдает, что такой страницы не существует.

    Тема «Market». Проблема на сайте: mebelvtveri.com

    • http://halpa.ru/ Андрей

      Подскажи как была решена проблема?

      • http://novikovtoday.ru Алексей

        Оказалось, просто в постоянных ссылках не были прописаны основы категории товаров и тегов.

  • http://betsmagazine.com/ Александр

    Добрый день! Спасибо за четкие уроки, «без воды»)
    В принципе всё ясно и понятно и применительно к моему сайту (сайтам подобных тематик), если подумать, то можно спланировать как разместить все страницы грамотно, как организовать и т.п.
    Но проблема в том, что:
    1. Я уже приметил несколько шаблонов для сайта и под них все делаю, однако, как Вы и говорили, WooCommerce не поддерживает эти темы и при их активации получаются «кракозябы» 🙁
    2. Если же пробую тему на основе которой Вы делали урок (думаю остальные темы примерно такие же для магазинов) то не видно статей и прочего материала моего сайта 😮
    Отсюда вопрос — есть ли какой-нибудь иной плагин, чтобы просто «ввинтить» кнопку «Оплатить» на соотв. страницу или в соотв. заметку сайта на вордпрессе? Видел таких много на др. сайтах, без переходов в корзину и т.п., а сразу с перенаправлением в платежную систему (максимум одно окно с выбором платежной системы и указанием «мыла»). Если путаюсь в терминах, то думаю это простительно для новичка 🙂 Буду благодарен за информацию, может наводку дадите на подобные ясные уроки) Заранее спасибо!

  • Sveta

    Здравствуйте,Артем. Помогите пожалуйста, а то я уже на грани срыва. После установки стандартных страниц темы как и должно быть появились страницы — Главная,Магазин,Корзина,Оплата,Профиль. Я установила новое меню (или по крайней мере пыталась). В результате у меня вышло Женщины,Мужчины, Дети,Интерьер, Обо мне. По задумке, наводя мышку на строчку Женщины должны появляться категории Одежда,Обувь,Аксессуары и т.д. НО,заходя допустим на Женщины, ничего не поменялось, в строке прописывается эта страничка как ГЛАВНАЯ, аналогично с Мужчинамы, если клацаешь на них попадаешь на Магазин. Я не пойму как это исправить и где??Неужели нельзя придумать свое меню???
    Буду ждать ответа,заранее очень благодарна!!!!Помогите, я девушка, и мне совсем тяжело в этом разобраться..((( ❓ ❓ ❓

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

      Нужно глянуть, есть ссылка на сайт?

  • http://nrjm.ru Иван

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

  • Алина

    Подскажите пожалуйста, у меня картинки категорий в редакторе и в самой категории отображаются, а вот в сайдбаре нет!