От автора: WooCommerce превращает WordPress в серьезную E-Commerce площадку. В первой части нашей серии уроков мы разобрали установку и настройку. Сегодня мы продолжим и поговорим о товарах, различных типах товаров, которые есть в WooCommerce, а также добавим наши первые товары на сайт. Также мы обсудим стили и тему в WooCommerce.
Добавление первого товара
Мы, наконец, готовы добавить наши первые товары в наш интернет-магазин на Woocommerce! Я думаю, лучше сначала добавить немного товаров и уже потом переходить к стилям. Так вы сможете увидеть, как все выглядит после настройки товаров, кросс-сейла, апсейла и т.д. Даже если вы создадите просто несколько плейсхолдер-товаров, это сэкономит время в будущем, когда будете фиксить баги, которые вы не продумали сразу. WooCommerce товары публикуются в пользовательских типах постов, т.е. добавление новых товаров будет понятно большей части пользователей WordPress. Конечно, есть «особые моменты» с E-Commerce. Давайте добавим парочку товаров.
WooCommerce предлагает 4 типа товаров:
Простой товар – используется в большинстве случаев. Обычно это товар с доставкой и без вариаций. Например, настольная игра или зонт. (мы же все продаем настольные игры и зонты, так ведь?)
Сгруппированные товары – коллекция связанных товаров, которые можно купить отдельно. Например, Playstation3 может быть сгруппированным товаром с 80Гб, 120Гб и 200Гб памяти и являться вариацией одного и того же родительского товара.
Внешний или партнерский товар – товар с описанием на вашем сайте, но продается он на стороннем сайте.
Переменный товар – самые сложные товары. Их может быть несколько версий, каждая со своим артикулом, ценой и дополнительными параметрами. Чаще всего используется в одежде, например, у футболки много размеров и цветов.
Так как WooCommerce построен поверх стандартного постинг функционала WordPress, то вы также получаете набор кастомных систем. Категории и теги точно такие же, как в постах в блоге. Правильное использование категорий может реально помочь магазину. С их помощью люди будут перемещаться по вашему магазину, хорошо продумайте структуру категорий. Также можно создать дочерние категории, используйте их для разделения товаров.
Добавление простого товара
Добавление простого товара должно быть знакомо большинству пользователей WordPress. Интерфейс почти не отличается от экрана добавления поста. Добавлены новые мета блоки. В главном диалоговом блоке вы указываете заголовок товара и его описание. Вам доступно то же форматирование, что и для обычного поста в WordPress.
Под блоком Product data добавляется большая часть важной информации. Сверху отображается выпадающий список типов товара. С помощью чекбоксов можете отметить виртуальный или загружаемый товар (подробнее чуть позже). Прежде всего, заполняем вкладку general . Здесь необходимо указать артикул – уникальный идентификатор товара (необязательное поле, его можно выключить в Catalog Settings, как говорится в руководстве по настройке).
Далее идут поля цены. Regular price – обычная цена за товар. Также можно указать sale price – скидочную цену с графиком. Полезная функция, с ее помощью можно задать график, например, для недельного предложения. Пользователи увидят полную цену и цену со скидкой. Под полями цены расположены поля веса и габаритов (если вы не отключили их в настройках). Особенно полезны с расширениями UPS и FedEx. С их помощью можно автоматически вычислять стоимость доставки на основе габаритов и веса.
Переходим на вкладку tax (налоги). Здесь можно переписать налоговый статус товаров, задать налоговый класс, если вы настроили дополнительные налоговые классы в настройках. На вкладке inventory можно установить инвентарные настройки для отдельных товаров и изменить настройки для еще невыполненных заказов. На вкладке shipping можно задать специальный класс доставки товара, если он настроен.
Переходим на очень интересную вкладку Related Products – сопутствующие товары. Здесь вы можете продвигать один товар за счет другого. Просто начните вбивать название товара, и будет произведен поиск по списку товаров. Апсейлы отображаются на странице с деталями товара. Это товары с улучшенными характеристиками, которые можно рекомендовать пользователям, когда они просматривают текущий товар. Например, если пользователь смотрит список Nintendo DS, то на этой же странице можно показать апсейл Nintendo 3DS. Кросс-сейлы – товары, отображаемые в корзине и связанные с контентом корзины. Например, если пользователь добавил в корзину Nintendo DS, то на странице корзины можно предложить купить запасной стилус.
На вкладку Attributes мы перейдем позже, когда будем говорить о переменных товарах. И наконец, переходим на вкладку advanced. Здесь можно установить необязательное уведомление, которое будет отослано пользователю после совершения покупки. Также можно поместить товар в необычное место в меню и задать группу (если используются сгруппированные товары). Здесь можно изменить глобальные настройки отзывов.
Ниже вы увидите Product Short Description – здесь можно указать краткое описание товара. Если поле оставить пустым, оно будет сформировано автоматически, как в постах WordPress. На панели публикации есть ряд дополнительных опций:
Каталог и поиск – видимы везде.
Каталог – виден только в циклах каталога, не показывается в результатах поиска.
Поиск – виден только в результатах поиска и не отображается в каталоге.
Скрыт – виден только на странице товара, не отображается на страницах каталога и в результатах поиска.
Медиа файлы товара
Как и в любой другой E-Commerce системе, здесь вы можете добавить несколько изображений в товар, и WooCommerce обработает их. Работая в WordPress 3.5, вы также получаете улучшенный медиа менеджер. Добавление изображений в товар ничем не отличается от добавления их в обычные посты WordPress. Можно указать избранные изображения, можно добавить несколько изображений. Разница в том, что в пост ничего не нужно вставлять. Любое изображение, прикрепленное к товару, но не помеченное в избранные, будет отображаться под избранным изображением и формировать маленькую галерею товара. Пример смотрите ниже. WooCommerce предлагает встроенный lightbox эффект, который можно включить или отключить в настройках.
Добавление сгруппированного товара
Сгруппированный товар создается так же, как и простой. Единственная разница в значении «grouped» в выпадающем списке на вкладке general. При выборе этого типа пропадают несколько полей цены, это нормально. Эти поля будут добавлены к отдельным дочерним товарам. Как только закончите со сгруппированным (родительским) товаром, опубликуйте его и возвращайтесь на страницу добавления нового товара.
Теперь необходимо добавить дочерний товар, который будет входить в сгруппированный товар. Вам потребуется указать следующую информацию:
Заголовок, например, Playstation 3 80 GB.
Тип товара (простой).
Цену и количество товара.
Родительский пост (на вкладке advanced). Выберите родителя из выпадающего списка, например, Playstation 3.
Добавление виртуального товара
Виртуальный товар – товар без доставки и без количества. При добавлении простого товара отметьте чекбокс virtual в панели типа товара, и необязательные поля (габариты и вес) будут удалены. Виртуальным товаром может быть что угодно. Это может быть одноразовая плата за доступ к закрытым частям сайта. Вы вручную перемещаете покупателя в новую группу или используете WooCommerce Groups Extension.
Добавление загружаемого товара
Как и с виртуальными товарами, при добавлении простого товара можно выделить чекбокс downloadable. Он добавит 3 новых поля:
File path – путь к файлу, который должен скачиваться после покупки. Также можно загрузить файл, и WooCommerce поместит его в специальную папку с ограниченным доступом.
Download limit – можно ограничить количество скачиваний покупателем. Можно оставить пустым для неограниченного доступа.
Download expiry – можно указать количество дней после покупки, в течение которых будет действительна ссылка. Можно оставить пустым.
Если вы предлагаете цифровую загрузку и физический товар, вы можете указать стоимость доставки для загружаемых товаров. Тогда у вас будет 1 товар для физической версии и цифровой. Если вы выберите виртуальный товар, плата за доставку отключится.
Добавление внешнего товара
Выберите External/Affiliate в выпадающем списке типов товара. После этого удалятся вкладки tax и inventory, и будет добавлено новое поле с URL товара. Это путь, по которому пользователи смогут купить товар. Вместо кнопки добавления в корзину у них будет кнопка «подробнее», ведущая их на этот URL.
Добавление переменного товара
Приготовьтесь, это один из самых сложных товаров. Потерпите, после того, как вы освоите этот тип товаров, вы полюбите его! Переменные товары позволяют продавать несколько вариаций одного товара, каждый со своей ценой, артикулом, количеством и изображением. Сперва необходимо выбрать Variable product в качестве типа. Далее необходимо задать несколько атрибутов для нашего товара – это и будут наши вариации. Атрибуты формируют важную часть магазина. Их можно задавать глобально и индивидуально. Атрибуты используются в вариациях и делят товары на категории, что позволяет пользователям находить их. В документации к WooCommerce приведен идеальный пример.
Вы зашли в магазин видео игр, где продаются все последние игры на самые новые консоли. В этом случае категория верхнего уровня будет игры, внутри которой будет располагаться большая часть каталога.
Отсюда можно легко создать подкатегории для различных консолей, жанров и т.д. Однако эта информация лучше подходит атрибутам. Почему? Потому что пользователь может выбрать конкурентные атрибуты для уточнения поиска.
Пример: пользователь ищет спортивные игры на PS3. Для этого необходимо просто перейти в категорию игры, затем выбрать атрибуты PS3 и спорт в сайдбаре. Как можно ожидать, это обновит страницу, и будут показаны только спортивные игры на PS3.
WooCommerce предлагает виджет, с помощью которого можно выбирать атрибуты. Более подробно смотрите в документации WooCommerce.
Вернемся к нашему товару. Мы выбрали переменный товар в поле с типом. Теперь нам нужно связать его с атрибутами. Кликните на вкладку attributes. Здесь можно выбрать глобальный атрибут или добавить новый к этому отдельному товару. Если атрибут будет использоваться более одного раза, необходимо создавать глобальный атрибут. Например, размеры и цвета для магазина одежды. Также можно добавить несколько атрибутов на один товар. Опять же размер и цвет. После добавления атрибутов отметьте Used for Variations. После этого они отобразятся на вкладке вариаций. После добавления атрибутов необходимо сохранить товар.
Мы добавили атрибуты и сохранили товар. Теперь можно перейти к вкладке вариаций. Вариации можно настроить вручную, кликнув на Add Variation, или же можно просто кликнуть на Link all Variations. Это автоматически создаст вариации. (максимум 50)
Если в вашем пример 2 атрибута (цвет (синий и зеленый) и размер (большой и маленький)), то будут созданы следующие вариации:
Большой синий
Большой зеленый
Маленький синий
Маленький зеленый
После добавления всех вариаций можно перейти к обновлению данных о товаре. Каждая вариация может иметь свой набор данных:
Изображение – кликните на иконку изображения для открытия загрузчика файлов WordPress. После загрузки изображений кликните «вставить в пост». Когда пользователь вбирает вариацию с отдельным изображением, изображение главного товара будет обновляться из набора избранных изображений на изображение вариации. Чисто технически, для всех вариаций можно задать разные изображения. Удобно для вариаций цветов.
Артикул – для вариации можно указать артикул или оставить его пустым, и он будет унаследован от родителя.
Количество – можно указать количество вариации или же оставить поле пустым, тогда будет использоваться количество родительского товара. Можно задать 0, чтобы показать, что товар закончился.
Вес/габариты – можно указать для вариаций или оставить пустым, тогда значение наследуется от родителя.
Цена – единственное обязательное поле, в котором задается цена на вариацию.
Скидочная цена – для определенной вариации можно указать скидочную цену. Полезно если нужно распродать отдельную вариацию.
Загружаемый – если вариация относится к загружаемым товарам, отметьте это поле. Далее можно указать URL на файл и количество скачиваний.
Виртуальный – если вариация относится к виртуальным товарам, отметьте это поле.
Активно – снимите галку для отключения вариации. Вариация будет недоступна.
Класс доставки – класс доставки может повлиять на стоимость доставки. Установите это поле, если оно отличается от родителя.
Налоговый класс – налоговый класс для вариации. Полезно при продаже вариаций, распространяющихся на различные налоговые группы.
Для каждой вариации необходимо указать цену, однако можно изменить объем вариаций с помощью панели редактирования. Также можно указать вариации по умолчанию, которые будут отображаться первыми в выпадающем списке на фронте.
Сразу понять переменные товары немного тяжело. На это нужно время. Однако они делают весь UX вашего магазина.
Тема и стили
В первой части нашей серии статей мы разобрали основные настройки WooCommerce, где можно включить стили WooCommerce. Сейчас мы немного более подробно разберем, как сделать WooCommerce еще красивее. В 9/10 случаях WooCommerce смотрится хорошо прямо из коробки со стандартным CSS. Можете сами убедиться, включив стандартный CSS в WooCommerce.
Вы быстро увидите, как WooCommerce работает с вашей темой. Я внесу следующие изменения в CSS:
Найдите /wp-content/plugins/woocommerce/assets/woocommerce.css и скопируйте файлв папку темы. Я обычно копирую его в файл woocommerce.css.
Это сжатый CSS, т.е. его нужно распаковать. Для этого я использую Coda от Panic как редактор кода с PHP и Web Toolkit. «Перегнать» CSS в читаемый формат очень легко. С помощью этого онлайн сервиса можно привести CSS в порядок, если в вашем редакторе кода нет ничего подобного.
Также необходимо в тему добавить изображения WooCommerce. Просто скопируйте /wp-content/plugins/woocommerce/assets/images/ в папку с темой и обновите пути в woocommerce.css
Наша тема должна распознать дополнительные стили.
1 2 3 4 5 6 7 8 |
<?php function my_woo_style() { wp_register_style( 'my-woocommerce', get_template_directory_uri() . '/woocommerce.css', null, 1.0, 'screen' ); wp_enqueue_script( 'my-woocommerce' ); } add_action( 'wp_enqueue_scripts', 'my_woo_syle' ); ?> |
WordPress теперь знает о наших новых стилях и будет добавлять их в сгенерированные страницы. Более подробно о регистрации и добавлении стилей читайте в кодексе WordPress.
В основным настройках WooCommerce отключите Enable WooCommerce CSS styles. Также настройку можно выключить в теме.
1 2 3 4 |
<?php // Disable WooCommerce styles define( 'WOOCOMMERCE_USE_CSS', false ); ?> |
Теперь в моей теме есть копия стилей WooCommerce и я могу спокойно обновлять их, не беспокоясь потерять все изменения после обновления плагина. Все должно выглядеть так же, как со стандартным CSS, включенным в настройках. Большую часть изменений можно делать в CSS. Если же возникнут проблемы, вам нужно кое-что знать. Первая проблема – обертка div для контента WooCommerce. Вы можете перенести весь контент WooCommerce на свою шаблонную страницу.
Скопируйте свои темы page.php и переименуйте их в woocommerce.php
Откройте новый файл в редакторе кода и найдите цикл.
Он будет начинаться с:
1 |
<?php if ( have_posts() ) : ?> |
И заканчиваться:
1 |
<?php endif; ?> |
В зависимости от темы код может немного отличаться. Замените цикл на следующий код:
1 |
<?php woocommerce_content(); ?> |
Некоторые функции и стили WooCommerce можно применять через экшены и фильтры. Как и ядро WordPress, WooCommerce имеет огромный набор экшенов и фильтров, которые можно встраивать или переписывать. Оберточный div можно сменить с помощью:
1 2 3 4 5 6 7 8 |
<?php //Change Wrapper remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10); remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); add_action('woocommerce_before_main_content', create_function('', 'echo "<div id=\"mycontent\">";'), 10); add_action('woocommerce_after_main_content', create_function('', 'echo "</div>";'), 10); ?> |
Вставив код выше в файл темы functions, вы измените обертку по умолчанию для WooCommerce. В примере мы использовали ID mycontent. Вы же можете установить совершенно любой.
Есть множество других полезных экшенов, с помощью которых можно настроить WooCommerce. Парочка моих любимых:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php //Remove Breadcrumbs remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0); //Get Rid of Stupid Tabs remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20, 2); add_action( 'woocommerce_single_product_summary', 'woocommerce_product_description_panel', 20 ); //Remove Product Reviews remove_action( 'woocommerce_product_tabs', 'woocommerce_product_reviews_tab', 30 ); remove_action( 'woocommerce_product_tab_panels', 'woocommerce_product_reviews_panel', 30 ); //Remove Sidebar from WooCommerce remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10); ?> |
Если вам и этого мало, вы можете полностью переписать все файлы темы для WooCommerce. Скопируйте папку /wp-content/plugins/woocommerce/templates в тему и переименуйте woocommerce. Теперь можно изменить файлы темы, не боясь потерять все при обновлении плагина. У WooCommerce хорошая документация, которая постоянно исправляется. Вы можете внести свой вклад в репозитории WooCommerce GitHub.
WooThemes предлагает несколько бесплатных тем для WooCommerce, что служит хорошей отправной точкой. Это отличный способ научиться работать с темами для WooCommerce. Mystile – замечательная бесплатная тема для WooCommerce, предлагающая чистый, современный внешний вид для любого магазина и раскрывающая все возможности WooCommerce. Бесплатные темы хорошо смотрятся и дают большую гибкость. Темы премиум класса же, как и следовало ожидать, дают немного больше возможностей. Большая часть тем для WooCommerce похожи на фреймворки, т.е. из них можно создавать дочерние темы.
Даже если вы не любите разрабатывать свои расширения, я советую вам сделать свою тему. Она будет гораздо удобнее. Надеюсь, информации выше будет достаточно для начала.
Следующие шаги
Мы прошли через все этапы, необходимые для запуска магазина на WooCommerce. Попутно я затронул пару премиум расширений. На данный момент мы создали магазин на полностью бесплатном open source плагине, однако с WooCommerce можно добиться гораздо большего. Конечно, вы не обязаны платить за каждое расширение, вы можете создавать их сами. WooCommerce в документации даже призывает к этому. Однако большинство пользователей хотят простую установку в несколько кликов, а не сидеть и писать 300 строк кода, привязываясь к дюжине разных экшенов. Расширение WooCommerce довольно обширно и покрывает ряд способов оплаты, API доставки и множество мелких функций, которые вам могут понадобиться. Можно даже настроить членство и подписку, принудительно добавить определенные товары в корзину, добавить водяные знаки на любые изображения.
Естественно, мы затронули лишь верхушку айсберга WooCommerce. В нем есть замечательная система купонов, с помощью которой можно предлагать специальные скидки покупателям с полным набором полезных опций, в том числе и ограниченное предложение на определенные товары и коды. WooCommerce включает в себя все возможные отчеты, которые ожидаешь от E-Commerce системы. Его можно расширить и интегрировать с бухгалтерскими системами типа Freshbooks и Xero с помощью платных расширений. Возможности почти безграничны.
Альтернативы
Я думаю, вы согласитесь, что WooCommerce полностью покрывает необходимые задачи. Тем не менее, есть и другие варианты. Было бы неправильно, не упомянуть их:
Jigoshop – появился в апреле 2011. Из этого проекта вырос WooCommerce. Он предлагает большую часть функций WooCommerce, но не так распространен. Он следует той же модели Freemium с базовым плагином в open source и расширениями за дополнительную плату. Лично я с ним не работал, но это реальный конкурент WooCommerce. Думаю, имя Woo и маркетинг являются решающим фактором выбора для большинства людей.
Cart66 – предлагает бесплатную лайт версию и премиум версию, в которой есть улучшенные функции. Платная версия стоит $89 и год поддержки. Я пробовал Cart66 на предыдущем проекте, и оказалось, что у него нет документации, его сложно настраивать. В итоге, я потратил $89 и перешел на WooCommerce. В отличие от других плагинов, этот не предлагает расширения для активации дополнительных функций. Все они встроены в премиум версию. Премиум версия, скорее всего, поддерживает большую часть способов оплаты, регулярные платежи, а также подписки.
WP Ecommerce – на данный момент самый популярный плагин (по скачиваниям). Имея свыше 2 млн скачиваний, у него очень низкий рейтинг среди пользователей. Базовый плагин бесплатный. Расширяемый функционал предлагается в премиум обновлениях. Набор функций большой, но все жалуются на плохую документацию. Этот плагин помогает множеству пользователей, может, я просто читал не те статьи?
Мы сами решаем, с чем нам работать. Тестирование – важная часть разработки, и подобрать правильный плагин, особенно если это основа E-Commerce сайта, очень важно. Все плагины предлагают бесплатные версии. Вы можете протестировать и найти наилучшее решение для себя!
Заключение
Вот и все. За крайне короткое время мы установили плагин и настроили его. Мы настроили стоимость доставки, способ оплаты через Paypal. Поговорили о том, как добавить товары, даже затронули тему вариаций сложных товаров. Посмотрели с разных сторон, как можно стилизовать магазин. Теперь вы готовы к открытию E-Commerce магазина.
WooCommerce – отличное решение, с которым мне нравится работать. Разработка ведется на Github, что позволяет следить за ней. Очень легко внести свой вклад, если вы заметили что-то, что нужно пофиксить! Для меня WooCommerce единственное E-Commerce решение для WordPress. Он работает как для разработчика, так и для пользователя, и работает хорошо!
Автор: Will Wilson
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.