Навигация по слоям woocommerce – Как создать интернет-магазин с помощью связки WordPress и WooCommerce: подробное руководство — Вебджем.рф

Содержание

Woocommerce виджеты обзор – INFO-EFFECT

На чтение 2 мин. Опубликовано 15.09.2016

Привет! Мы продолжаем создавать свой интернет-магазин с помощью супер плагина Woocommerce! Сегодня мы разберём стандартные виджеты woocommerce, которые отображаются на странице виджетов по умолчанию. Чтобы узнать какие вам доступны виджеты, перейдите на страницу: Внешний вид – Виджеты.

– Woocommerce категории товаров, список или выпадающий список категорий товаров.

– Woocommerce корзина, показывать корзину пользователя в боковой панели.

– Woocommerce метки товаров, часто используемые метки товаров в формате облака.

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

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

– Woocommerce недавно просмотренные товары, показывать список недавно просмотренных товаров.

– Woocommerce поиск по товарам, поисковое поле только для товаров.

– Woocommerce товары, показать список товаров на сайте.

– Woocommerce товары с высоким рейтингом, показать список товаров с самыми высокими оценками.

– Woocommerce фильтр по цене, показывает слайдер, который позволяет выбирать из списка товары по диапазону цен.

– Недавние отзывы товаров, показывать список последних отзывов на сайте.

– Фильтр средних оценок Woocommerce, фильтрация товаров по рейтингу при просмотре архивов товаров и категорий.

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

Остались вопросы? Напиши комментарий! Удачи!

Виджеты WooCommerce, фильтры при помощи виджетов

Можно сказать это дополнению к моему руководству по виджетам WordPress. Мы рассмотрим виджеты, которые появятся у вас при установке плагина WooCommerce.

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

WooCommerce товары WC_Widget_Products — по сути самый мощный виджет, позволяет вывести все товары, либо рекомендованные, либо те, которые с распродажей и сортировать их по цене, по дате или по количеству продаж (что позволяет замутить виджет Топ продаж).
Возникает только вопрос — что значит «заказ по возрастанию» ? Это ошибка перевода, там имелся ввиду Порядок, а не Заказ, то есть если вы сортируете по цене, то по возрастанию будет значить — начать с самой маленькой цены, а по убыванию — наоборот — с самого дорогого товара.
WooCommerce категории товара WC_Widget_Product_Categories — виджет очень похож на стандартный вордпрессовский виджет с выводом рубрик блога.
WooCommerce метки товара WC_Widget_Product_Tag_Cloud — очень похож на стандартный виджет Облако меток, я бы даже сказал, что это более урезанная версия, потому что со стандартным Облаком меток вы сможете сделать то же самое, и даже больше. Тем не менее такой виджет тоже присутствует. Для сравнения я сделал скриншот обоих виджетов сразу:
WooCommerce поиск по товарам WC_Widget_Product_Search — то же самое, что и обычный поиск WordPress, но только поиск осуществляется по типу записей product.
WooCommerce товары с высоким рейтингом WC_Widget_Top_Rated_Products
WooCommerce недавно просмотренные товары WC_Widget_Recently_Viewed
Woocommerce корзина WC_Widget_Cart

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

WooCommerce Навигационные фильтры WC_Widget_Layered_Nav_Filters — этот виджет просто показывает текущие активные фильтры и позволяет их сбросить.
WooCommerce Навигация по слоям WC_Widget_Layered_Nav — даёт возможность фильтровать товары магазина по какому-либо атрибуту, например цвету или размеру, тип запроса означает, что если вы используете два фильтра по атрибутам и у вас стоит ИЛИ, тогда хотя бы один из них должен совпадать, а если стоит И, то все атрибуты должны совпадать, иначе товар не отобразится в результатах (более подробнее этот момент рассмотрен на видео).
Фильтр средних оценок WooCommerce WC_Widget_Rating_Filter
WooCommerce Фильтр по цене WC_Widget_Price_Filter

Про отключения стандартных виджетов WordPress я уже писал ранее. C виджетами WooCommerce ситуация примерно такая же.

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

add_action( 'widgets_init', 'true_remove_woo_widgets', 20 );
 
function true_remove_woo_widgets() {
 	unregister_widget('WC_Widget_Product_Tag_Cloud'); // нужно указать класс виджета
 
}

Классы виджетов указаны рядом с описанием каждого виджета выше в этом уроке. Код же вполне можно отправить в functions.php, если не знаете куда.

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Групповой товар Woocommerce | Opttour

Групповой товар в Woocommerce это объединение в одной карточке нескольких товаров. Причем зайдя в карточку можно приобрести каждый товар по отдельности это по сути не правильно. Зачем нужен такой вид товара? Было бы гораздо уместнее создавать комплект (сет, группу), который можно приобрести только целиком. Логично давать на этот комплект скидку. Но начнем с текущего функционала.

Как сделать групповой товар

1. Создаем товар, Данные товара выбираем — Сгруппированный товар.
2. На второй вкладке настроек (Сопутствующие) в 3-м поле (Сгруппированные продукты) вводим название товара, который входит в сет. Будут появляться строки с этими товарами — нужно на них нажимать. Таким образом можно связать сколько угодно товаров.
3. Задаем групповому товару описание (полное и краткое), изображение(я). !Цену мы ему задать не можем (она будет браться от каждого товара). Сохраняем.

Если быстро нужен функционал комплекта: есть 3 товара, за счет того что мы их продаем сразу — назначаем на них скидку. Заводим простой товар с соответствующим описанием и названием (Сет: защита от солнца, описание что в него входит). Сложим стоимость 3-х товаров по отдельности — это будет обычная цена, а в скидочной цене указываем цену за комплект.
Правильный групповой товар
Создадим в магазине функционал группового товара (комплекта) каким он и должен быть.
Плагин YITH WooCommerce Product Bundles (2000 установок)
Создается новый тип товара Product Bundle и новая закладка в настройках карточки товара, в которой мы накидываем товары (только простые) и их количество для набора. Запасы набора не связаны с запасами товаров входящих в набор. В категории данный тип товаров добавляются не ajax’ом. В корзине товар выводиться как несколько строк с входящими в него товарами. Весь вышеперечисленный функционал входит в бесплатную версию.

Pro версия за 79$ обещает расширить функционал по таким направлениям:
Динамическая цена комплекта
Вариативные товары в комплекте
Взаимосвязь с транспортными расходами
Возможность скрывать товары данного типа
Динамический объем комплекта. Минимальное количество товаров
Возможность изменять название и описание товаров входящих в комплект. Также можно скрыть изображения товаров
Отдельное поле — скидка на товар в процентах
Варианты вывода товара в корзине
Включение функции изменения количества товаров входящих в комплект
Виджет комплектов
Синхронизация наличия с товарами входящими в комплект
Плагин WooCommerce Product Bundles (1000 установок)
В бесплатной версии предлагает больше функций, чем предыдущий плагин. Также выбираем тип товара Smart Bundle, далее в специальной вкладке выбираем товары входящие в набор. Настраиваем количество товаров. Указываем скидку в процентах на комплект. Товар в категории добавляется ajax! Товар в корзине выглядит как одна строка. Стили вывода товаров входящих в комплект аккуратнее предыдущего решения. Но в бесплатной версии мы не можем добавить больше 3-х наименований. Premium версия стоит 19$ (13/12/2017) в которой будет неограниченное количество наименований, а также пожизненное обновление и поддержка плагина.
Есть еще плагины от Woo: Product Bundles (49$) и Composite Products (79$), но у них нет бесплатных версий, и соответственно о функционале можно только почитать на сайте разработчика.
WooCommerce
На чтение 3 мин. Опубликовано 17.04.2019
Привет! Сегодня я покажу вам очень полезный плагин для интернет магазина WooCommerce. Вы можете сделать бесконечную прокрутку товаров с помощью функции Load More Products. Товары в каталоге будут постепенно подгружаться при прокрутке страницы вниз. Можно вывести кнопку “Загрузить больше”. Вы можете указать свой текст и стиль кнопки. Плагин имеет функцию постепенной загрузки изображений Lazy Load. Всё очень просто и быстро, смотрите далее!

Установить плагин WooCommerce Load More Products вы можете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, установите и активируйте его.

Далее, после активации плагина, слева в меню админ-панели перейдите на страницу: BeRocket – Load More Products.

В настройках вы можете:
General
Products Loading Type. Выбрать тип загрузки. 3 варианта: Авто-загрузка; С помощью кнопки; AJAX пагинация.
Loading Image. Выбрать изображение загрузки;
Buffer Pixels. Расстояние в пикселях до загрузки;
Don’t update url when next page shown. Не обновлять URL адрес при загрузки;
JavaScript and CSS is used on WooCommerce pages only. Использовать CSS и JS только на страницах Woo;
Сохраните изменения.

Button Settings
Text on button. Укажите свой текст кнопки;
Background color. Цвет фона кнопки;
Background color on mouse over. Цвет фона при наведении;
Border color. Цвет границ кнопки;
Text color. Цвет текста;
Text color on mouse over. Цвет текста при наведении;
Font size. Размер шрифта;
Paddings. Укажите расстояние со всех сторон между границей и кнопкой;
Margin. Укажите величину отступа для всех сторон;
Border. Величина границ со всех сторон;
Border radius. Радиус границ.

Previous Settings
Здесь можно включить и настроить кнопку Load Previous Загрузить предыдущие. Настройки такие же.

Selectors
Здесь можно настроить крючки JavaScript для пользовательского кода:
Products Container Selector;
Product Item Selector;
Pagination Selector;
Next Page Selector;
Previous Page Selector.

JavaScript
Здесь вы можете добавить свой код до загрузки Before Update и после After Update.

CSS
Disable Font Awesome. Можно не загружать css файл для шрифта Awesome на сайт;
Font Awesome Version. Выбрать версию шрифта;
Custom CSS. Добавить свои стили;
Сохраните изменения.

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

Остались вопросы? Напиши комментарий! Удачи!

Как улучшить категории Woocommerce без плагинов
/**Дополнительное описание для категорий Woocommerce **/

add_action( ‘product_cat_edit_form_fields’, ‘wpm_taxonomy_edit_meta_field’, 10, 2 );

function wpm_taxonomy_edit_meta_field($term) {
$t_id = $term->term_id;
$term_meta = get_option( «taxonomy_$t_id» );
$content = $term_meta[‘custom_term_meta’] ? wp_kses_post( $term_meta[‘custom_term_meta’] ) : »;
$settings = array( ‘textarea_name’ => ‘term_meta[custom_term_meta]’ );
?>
<tr>
<th scope=»row» valign=»top»><label for=»term_meta[custom_term_meta]»>Дополнительное описание</label></th>
<td>
<?php wp_editor( $content, ‘product_cat_details’, $settings ); ?>
</td>
</tr>
<?php
}

add_action( ‘edited_product_cat’, ‘save_taxonomy_custom_meta’, 10, 2 );
add_action( ‘create_product_cat’, ‘save_taxonomy_custom_meta’, 10, 2 );

function save_taxonomy_custom_meta( $term_id ) {
  if ( isset( $_POST[‘term_meta’] ) ) {
    $t_id = $term_id;
    $term_meta = get_option( «taxonomy_$t_id» );
    $cat_keys = array_keys( $_POST[‘term_meta’] );
    foreach ( $cat_keys as $key ) {
      if ( isset ( $_POST[‘term_meta’][$key] ) ) {
        $term_meta[$key] = wp_kses_post( stripslashes($_POST[‘term_meta’][$key]) );
      }
    }
    update_option( «taxonomy_$t_id», $term_meta );
  }
}

/**Вывод второго описания категорий Woocommerce **/

add_action( ‘woocommerce_after_shop_loop’, ‘wpm_product_cat_archive_add_meta’, 50 );

function wpm_product_cat_archive_add_meta() {
  $t_id = get_queried_object()->term_id;
  $term_meta = get_option( «taxonomy_$t_id» );
  $term_meta_content = $term_meta[‘custom_term_meta’];
  if ( $term_meta_content != » ) {
    if ( is_tax( array( ‘product_cat’, ‘product_tag’ ) ) && 0 === absint( get_query_var( ‘paged’ ) ) ) {
      echo ‘<div>’;
      echo apply_filters( ‘the_content’, $term_meta_content );
      echo ‘</div>’;
    }
  }
}