Если вы любите Wordpress и вам нужно создать интернет-магазин, то, наверняка, вы в первую очередь подумали про Woocommerce.
Это идеальный плагин, который позволяет на блоговом движке сделать полноценный магазин. С фильтрами по настраиваемым атрибутам товаров, с разными шаблонами страниц, возможностью использовать скидки и купоны, миниатюрами для категорий товаров, возможностью редактирования таких опций, как наличие на складе, тарифы доставки и налога для отдельных товаров, видимость в каталоге, добавление подробных и кратких описаний. Это тот функционал, что вам доступен сразу после установки плагина. Так сказать, «из коробочки».
Плюс есть еще огромное количество дополнительных плагинов, которые еще больше расширяют функционал woocommerce. Добавляют больше способов оплаты или доставки, подарочные сертификаты, слайдшоу на странице товара, дополнительные вкладки, фильтрацию товаров на основе Ajax, создание wish листа, рейтинга или оригинального оформления атрибутов товаров и многое другое.
Кроме этого, продвинутые веб-дизайнеры знают, что очень многие возможности плагина не видимы через интерфейс административной панели wordpress, но заложены в коде woocommerce. И если понимать как, то эти возможности можно оттуда извлекать и подключать. В этом я сегодня еще раз убедился, что вам и продемонстрирую.
На самом деле сниппетов для woocommerce написано достаточно много, самых разных. В работе над последним проектом мне пригодилось сразу несколько сниппетов:
- Возможность ограничить показ товаров в related products до товаров из одной категории.
- Возможность вывести атрибуты товаров как новую таксономию, чтоб их в дальнейшем можно было использовать в навигации на сайте (custom menu).
- Новый таб на странице одиночного товара для показа всех вложений к данному товару с определенным расширением (В частности, я подключал автоматический вывод в этом табе всех флешек, которые мы сконвертировали в формат html5).
- Сниппет для бесконечной прокрутки товаров (infinite scrolling)
- Два сниппета, чтобы разделить разбивку на страницы (pagination) и сортировку (ordering) и в дальнейшем вывести их в разных местах страницы каталога.
Если вам нужны любой из этих сниппетов, напишите в комментариях. Все эти сниппеты (кроме 3-го) я нашел на простора интернета, поэтому тут моей заслуги нет никакой. Но мне понадобилась еще одна вещь, о которую я и споткнулся — как скрыть товары из определенных категорий на странице каталога?
Допустим у вас есть магазин часов (на самом деле я описываю конкретную ситуацию). В каталоге у вас есть сами часы, разбитые по категориям, а также разные сопутствующие товары — ремешки, подарочные карты, запчасти. Кроме этого, у вас есть отдельный раздел архивных часов, которые вы уже не продаете, но и удалять не хотите, потому что часы хорошие, интересные, и ваши покупатели любят иногда их посмотреть чисто для эстетического удовольствия. Естественно, что вы не хотите, чтобы архивные часы и какие-то другие подобные товары выводились на основной странице каталога, потому что это будет запутывать клиентов.
Проблема легко решается, если ваш каталог находится на одной из внутренних страниц — тогда вы просто создаете в меню новый пункт со ссылкой на категорию часов и называете его «магазин». А для других категорий создаете отдельные страницы.
Но если ваш магазин находится на главной странице? А так бывает в большинстве магазинов — сайт начинается с витрины. Здесь на помощь может прийти только специальный сниппет, который отфильтрует цикл на основе категорий товара и выведет только товары из нужных категорий. Причем выведет отфильтрованный цикл только на главной.
На поиски похожего сниппета убил несколько дней, перерыл всю документацию по woocommerce и околовукоммерческие сайты. Нашел сниппет, как скрыть категории с главной страницы, когда вы выводите в каталоге не товары, а категории (чувствуете разницу?). Но того, который мне был нужен, найти не смог. Понял, что придется писать самому.
Теперь попытаюсь воссоздать последовательность моих действий:
1. Во-первых нужно было найти, где же описана сама функция цикла продуктов. В файлах шаблонов она скрыта под вполне определенной переменной $woocommerce_loop. Но поиск по всем файлам плагина описания этой функции мне какого-то конкретного ответа не принес. Экспериментальным путем удалось установить, что искать нужно в файле /classes/class-wc-query.php
2. Дальше пошли разные попытки написания функции, которая бы обращалась к таксономии product_cat, которая отвечает за категорию продукта. В качестве основы я взял функцию product_query( $q ) из вышеупомянутого файла. В итоге пришел к чему-то вроде вот такого кода:
|
1 2 3 4 5 6 7 8 |
$q->set( 'tax_query', array(array( 'taxonomy' => 'product_cat', 'field' => 'slug', 'terms' => array( 'collections' ), 'operator' => 'IN' ))); |
3. Теперь этот код надо как-то заставить работать. Функция product_query( $q) позволяет подключаться к ней напрямую через do_action
|
1 2 3 |
do_action( 'woocommerce_product_query', $q, $this ); |
Соответственно, как мы можем прочитать из описания данной функции, она исполняет хук, созданный с помощью функции add_action. Соответственно, чтобы было что исполнять, надо этот хук создать. Получается что-то вроде:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function product_shop( $q ) { $q->set( 'tax_query', array(array( 'taxonomy' => 'product_cat', 'field' => 'slug', 'terms' => array( 'collections' ), 'operator' => 'IN' ))); } add_action( 'woocommerce_product_query', 'product_shop', 10, 2 ); |
То есть мы создали функцию, которая делает выборку из списка продуктов на основе нужной нам категории, а потом мы эту функцию подключаем к циклу продуктов через хук add_action к функции do_action, милостиво предоставленной нам woocommerce.
Можно сделать и наоборот — в функции описать не те категории, которые надо выводить на главной, а те, которые надо скрыть. Для этого достаточно поменять оператор с «In» на «Not In». Естественно, что сами категории, а точнее их slug прописываете через запятую в массиве «terms».
4. Осталось дело за малым — добавить условие, при котором эта функция будет срабатывать только на главной странице каталога. Так и чешутся руки написать что-то вроде
|
1 2 3 |
if (is_shop()) |
что, в принципе, не будет неправильным. Но если вы внимательно изучили файл /classes/class-wc-query.php, то напишите условие немного по-другому:
|
1 2 3 |
if ( $q->is_post_type_archive() ) |
а еще лучше вот так:
|
1 2 3 |
if ( !$q->is_post_type_archive() ) return; |
В итоге мы получаем вот такой симпатичный (а главное рабочий!) код, который нужно вставить в файл funcion.php вашего шаблона:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function product_shop( $q ) { if ( !$q->is_post_type_archive() ) return; $q->set( 'tax_query', array(array( 'taxonomy' => 'product_cat', 'field' => 'slug', 'terms' => array( 'collections' ), 'operator' => 'IN' ))); } add_action( 'woocommerce_product_query', 'product_shop', 10, 2 ); |
Надеюсь, что вам понравился этот пост. В будущем планирую продолжить разговор об использовании woocommerce и приемах работы с ним.
Обновление от 6 февраля 2017 года:
Для более быстрой работы данного сниппета, можно подключать его не к хуку woocommerce_product_query, а к хуку pre_get_posts, то есть получается вот такой сниппет в итоге:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
add_action( 'pre_get_posts', 'custom_pre_get_posts_query' ); function custom_pre_get_posts_query( $q ) { if ( ! $q->is_main_query() ) return; if ( ! is_admin() && is_shop()) { $q->set( 'tax_query', array(array( 'taxonomy' => 'product_cat', 'field' => 'slug', 'terms' => array( 'collections', 'gift-cards' ), // Don't display products in the archive category on the shop page 'operator' => 'NOT IN' ))); } remove_action( 'pre_get_posts', 'custom_pre_get_posts_query' ); } |
В данном сниппете я, для примера, указал еще несколько опций:
-
123if ( ! is_admin() && is_shop()) {
— тут мы делаем проверку, что мы находимся не в админке и на странице woocommerce — чтобы не вызывать сниппет, там где не нужно и не перегружать сайт -
123'operator' => 'NOT IN'
— здесь можно указать как ‘IN’, так и ‘NOT IN’ — последнее означает, что мы исключаем категории со страницы магазина
Очень важный момент — данный сниппет ломает работу фильтров по атрибутам! Если вы используете данный сниппет и используете в боковой колонке на главной вашего сайта фильтры по аттрибутам (Woocommerce Layered Nav Widget), то они у вас работать не будут. Это не баг woocommerce, это просто данный сниппет не работает с фильтрами. Пока не знаю как можно это обойти.
Роман, как понимаю для подписки используете Subscribe to Comments Reloaded. Правьте шаблон письма, которое приходит при подписке на комментарии. Они там лишнего накрутили и ссылки в письме приходят в жутком виде. У себя сталкивался.
Евгений, спасибо за замечание! Я тут опытным путем выяснил, что ссылки в кашу превращались из-за плагина
Yoast Comment Hacks, который не обновлялся уже давно, отключил там эту опцию. А что именно по шаблону? Там сейчас такой стоит:
Вы сделали запрос на получение новых комментариев к статье:
[post_permalink]
Пожалуйста, перейдите по следующей ссылке, чтобы подтвердить подписку:
[confirm_link]
Попробую тоже протестировать
Да, вроде правильно выглядит шаблон, у меня сейчас такой же.
Изначально имели такой вид: «Появился новый комментарий к статье [post_title].» и письма были примерно как ваши сейчас:
http://romapad.ru/woocommerce-pokaz-tovarov-iz-vy-branny-h-kategorij-na-glavnoj-stranitse-magazina/#comment-2622
Зажевала форма комментарий=)
Скрин письма
https://drive.google.com/open?id=0B2GI8-vU0zi_T3RlSExKbjJJU1E
понял, поправлю. Спасибо!!
Спасибо, первый вариант сработал. Второй не захотел работать.
Здравствуйте Роман можно узнать как сделать сниппет для бесконечной прокрутки товаров (infinite scrolling). И еще интересует такой вопрос, может поможете, как на главную вывести несколько товаров в отдельном блоке. У меня главная из блоков: «Мы» «О нас» «Новости» и т.д., хотелось бы как то туда добавить блок с товарами.
С уважением.
Роман, здравствуйте! Спасибо за ваш вопрос! По поводу бесконечной прокрутки одним сниппетом не отделаться, поскольку там используются библиотеки javascript. Проще всего взять готовый плагин. От себя рекомендую вот этот:
https://wordpress.org/plugins/load-more-products-for-woocommerce/
Но можно попробовать еще такие варианты:
https://ru.wordpress.org/plugins/yith-infinite-scrolling/
https://ru.wordpress.org/plugins/infinite-ajax-scrolling-for-woocommerce/ — все три бесплатные.
Насчет вывода товаров отдельным блоком на главной лучше всего использовать шорткоды. Есть подробная документация, правда на английском:
https://docs.woocommerce.com/document/woocommerce-shortcodes/
Или можно использовать плагин готовый: https://wordpress.org/plugins/woocommerce-shortcodes/ — он добавляет кнопку в редактор, и там можно в более удобном режиме вставлять шорткоды. Плагин давно не обновлялся, но, как ни странно, работает
Спасибо Вам за ответ, обязательно посмотрю и если смогу воспользуюсь, извините за долгую задержку с благодарностью.
С уважением
Здравствуйте Роман, к сожалению ни одним плагином не смог воспользоваться, дело в том что там необходимо указать классы, сколько я не побывал вставлять классов, у меня к сожалению ни чего не получилось, ни чего не работает. Может что посоветует, если не затруднит.
С уважением.
Надо прописывать классы. Обычно класс блока, в котором содержатся товары, класс отдельного товара, класс блока постраничной навигации и класс ссылки перехода на следующую страницу. На одном проекте у меня вот такие для каждого из 4 прописаны:
div.products
div.product
.woocommerce-pagination
.woocommerce-pagination a.next
Но эти классы могут для разных шаблонов быть разными
Здравствуйте. А не подскажите, как можно на странице витрины организовать фильтрацию по Новинкам и акционным товарам? То есть мне нужно на витрине разместить три кнопки. Все — выводит все товары. Акция — выводит все акицонные товары. И новинки — выводит все новинки. Я пытался реализовать это через шорткоды на отдельной странице. Но мне нужно, чтоб при фильтрации была пагинация и еще у меня на сайте есть выбор сколько товаров должно отображаться на странице. А при использовании шоркодов такое сделать нельзя.
Александр, здравствуйте! Для вашей задачи я бы вам порекомендовал готовый плагин:
WooCommerce Extra Product Sorting Options
https://ru.wordpress.org/plugins/woocommerce-extra-product-sorting-options/
в настройках можно добавить новые способы сортировки товаров — по новизне, по акционной цене, по наличию и т.д. Он выводит фильтры не кнопками, а выпадающим списком.
Роман, добрый день. Снова я, с темой Storevilla.
Пытался решить вопрос сам. не получается.
Установил логотип, но справа от него выводится название сайта(титл) что указан в настройках, в настройке темы ставлю галочку скрыть название сайта, но титл всеравно остается.
Выход только убрать в коде вывод названия сайт и описания на главной.
Роман, здравствуйте! Да, править код темы. Для этих целей удобнее всего Тотал Коммандер подходит, если у вас Windows на компьютере. Через браузер (F12) можно найти нужный кусок кода, куда нужно внести правки, а потом через тотал коммандер (ALT + F7) найти это место поиском по тексту в коде шаблона. Это не так сложно, как кажется сначала)
«Возможность ограничить показ товаров в related products до товаров из одной категории»
Поделитесь сниппетом? Нужно ограничить количество товаров на вкладке Related Products
Петр, здравствуйте! Попробуйте вот этот код:
Добрый день.
Подскажите как убрать вывод категорий на витрине, в описании товара?
т.е выглядит это так у меня
*Изображение товара*
*Название категории в которой находится товар* — это нужно убрать
*Название товара*
*Краткое описание* —
*Добавить в корзину*
Роман, здравствуйте! Вы можете добавить в код functions.php вашего шаблона следующую строку:
Спасибо за ответ, но к сожалению ничего не изменилось.
Может есть еще варианты?
Код 100% рабочий, только что проверил на одном сайте. Может быть вы говорите не про карточку товара, а про страницу со списком товаров? Еще вариант, что у вас используется какой-то шаблона на сайте, который сам переопределяет каким-то образом показ категорий, тогда надо смотреть сам шаблон.
Категория выводится именно на витрине( на главной) и именно с этим шаблоном(темой вп).
Шаблон беспланый, Storevilla.
Пытался самостоятельно что-то сделать, все тщетно
Роман, у вас именно в шаблоне дело. Файл /inc/extras.php с 642 по 648 строчку можно удалить (это в последней версии шаблона). Вот этот код:
Большое спасибо)) Все получилось.
Безмерно благодарен
Здравствуйте, не подскажете, как можно сделать список товаров на главной странице. Чтобы сверху была какая-то информация, а сразу за ней список товаров.
Валентин, здравствуйте! Самое простое — сделать страницу магазина главной. Для этого переходим в админке в «Настройки» — «Чтение» — »
На главной странице отображать» — статическую страницу, и выбираем страницу, которую плагин woocommerce создал как основную страницу магазина. На нее же можно добавить любой текст, он будет выводиться над товарами.
Добрый день!
Возникла следующая задача, товар находиться одновременно в нескольких категориях, но при переходе из какой либо категории на товар в хлебных крошках отображается всегда самая первая, каким образом можно решить эту задачу, чтобы хлебные крошки формировались в зависимости от категории где находиться пользователь? и на сколько это будет правильно с точки зрения СЕО?
Спасибо!
Алексей, спасибо, очень интересный вопрос! С точки зрения seo, насколько я знаю, лучше всего во-первых, чтобы ссылка на товар вообще не включала категорию, это делается в настройках — «постоянные ссылки», и там выбираете «база магазина». Это не по теме вашего вопроса))) но может быть вы не знали об этом. Наличие в ссылке товара категории приведет к появлению дублей — то есть один и тот же товар будет открываться по разным ссылкам, если он относится к нескольким категориям.
Подмена категории в хлебных крошках на странице товара — уже отдельный вопрос, больше технический. Не уверен, что это как-то повлияет на seo. Тут нужен допиливать под себя код хлебных крошек, чтобы он:
— определял ссылку, с которой перешел пользователь
— определял, что это страница категории, а не главная, не блок популярных товаров, корзина, и так далее
— извлекал из ссылки ярлык категории и по нему определял его id
— подставлял по id ссылку и название категории в хлебные крошки
Как-то так)) Технически не так уж сложно
Еще интересный момент — если вы используете плагин seo от yoast, то он добавляет полезную опцию — выбрать какую-то из категорий товара главной. Это как раз хорошо для seo. Более того, можно использовать этот способ и подставлять в хлебные крошки или куда еще нужно именно эту главную категорию. Yoast предоставляет специальную функцию для этого. Вот тут про нее написано: https://github.com/Yoast/wordpress-seo/issues/4038
Роман спасибо за ответ)
Товары у меня находятся по ссылке /product/товар, т.е. не привязаны к категориям.По алгоритму ХК понял, буду затачивать под свои нужды код)
И таки да, использую Yoast SEO, видел, что напротив каждой категории есть ссылочка «сделать главной», но пока все руки не доходили разораться с этим, видать время пришло)
Еще раз спасибо.
Добрый день.
Вы говорили в статье, что можно вас попросить указать и взять спиппет.
Меня интересует сниппет «Возможность вывести атрибуты товаров как новую таксономию, чтоб их в дальнейшем можно было использовать в навигации на сайте (custom menu).»
Каким вы пользовались, что посоветуете.
Спасибо
Здравствуйте, Ярослав! Используйте вот этот код, протестировал его сегодня с последней версией woocommerce и wordpress:
http://wpso.ru/snip—30896
Здравствуйте! Подскажите, будьте добры, как решить проблему: у внешнего/партнёрского товара нет возможности добавлять отзывы в магазине kladproraba.com, блок с отзывами «прячется», эта проблема только с внешним товаром, сторонние плагины например -YITH WooCommerce Advanced Reviews не решили проблему, ответа на этот вопрос пока не существует, как решить проблему? Буду очень признателен за помощь!
Здравствуйте! Спасибо за вопрос. Скорее всего — дело в шаблоне сайта или каком-то из подключенных плагинов. Потому что отзывы в wocoomerce работают по умолчанию для любых типов товаров.
Огромное спасибо, мне очень это нужно было!
Здравствуйте, подскажите пожалуйста как вывести список товаров , когда я выбираю из выдающегося списка категорию ?
Александр, здравствуйте! Можете описать задачу немного подробнее?)) Как я понял, у вас на сайте используется меню с выпадающим списком категорий магазина. Если это меню сделано с помощью стандартного виджета «Woocommerce категории товаров», то все должно работать само по себе
Нет не с помощью виджета ))
Вообщем, есть функционал по добавлению товара пользователями из личного кабинета , из выпадающего списка он выбирает категорию, дальше должен появиться список товаров такой же выпадающий для этих категорий по товарам , откуда он выбирает товар какой нужен и добавляет товар в систему
Хитро придумано) Ну если выпадающий список вам удалось написать, то дальше должно быть не намного сложнее: выпадающий список товаров формируется на основе цикла WP_Query (думаю, вы знаете, что это такое)), где в качестве аргумента передается значение категории из выпадающего списка категорий (самое удобное сделать это на ajax). Пользователь выбрал категорию, данные об этом передаются на сервер, запускается стандартный цикл, который выводит все товары из этой категории в виде еще одного выпадающего списка. Дальше пользователь выбирает нужный товар, и дальше вы уже работаете с этими данными. Чем-то похоже на поиск драйверов по модели компьютера на сайтах некоторых производителей.
Спасибо, Роман. Попробуем.
Просто я думал есть уже какая либо функция наподобие wp_dropdown_categories для товара.
Так как после товара нужно еще выбирать много всякого))
пока нет))) Список товаров, как и любых других постов можно получить с помощью или WP_Query, либо с помощью query_posts, другого пока не придумали)))
«Возможность ограничить показ товаров в related products до товаров из одной категории»
Поделитесь сниппетом? Нужно ограничить количество товаров на вкладке Related Products
Здравствуйте. Задало мне начальство такую задачку: Если цена выбранного товара меньше 1000 $ то в корзине по-мимо выбранного товара должна отображаться ещё и сумма в 200 $(так сказать моральные издержки) Ломаю голову, не могу понять с чего мне начать….
Мне еще именно с такой задачей сталкиваться не приходилось, но что-то похожее делал, только не с картой, а с продуктами. Советую копать в сторону расширений для woocommerce. Они все есть на сайте woothemes.com. В особенности присмотреться к Dynamic Pricing и Gravity Forms Add-ons. У них один и тот же автор, можно ему попробовать написать.
Еще одна идея — в woocommerce есть модуль бесплатной доставки, для которого можно прописать минимальную сумму заказа, при котором такая доставка активируется. Можно посмотреть, как работает этот модуль и написать что-то на его основе, только поменять значения — чтобы до определенной суммы заказа (до 1000$) к стоимости доставки прибавлялось 200$. Как то так =)
Спасибо за ценные советы, буду копать )
Добрый день.
Быть может, я уже совсем заработался, но мне ни как не удается понять, каким же образом настроить вывод товара из разных категорий на разных страницах, т.е. из меню переходить на страницу товара только одной категории.
Буду признателен за помощь.
Здравствуйте! Это делайте в настройках меню. Переходите в админке wordpress во «Внешний вид» -> «Меню» (у вас должна быть включена поддержка меню), в левой колонке найдите блок категорий продуктов, выбираете нужные категории, и на их основе создаете пункты меню.
здравствуйте! установила woocommerce. все работает, но в заказе, когда переходишь в “оплатить заказ” пишет “ошибка заказа”. все платежные шлюзы настроены. помогите, пожалуйста!!!!!
Ксения, здравствуйте! Тут нужно смотреть сам сайт изнутри, возможно, что где-то была допущена ошибка при подключении платежек, или просто при установке магазина. Напишите, пожалуйста, через форму обратной связи
Хорошая статья. Спасибо.
А у меня другая проблема, как вывести меню категорий из магазина на главную страницу? В магазине какое-то свое меню, выглядит неплохо, но как заменить им меню из wordpress на главной я не понимаю.
Может у вас есть идеи?
Когда вы устанавливаете woocommerce, он предлагает провести некоторые настройки — в частности создать несколько служебных страниц. Список полученных страниц можно посмотреть в настройках. Если служебные страницы, по каким-то причинам не назначены, то их можно указать самостоятельно. Возможно их придется создать самому, а потом назначить в настройках. Там есть специальная страница для вывода магазина. Вам нужно просто настроить ваш сайт так, чтобы именно эта страница была главной. Данное движение делается на вкладке в админке: Настройки => Чтение.
Хорошая статья) Спасибо!
Спасибо вам большое , очень помогло 🙂
Здравствуйте Роман! Вы бы не могли не помочь? Всё перерыл, не получается вывести кнопку Добавить в корзину, на странице товара. Плагин woocommerce Заранее спасибо за ответ.
Владислав, здравствуйте!
Тут может быть много вариантов. Если вы не меняли сам плагин woocommerce (где кнопка заказа выводится на странице товара по умолчанию), то, возможно, проблема в шаблоне wordpress. А вообще, кнопка подключается с помощью такого шорткода:
[add_to_cart id=»99″]. Это, чтобы вывести кнопку покупки на любой странице или в виджете — в id указываете id товара.
Или через хук, который позволяет вывести кнопку заказа в нужном месте страницы товара или категории. Если нужно, я напишу небольшой мануал на эту тему.
Добрый день, скажите пожалуйста , а как убрать данную кнопку.. у меня из за нее вся разметка каталога страдает..
Поясните, пожалуйста, вопрос — какую кнопку вы хотите убрать и на какой странице. Если хотите вообще отключить кнопку «Добавить в корзину», то это можно сделать в настройках woocommerce — оставить только каталог без возможности заказа
молодец. спасибо за помощ