В WooCommerce есть крайне полезная функция Рекомендуемых товаров, которую, в силу каких то причин, мало кто использует 🤷♂️
В этой обзорной статье мы рассмотрим функцию Рекомендуемые товары.
Как включить Рекомендуемые товары?
Для этого перейдите в раздел всех товаров и первым делом убедитесь в настройках экрана, что у вас включен столбик, при помощи которого ставится эта отметка принадлежности товара к избранным (рекомендуемым)
при включенном отображении у вас в таблице товаров должен находится столбик со звёздочками. Именно при помощи него можно отмечать товары, как избранные.
второй способ, при помощи которого вы можете отметить товар, находится в разделе Свойства. В каждой карточке товара при быстром редактировании (нажав Свойства) можно также управлять принадлежностью того или иного товара к Рекомендуемым.
Если необходимо массово изменить статус Рекомендуемых товаров, то удобным способом будет массовое редактирование. Выделяем нужные товары, и нажимаем Изменить
После этого в режиме массового редактирование устанавливаем Да или Нет
В режиме редактирования карточки товара функция отметки товара как Рекомендуемый тоже доступна, правда немного скрыта. Нужно распахнуть раздел в блоке Опубликовать:
и сделать отметку
Как выводить рекомендуемые товары?
Что ж, мы отметили ряд товаров, как Рекомендуемые и теперь наша задача вывести их отдельно на странице. Для этого в WooCommerce есть полезный и безопасный для новичков функционал — шорткоды, при помощи которых мы выведем наши Рекомендуемые товары.
Создайте произвольную страницу и в тело страницы вставьте вот этот шорткод [featured_products]. У меня это выглядит вот так:
Теперь, перейдя на эту страницу в публичной части сайта, мы увидим наши отмеченные товары
А при помощи специальных атрибутов, описание которых доступно в документации, можно кастомизировать вывод наших товаров. В данном примере я использую другой шорткод, но с атрибутами, которые позволяют выводить те же Рекомендуемые товары, но только в верстке двух колонок:
Вывод при помощи виджетов
В разделе виджеты доступны независимые блоки для вывода Рекомендуемых товаров. Они не зависимы от ваших отметок, которые мы рассматривали ранее. То есть добавив этот блок вам необходимо заново отметить товары которые будут выступать в качестве Рекомендуемых. По сути это отдельный функционал. Что бы избежать путаницы я бы его назвал иначе, например, Группировка товаров или Избранные.
Добавив блок нужно отметить заново товары.
Это справедливо и для категорий. То есть можно выводить все товары которые принадлежат Избранной категории.
Учтите, что это разные функционалы. И отмеченные ранее товары как Рекомендуемые не будут учитываться в этих блоках.
Если требуется скрыть товары которых нет в наличии, то необходимо выполнить два условия:
Включить функцию Управления запасами. Перейдите в раздел WooCommerce > Настройки > вкладка Товары > Запасы и включите функцию управления запасами
Далее, в нижней части страницы отметьте чекбокс Спрятать отсутствующие товары из каталога
Вот и всё! Теперь давайте посмотрим, как это работает. Перейдём в карточку любого товара к разделу его статуса:
Когда отмечен статус В наличии мы можем наблюдать наш товар на витрине нашего электронного магазина:
Теперь поставим настройку Нет в наличии и снова обратимся к витрине нашего магазина:
Товар исчез. Так мы и ожидали. Но что будет, если попробовать найти его через поиск?
Да! Ожидаемое поведение, хороший UX. Исключенные товары (которых нет в наличии) при этой настройке не доступны для поиска.
Но у нас остался ещё один статус — Предзаказ. Давайте отметим его и посмотрим, что из этого получится.
Товар появится на витрине
Товар будет доступен для поиска
Получается, что эта настройка не относится к исключаемой. Но что если нам необходимо показывать товары которые есть в только наличии и скрывать товары которых нет в наличии и которые имеют статус предзаказа? В этом случае быстро задачу можно решить при помощи кода. Небольшой сниппет, который необходимо добавить к функциям вашей активной темы или вот этим безопасным методом.
В WordPress есть специальный хук-action pre_get_posts, который позволяет изменять информацию экземпляра текущего запроса $wp_query и при помощи «сеттеров» мы можем повлиять на текущий запрос. Выглядит в виде кода это примерно так:
add_filter( 'pre_get_posts', 'poet_show_in_stock_only', 100 );
function poet_show_in_stock_only( $query ) {
// не админка и это основной запрос с публичной части сайта
if ( ! is_admin() && $query->is_main_query() ) {
$query->set(
'meta_query',
[
[
'key' => '_stock_status',
'value' => [ 'outofstock', 'onbackorder' ], // исключаем
'compare' => 'NOT IN'
]
]
);
}
}
На самом деле тут нет ничего хитрого. Мы подключились в момент вызова это «экшена» с нашей функцией и сразу начали с проверки того, что: это не административная часть (т.к. запрос предназначен только для публичной, клиентской части сайта). Далее проверка что это основной запрос который выполняется в стандартном цикле WordPress и далее при помощи set мы устанавливаем новые аргументы в наш запрос, в которых исключаем товары со статусом: нет в наличии и предзаказ.
Но этого мало. При помощи условных тегов, которые справедливы только для WooCommerce, мы можем конкретизировать наш запрос и добавить ещё блок условий при которых будет вызываться наш «сеттер»:
add_filter( 'pre_get_posts', 'poet_show_in_stock_only', 100 );
function poet_show_in_stock_only( $query ) {
// не админка и это основной запрос с публичной части сайта
if ( ! is_admin() && $query->is_main_query() ) {
if ( is_shop() || is_product_category() || is_product_tag() ) {
$query->set(
'meta_query',
[
[
'key' => '_stock_status',
'value' => [ 'outofstock', 'onbackorder' ],
'compare' => 'NOT IN'
]
]
);
}
}
}
is_shop() — Главная архивная страница товаров (как правило адрес /shop/ )
is_product_category() — Страница Категории товаров
is_product_tag() — аналогично Категории, но только страница каталога с товарами объединённых определённым тегом (меткой)
После добавления данного кода будут отображаться товары только со статусом В наличии (instock), а Нет в наличии (outofstock) и Предзаказ (onbackorder) — скрыты.
Категории товаров в WooCommerce — это основной способ группировки товаров со схожими характеристиками. При необходимости к категориям вы также можете добавить подкатегории.
Всё это необходимо для того, чтобы покупатели могли легко найти то, что им нужно. Важно создать простую и понятную структуру, чтобы пользователи могли легко перемещаться по сайту и находить нужные товары.
В этой статье мы рассмотрим, как можно изменить очерёдность отображения категорий на клиентской (публичной) части сайта.
Переходим в раздел Категории и методом перетаскивания — выставляем нужный порядок у категорий.
Наглядный пример:
Теперь на публичной части сайта порядок категорий будет соответствовать заданному в панели администратора
Это также справедливо и для вывода списка категорий при помощи виджета
Чтобы выгрузить данные об атрибутов товарах с сайта мы можем задействовать встроенный механизм WooCommerce который доступен нам на странице всех товаров. Находясь в этом разделе Все товары мы можем обнаружить две кнопочки Импорта и Экспорта товаров. Выбираем Экспорт.
Перед нами будет окно экспорта товаров, где мы можем задать некоторые критерии для выборки перед экспортом, например, указать выборочно категории.
Указываем столбец ID (для идентификации товаров) и столбец Атрибуты
Если на вашем сайте существует система Артикулов, то можно выбрать столбик Артикул для идентификации товаров, так как ID это по сути удобно для идентификации товаров внутри WordPress/WooCommerce, а если ваш интернет-магазин взаимодействует в обмене и данных с другими системами, такими как 1С и у вас уже есть система распознавания (идентификации) товаров по артикулу, то вероятно правильным выбором будет задействовать вместо столбца ID столбик Артикул.
Далее нажимаем Сгенерировать CSV и перед нами отобразится процесс генерации файла формата CSV
Если мы откроем этот файл после загрузки, например, в Excel, то можем испытать лёгкое недоумение от содержания данного файла:
И в связи с этим, первая рекомендация: избегайте работу с экспортируемым файлом в Microsoft Excel из-за проблем с форматированием и кодировкой символов
Для удобной работы с данными я рекомендую использовать, например, Google Таблицы
Задача: Создать атрибуты (характеристики) для товара в интернет-магазине под управлением WordPress + WooCommerce.
Что такое атрибуты в WooCommerce?
Атрибуты товара в WooCommerce — это характеристики или свойства товара, которые отличают его от других товаров в магазине. Они позволяют продавцам добавлять дополнительную информацию о товарах, такую как цвет, размер, материал, стиль, дата выпуска и т. д. Это помогает покупателям легче ориентироваться в ассортименте магазина и принимать обоснованные решения о покупке.
В WooCommerce атрибуты товаров создаются и управляются через административную панель. Продавец может создать новый атрибут товара, назвать его и определить тип данных, который он будет содержать (например, текст, число или выбор из списка). Затем он может присвоить этот атрибут определенным товарам в каталоге, чтобы добавить подробную информацию о них.
Решение: Переходим в подраздел Атрибуты раздела Товары. Даём имя нашему атрибуту (характеристике) товара и добавляем в систему.
После успешного добавления ваши атрибуты будут появляться в системе. Но может возникнуть и проблема. Ярлык атрибута не может быть более 28 символов, поэтому, если вы увидите подобную ошибку, то исправить её можно путём редактирования Ярлыка — его сокращением.
Вы можете редактировать созданные атрибуты, проследовав по ссылке Изменить на нужном атрибуте
Рекомендуется создавать (или изменить) Ярлыки на латинские символы, либо правильным переводом: цвет = color, либо транслитерацией, то есть просто превращая кириллические символы в латинские: состав=sostav
Созданным атрибутом можно сразу определить порядок сортировки по умолчанию. Это очень полезная функция, например для указания размеров. Очень удобно когда они идут последовательно в возрастающем порядке: 42, 44, 48, 50, 52 и т.д.
P.S. данному примеру будет соответствовать выбор Название (числовое)
После создания Атрибутов, осталось наполнить их значениями. Это можно сделать сразу, предопределив эти значения для удобства или добавлять значения в момент добавления товара прямо из его карточки. Рассмотри оба варианта.
Добавление значений (вариантов) атрибутов из раздела Атрибуты
Переходим по ссылке Настройка значений нужного атрибута
По аналогии с добавлением самого атрибута добавляем уже его варианты (значения). Указываем: Имя, Ярлык и нажимаем Добавить
Обратите внимание на примечание:
«Ярлык» — это вариант названия, подходящий для URL. Обычно содержит только латинские буквы в нижнем регистре, цифры и дефисы.
Добавляя варианты цвета я сразу задавал им названия на латинице. В итоге получилось:
Если требуется отсортировать названия вариантов, то вы уже знаете как это можно сделать 🙂 Только в этом случае нужно в настройке атрибута выбрать значение Имя
Теперь наши значения будут идти в алфавитном порядке
Как прикрепить атрибут к товару?
Переходим в режим редактирования нужного товара
Оказавшись в режиме редактирования карточки товара, переходим к разделу Атрибуты, где мы можем добавлять уже имеющиеся в базе атрибуты (которые ранее создали) или при необходимости создавать новые, прямо из карточки товара.
Добавим существующий атрибут Цвет
После этого нам необходимо выбрать соответствующее свойству товара значение. Добавлять мы можем сразу все значения, например, это удобно делать в линейке размеров или добавить выборочно. Также возможно создать Новое значение, но об этом чуть позже. Обратите внимание на ссылку Удалить. Эта ссылка просто удаляет, а вернее открепляет данный атрибут от товара. То есть он по прежнему будет в глобальной базе и никуда не денется.
Так как наша шапочка имеет красный цвет, добавим ей соответствующее значение:
После сохранения изменения вступят в силу и вы можете увидеть в карточке товара на лицевой (публичной) части сайта, в разделе Детали, добавленную характеристику Цвет:
Добавление атрибутов и значений прямо из карточки товара
Бывают случаи когда требуется «на ходу» добавлять новые атрибуты и значения прямо из карточки товара в которой вы работаете, а не скакать постоянно по разделам.
Рассмотрим пример добавления Страны изготовления. Для этого в режиме редактирования товара, нам необходимо:
выбрать Добавить
Указать Имя атрибута
Указать Значение(я) атрибута. Если значений несколько, то в качестве разделителя выступает вертикальная черта.
Сохранить атрибуты
Теперь на странице товара у нас отображается две характеристики:
Как поменять местами атрибуты?
Если требуется изменить очерёдность отображения характеристик, то это можно сделать методом перетягивания, зажав левую клавишу мышки. Очерёдность сразу изменится.
Нюансы. Баг или фича?
Добавляя новые атрибуты из карточки товара они не добавляются в общий раздел Атрибутов 🙁 Как мы видим, в списках нет добавленного атрибута Страна
И при добавлении атрибута для нового товара, ранее добавленный атрибут через карточку товара не доступен для поиска 🙁
Я бы посоветовал заранее определять Атрибуты из раздела Атрибутов и сразу задавать нужные значения.
А вот в случае, если атрибут уже предопределён и мы вносим несуществующее новое значение, как в примере ниже: у нас есть заранее созданный атрибут Состав и мы добавляем ему новое значение прямо из карточки товара
Во всплывающем окне указываем значение
сохраним изменения
то в этом случае добавленное новое значение появится в общем разделе Атрибутов. Предсказуемый, ожидаемый UX, согласны? Чего не скажешь о создании несуществующих новых Атрибутов из карточки товара.
Ну и не забывайте менять Ярлыки на латиницу 🙂
Архивы по значению атрибута
Например, если однажды встанет необходимость выборки всех товаров только по цвету, то вы без труда сможете это осуществить, применив к нужному атрибуту функцию Архивы.
Переходим в режим редактирования атрибута Цвет и включаем Архивы:
Что произошло? Теперь нам доступна выборка всех товаров нашего магазина по цвету. В карточке товара значение цвета теперь является ссылкой, по клику на которую мы перемещаемся на страницу где будет доступна выборка всех товаров магазина у которых в качестве цвета указан Красный
А как вы создаёте атрибуты и с какими трудностями и неожиданностями сталкивались? Напишите в комментариях.
Задача: На странице оформления заказа в поле для ввода номера телефона задать предустановленную схему номера в формате пригодному для русскоязычного сегмента
+7 xxx-xxx-xx-xx (или вариант через 8-ку)
Решение: Выполнять поставленную задачу мы будем на JavaScript, в первом случае — на базе библиотеки jQuery, которая поставляется с WordPress и доступна «из коробки» и во-втором — решение на нативном JS (то есть без зависимостей от сторонних библиотек, в частности jQuery)
Мне встретилось в интернете уже готовое решение, поэтому придерживаясь принципа: «Зачем писать то, что уже написано», я взял его за пример. Единственное, нужно проинспектировать нашу форму отправления заказа и выяснить идентификатор нашего «инпута» для указания номера телефона.
Давайте взглянем на форму при оформлении заказа в WooCommerce.
Если требуется добавить в поле подсказку какой формат ввода номера телефона мы ожидаем от пользователя, то поможет нам в этом специальный фильтр, который отвечает за возможность изменения информации в полях. В документации есть подходящий для решения нашей под-задачи пример
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['order']['order_comments']['placeholder'] = 'My new placeholder';
$fields['order']['order_comments']['label'] = 'My new label';
return $fields;
}
В примерах из документации можно найти все названия полей. В нашем случае идентификатор нашего поля billing_phone (смотреть рисунок выше, с исследованием элемента) и он относится к группе Billing (эта информация получена тут). Поэтому наш код будет выглядеть следующим образом:
// Hook in
add_filter( 'woocommerce_checkout_fields', 'poet_override_checkout_fields' );
function poet_override_checkout_fields( $fields ) {
$fields['billing']['billing_phone']['placeholder'] = '+7 (123) 456-78-90';
$fields['billing']['billing_phone']['maxlength'] = 10; // ожидаем ввода 10 основных символов номера телефона
return $fields;
}
Выполнение данного кода привнесло в поле нашей формы подсказку-заполнитель
Естественно, мы не можем ручаться что именно так будет осуществлён ввод данных пользователем. Поэтому напишем вторую функцию, которая будет задавать правильное форматирование при вводе благодаря шаблону, который мы реализуем.
В WooCommerce для этого есть удобная функция wc_enqueue_js(), которая добавляет пользовательский код в вывод в нижней части сайта перед закрывающим тегом </body>. Вывод справедлив если страница каким то образом относится к WooCommerce. То есть на одиночной странице записи этого вывода не будет.
Найти функцию можно от корня вашего сайта в wp-contents/plugins/woocommerce/includes/wc-core-functions.php
Она позволяет добавлять в глобальную переменную (global $wc_queued_js) произвольный код. А её вызов можно увидеть чуть ниже по коду:
Обратите внимание, что обёртка для jQuery уже присутствует и можно просто пользоваться её методами. И вот изящное решение, от Rodolfo Melogli можно увидеть ниже.
Оно рабочее. Но зависит от библиотеки jQuery и «заточено» под американский стандарт, так сказать. Так же данное решение не сработает на страницах, которые не относятся к WooCommerce (справедливо для данного кода выше). Ещё мне не нравится пример заполнителя, пользовательский опыт говорит об обратном, вряд ли все будут придерживаться строгого заполнения.
Можно конечно доработать и всё исправить (в случае с примером выше основанным на jQuery), но мне больше понравилась библиотека Cleave.js и её аддон, который заточен под русские стандарты при вводе номера телефона, учитывая с «восьмёрки» или с «плюс, семёрки» начинает набирать пользователь номер.
Поэтому в данном примере мы подключим саму библиотеку и её аддон для страны с кодом RU (в целях уменьшения размера подключаемого кода) и проверим его работу в действии.
К тому же, подключать мы будет стандартной функцией WP для того чтобы решение было универсальным и могло использоваться на разных страницах к разным формам, в том числе популярного плагина Contact Form 7.
Важное примечание! Библиотека с минувшей осени (обращение автора от 25.11.23г) уже не поддерживается по ряду причин, которые описаны в обращении. Она переписана автором на TypeScript и ES6. Пример в статье просто иллюстрирует решение задачи. В целом рекомендуется эта библиотека.
Первым делом задействуем старую добрую функцию WP wp_enqueue_script(), которая будет подключать скрипт библиотеки Cleave.js и её аддон ориентированный на RU. Проверка ! is_checkout() гарантирует подключение только на странице оформления заказа и исключает подключение на прочих страницах
wp_add_inline_script( ‘cleave-phone’… инициализирует (вызывает функционал) на нужном нам поле с нужными параметрами, а частности разделителем в виде чёрточки.
Результатом выполнения кода будет предопределённая маска, которая не позволит пользователю вводит через чур много символов и будет учитывать начало ввода «+7» или «8»
Как подключить маску на других страницах, к другим формам?
Всё очень просто. Решение универсальное в пределах WP.
У нужной формы необходимо понять, как «зацепиться» за нужное поле, или «по айди» или «по классу»
Узнать «айди» страницы, для того чтобы добавить её в условие проверки, дабы не вызывать где не попадя 🙂
Например, у нас есть форма для обратной связи на странице контактов. Первым делом исследуем нужное поле:
Видим подходящий класс. Следовательно, понимаем, как будем делать «селект» — по классу. Далее, узнаем «айдишник» страницы на которой наша форма. В итоге наш код может выглядеть так:
Из примера видно, что мы просто, через запятую, добавили новый селектор по CSS классу. Теперь наша маска применяется к полу телефона созданной плагином Contact Form 7
Рекомендация. Старейтесь всегда проверять исходный код страницы и убеждаться, что нужный скрипт присутствует на ней.
WooCommerce– это платформа электронной коммерции для WordPress с открытым исходным кодом, которая предоставляется в виде плагина совершенно бесплатно для всех желающих превратить свой сайт на WordPress в интернет-магазин.
Частой задачей (и крайне важной для маркетологов) является передача с заказом информации чтобы отследить эффективность рекламной кампании.
Хорошая весть! В WooCommerce с версии 8.5 наконец-то появился механизм который делает захват данных (GET-параметры из URL и прочие данные из Заголовков ответа сервера), сохраняет их и передаёт с выполненным Заказом. Тем самым мы можем получить очень важную информацию об эффективности той или иной рекламной кампании.
Ещё раз отмечу, что это доступно с версии 8.5.
Как узнать какая у меня версия WooCommerce?
Для этого нужно перейти в раздел WooCommerce > Статус
На данном примере версия ниже 8.5 и как следствие этой настройки мы не обнаружим
Как задействовать (включить) эту функцию?
Для того чтобы включить (или проверить включено-ли) эту новую функцию передачи данных UTM-меток, нам необходимо пройти в раздел WooCommerce > Настройки, далее вкладка Дополнительно и выбираем её подраздел Функции:
И нужно включить функцию Атрибуция заказа. Что произойдёт? Теперь при оформлении Заказа в теге <form> появятся скрытые поля со служебными данными:
Если у вас уже были «прикручены» скрытые поля в форме, то полагаю совместимость будет хорошая, так как атрибут name задан очень уникально )
Как это работает?
В частности UTM-меток, в ядре WooCommerce для клиентской части (frontend) есть sourcebuster.js скрипт, который и забирает значения из нужных GET-параметров, то есть ссылки должны быть сгенерированы классическим образом и названия должны быть стандартные. Разобраться в этом и сформировать правильный URL поможет, например, этот конструктор.
Обязательные параметры:
utm_source — название рекламной площадки
Зачем нужен: Чтобы указать название источника трафика
Примеры:
utm_source=google – контекстная реклама в Google Ads
utm_source=yandex — контекстная реклама в Яндекс.Директ
utm_source=vk — контекстная реклама в Вконтакте
https://tilda.cc/ru/utm/
utm_medium — тип рекламы
Зачем нужен:
Чтобы определить типа кампании или рекламы
Примеры:
utm_medium=organic – бесплатный переход
utm_medium=cpc – контекстная реклама (cost per click, плата за клик)
utm_medium=email — рассылка
utm_medium=social — социальные сети
utm_medium=banner — медийная реклама
utm_medium=cpa — другая реклама (cost per action, плата за действие)
https://tilda.cc/ru/utm/
utm_campaign — название кампании
Зачем нужен:
Позволит вам отличить одну рекламную кампанию от другой в статистике
Примеры:
utm_campaign=mebel_dlya_doma – рекламная кампания мебели для дома
https://tilda.cc/ru/utm/
Необязательные параметры
utm_content — дополнительная информация, которую можно отслеживать, если совпадают другие параметры
Зачем нужен:
Часто используется как пометка для объявления внутри рекламной кампании. Название можно задать произвольно, удобнее всего использовать важные характеристики объявления — подкатегория товара или услуги, тип самого объявления и т. п.
Примеры:
utm_content=zero_block240×60 — баннер 240 на 60 про Zero блок на Тильде
utm_content=zero_block_text — текстовое объявление про Zero блок
https://tilda.cc/ru/utm/
utm_term — ключевое слово, с которого начался показ объявления
Зачем нужен:
Позволит вам отличить одну рекламную кампанию от другой в статистике
https://tilda.cc/ru/utm/
Я заполнил параметры нужными значениями и получил готовую ссылку:
Теперь при переходе по ней скрипт (sourcebuster.js) будет забирать значения из нужных параметров в URL и сохранять их в браузере. А в момент заказа обращаться к ним и добавлять в форму для отправки.
Данные передаются в объекте Заказа и сохраняются в БД. Доступ к этим данным можно получить в карточке заказа.
В таблице всех заказов вы должны увидеть столбик важных данных — Происхождение. На мой взгляд понятнее было бы назвать Источник, но не суть …
Если вы не видите этот столбик, то проверьте в настройках экрана включен ли он у вас?
Ну а если мы «провалимся» в карточку отдельного заказа, то в разделе Атрибуция Заказа увидим намного больше полезной информации о нашем заказчике:
Обратите внимание, на информацию о Типе устройства клиента. В некоторых случаях это может быть очень полезно.
Нюансы
Так как разработчики плагина WooCommerce делают акцент на блочную парадигму разработки, то представление нашей страницы Оформления заказа теперь может иметь блочный вид. В режиме редактирования страницы, которая отвечает за Оформление заказа можно увидеть два варианта отображения:
Классический — это при помощи шорткода, который вызывал функционал подключения тэмплейтов и т.п.
Блочный — на базе блоков редактора Gutenberg.
Если удалить это элемент и попытаться найти новый, то нам будет доступен ещё один вариант — блочный:
Добавив его, мы получаем довольно красивый шаблон для клиентской странице оформления заказа:
В этом случае исследование элементов формы могут вас расстроить, так как вы не обнаружите скрытых полей в виде элементов <input> , но не стоит расстраиваться! Они присутствуют, правда в другом формате — в виде объекта JSON
Вот, после отправки из блочного представления Оформления Заказа получили ожидаемые данные:
Важное примечание. Эти UTM-метки и прочие данные хранятся в течении сеанса пользователя. То есть, после того, как посетитель прекращает сессию, тем самым закрыв окно браузера, то эти данные уничтожаются.
Что хранится в файлах cookie?
Функция атрибуции заказов использует следующие файлы cookie:
Имя файла COOKIE
Данные
Срок Хранения
sbjs_session
Количество просмотров страниц в текущем сеансе и путь к странице.
30 минут
sbjs_udata
Информация о посетителе, такая как IP, браузер и тип устройства.
Сессия
sbjs_first
Источник трафика первого посещения посетителем вашего магазина
Сессия
sbjs_current
Источник трафика
Сессия
sbjs_first_add
URL-адрес и страница входа для первого посещения посетителем вашего магазина
Сессия
sbjs_current_add
URL-адрес и страница входа для текущего посещения посетителем вашего магазина
Сессия
sbjs_migrations
Прочие Технические данные
Сессия
Какие данные получает Automattic?
Учтите, что эти данные для внутренних целей может получать компания-разработчик продукта WooCommerce. В компанию Automattic будут передаваться данные каждого заказа с вашего сайта. Данные клиента, такие как адрес электронной почты, платежные данные или данные о доставке, переданы не буду.
Если вы не желаете передавать эти данные в Automattic, то нужно убедиться в том, что функция отключена (галочка должна быть снята)
Задача: на странице вариативного товара установить предпочтительное значение вариации (опции) по умолчанию
Решение: Нужно зайти в режиме редактирования на карточку вариативного товара и в разделе Вариации выбрать нужный вариант, который будет отображаться по умолчанию вместо слова Выбрать
Допустимы и комбинированные варианты, когда вариация создаётся на основе двух и более вариантов
Дано: Интернет магазин под управлением WordPress + WooCommerce.
Задача: Отследить успешное добавление товара в корзину пользователем и передать эту информацию для аналитики в Яндекс Метрику.
Решение: решить подобную задачу можно разными способами: на стороне клиента, исключительно за счёт JavaScript и на стороне сервера — на PHP.
Требования к сайту
При создании цели важно учитывать:
Форма должна быть создана с помощью тега form. Если форма сделана через теги div, она отслеживаться не будет.
Отправка формы должна выполняться через элементы button type=»submit» и input type=»submit». Если отправка реализована через элемент button type=»button», цель достигаться не будет.
Элементы button type=»submit» и input type=»submit» должны находиться внутри элемента form.
Если форма обрабатывается с помощью JavaScript, цель будет работать только для стандартного события onSubmit.
Так как вёрстка в разных шаблонах оформления может быть разная, то своё решение мы начнём с исследования нашей кнопки в объектной модели документа (DOM), для того что бы понять удовлетворяет ли наш сайт описанным условиям.
Мы видим элемент кнопки (button) и наличие атрибутов, которые могут помочь «зацепиться» за этот элемент и «повешать» на него нужное нам событие. Также наша кнопка находится в теге <form> , что говорит о соответствии условиям описанных в документации Яндекс Метрики.
Забегая вперёд отмечу, что для точности передачи данных лучше вешать это событие на отправку формы, а не на клик по кнопки (хотя для некоторых задач подойдет именно клик, например, когда вы хотите просто проверить интерес к чему либо, к новому разделу на сайте).
Первым делом, нам нужно создать цель в личном кабинете Яндекс Метрики:
Выбираем JavaScript-событие и присваиваем этому событию уникальное имя для дальнейшего отслеживания. В примере ниже, мы можем наблюдать, как после создания идентификатора цели ниже, мы можем наблюдать готовую строку кода, который необходимо будет вызвать на наше событие:
Готово! Часть задачи мы выполнили. В личном кабинете Яндекс Метрики создана наша цель:
Решение на JavaScript
Теперь, мы можем смело приступать к дальнейшей реализации на стороне сайта.
В качестве селектора (выбираемого из DOM элемента) у нас выступает тег form с классом «cart». Наш скрипт может выглядеть примерно так:
Пояснение: мы получили наш элемент формы и наблюдем через подписку на событие submit за её успешной отправкой (добавление в корзину — это и есть в нашем случае отправка формы)
Если приглядеться к примеру указанному на сайте Яндекс Метрике, то мы можем заметить, что можем разместить вызов функции Яндекс Метрики (ym) прописав его в атрибут onsubmit нашей формы добавления товара в корзину.
Если вы всё сделали правильно, то при исследовании элемента непременно должны увидеть добавленный атрибут (справедливо для варианта №2)
Теперь в Яндекс Метрике, в разделе Конверсии, мы можем ожидать результат её выполнения:
Вот так выглядит выполнение скрипта (цель отработала):
Обращу внимание, что можно было воспользоваться методом автоматического добавления цели «Отправка формы»:
В этом случае событие отправки будет распознано автоматически и после статистики нашей конкретной цели, ниже мы можем наблюдать фиксацию автоматической.
Задача: ограничить возможность заказа пользователя определённой суммой товаров в корзине.
То есть, пока клиент нашего интернет-магазина не добавит товаров на нужную сумму в корзину заказ будет невозможен. Вот так это выглядит в виде уведомления на странице корзины:
Уведомление также будет выводиться и в момент обработки данных непосредственно на страницы заказа и не позволять ему состояться пока условие не будет удовлетворено.
Решение: просто добавьте этот php-сниппет и укажите в виде числового значения минимальную сумму для осуществления заказа:
/**
* Set a minimum order amount for checkout
*/
add_action('woocommerce_checkout_process', 'wc_minimum_order_amount');
add_action('woocommerce_before_cart', 'wc_minimum_order_amount');
function wc_minimum_order_amount()
{
// Установите цифру минимального значения для осуществления заказа
$minimum = 100;
if (WC()->cart->total < $minimum) {
if (is_cart()) {
wc_print_notice(
sprintf('Ваша сумма заказа %s — вы должны дополнить до минимума в %s чтобы оформить заказ.',
wc_price(WC()->cart->total),
wc_price($minimum)
), 'error'
);
} else {
wc_add_notice(
sprintf('Ваша сумма заказа %s — вы должны дополнить до минимума в %s чтобы оформить заказ.',
wc_price(WC()->cart->total),
wc_price($minimum)
), 'error'
);
}
}
}
Не добавляйте произвольный код в файл родительской темы, functions.php поскольку он будет полностью удален при обновлении темы.
Если по каким то причинам вы не получаете письма с сайта WordPress на свой электронный ящик, или просто желаете подстраховаться — чтобы не пропустить отправленные важные E-mail оповещения такими плагинами, как WooCommerce, задействуйте плагин WP Mail Logging.
После установки, плагин достаточно только активировать и он незамедлительно приступит к работе и встанет на стражу e-mail транспорта.
Какая информация регистрируется?
Все электронные письма, отправленные с вашего сайта WordPress теперь, после активации плагина, будут протоколироваться.
А вот информация, которая сохраняется:
Тема письма
Содержимое электронной почты (HTML или текст)
Вложения электронной почты
Заголовки электронной почты (кому, от кого, кому ответить, копия, скрытая копия)
Сообщение об ошибке (в случае, если при попытке отправить электронное письмо произошла ошибка)
IP-адрес исходного сервера (нужно включить в настройках)
Дата и время письма
Получатель (адрес электронной почты)
Сейчас мы оформим заказ в магазине WooCommerce и посмотрим что отловит наш плагин для сохранения
Теперь в разделе журнала плагина мы можем наблюдать фиксацию данного события. Оформление заказа вызвало три события отправления электронных писем:
Вот панель для действий над письмами. Мы можем заново вызвать отправку выборочного письма, удалить или же жмакнуть на «глазик» и посмотреть тело письма которое получаем мы, как администратор сайта и какое получает клиент. Иногда это очень полезно 🙂
Письмо менеджерам интернет-магазина:
А вот такое письмо получают клиенты интернет-магазина:
Помимо прямого назначения, плагин также очень удобно использовать непосредственно для настройки, вёрстке электронных писем, например, при разработке сайта на localhost.
Дополнительные настройки
В настройках плагина можно включить
Хост — Отображение IP-адреса хоста, на котором работает WordPress. Это полезно при запуске WP Mail Logging на нескольких серверах одновременно.
Отображение вложений (файлов) — Отображение вложений в таблице журнала.
Учтите, что этот плагин сохраняет только путь к файлу вложений, а не сам файл вложений. Если путь к файлу вложения не существует или файл был удален, он не будет отображаться в журналах.
А после включения хоста, в нижней части превью письма вы можете увидеть «айпишник» с которого было отправление:
При создании нового заказа (покупки) на сайте интернет-магазина под управлением WordPress+WooCommerce, должны приходить E-mail оповещения, как клиенту (тот кто заказал), так и администратору сайта.
Заказы, которые правильно переходят в обработку, тоже должны генерировать электронное письмо. Если этого не происходит и вы не получаете письма, то первым делом стоит проверить папку СПАМ вашей почты, вполне возможно эти письма там 🙂
Ещё наиболее частой причиной того, почему от WooCommerce не приходят должные оповещения при новом заказе от клиента может служить неправильная настройка E-mail оповещений.
Как указать E-mail адресатов на события о новых заказах?
Зайдите в панель управления сайтом WordPress и перейдите по следующему пути:
WooСommerce → Настройки → Email’ы
Здесь мы увидим таблицу событий при которых отправляются письма-уведомления от Woo.
Большинство из этих уведомлений предназначено для клиента, а для нас есть три важных события:
Новый заказ
Отменённый заказ
Неудавшийся заказ
Email-уведомления отправленные из WooCommerce перечислены ниже. Кликните по Email’у, чтобы настроить его.
Обращу ваше внимание на то, что можно указывать несколько получателей. Для этого достаточно просто перечислить адреса электронных почт через запятую, как в примере ниже:
Иногда может встречаться ещё одна проблема, которая заключается в адресе почты отправителя.
Woocommerce → Настройки → Email’ы , далее следует «прокрутить» вниз страницы и проверить какой адрес почты указан в качестве Отправителя. Он должен совпадать с доменом Вашего сайта 🙂
Чтобы не пропускать письма и фиксировать их внутри сайта рекомендуется воспользоваться этим решением.
Чтобы в ячейке для SKU, в панели администрирования WordPress, отображать все артикулы вариаций у вариативных товаров достаточно добавить данный сниппет:
Задача: для удобства сотрудников сделать копирование артикула по клику.
Реализовывать мы будем это на стороне клиента (браузера) при помощи JavaScript используя нужные нам методы при работе с DOM.
Давайте рассуждать. У нас есть артикул, значение которого выводится в строчном элементе <span>, благодаря атрибуту class мы можем «зацепиться за него» — это, условно говоря, его имя.
Так как нам нужно только его значение, отметим для себя элемент span с классом «sku»
Нам нужно его выдернуть из DOM (Объектная Модель Документа) и в этом нам поможет метод querySelector()
Согласитесь, что нашего элемента может на странице и не существовать, поэтому нужно проверить его существование. Если совпадений не будет найдено, то наш метод вернёт значение null.
Итак, событие клика мы отслеживаем и теперь настало время вызвать в момент клика нашу функцию, которая и будет осуществлять копирование содержимого.
Функцию назовём copyWooSKU()
Что должно находиться в функции? Очевидно, что нам нужно получить (зачитать) значение артикула, а затем его каким то чудесным образом скопировать в буфер обмена пользователя. Реализовывать мы это будем через современный API Async Clipboard (на замену синхронного метода document.execCommand())
Clipboard API предоставляет возможность реагировать на команды буфера обмена (вырезать, копировать и вставить), а также выполнять асинхронные чтение/запись в системный буфер обмена.
Обращу внимание, что стрелочные функции не имеют собственного контекста this. То есть в стрелочных функциях
e.currentTarget != this
Комментарий к коду:
async перед функцией, потому что в теле функции есть await и вернётся промис
try / catch для обработки исключения
e.target.innerText — это извлечение значения свойства (текста в нашем случае) элемента по которому кликаем
Как и многие новые API, API буфера обмена поддерживается только для страниц, обслуживаемых по протоколу HTTPS. Чтобы предотвратить злоупотребления, доступ к буферу обмена разрешен только тогда, когда страница является активной вкладкой. Страницы на активных вкладках могут записывать в буфер обмена без запроса разрешения, но чтение из буфера обмена всегда требует разрешения.
Учтите, что метод writeText() ожидает безопасного контекста HTTPS и если ваше соединение осуществляется по схеме протокола HTTP то может вылететь как раз таки ошибочка 🙂
Очевидно, что в момент клика непонятно, произошло копирование или нет. Если улучшать наш код для пользователя, то по доброму необходимо сделать уведомление, чтобы клиенту было понятно, что копирование осуществилось.
Давайте рассуждать. Нам нужно методами JavaScript создать элемент в котором будет содержаться текст нашего уведомления. После вызова функции необходимо отобразить это уведомление и спустя пару секунд скрыть. Весь наш код теперь выглядит следующим образом:
Метод preventDefault () — добавил на всякий случай для отмены обработки клика (до нашего обработчика)
document.createElement() — метод для создания элемента
style.color — присваиваем CSS-свойство для изменения цвета шрифта
Свойство .innerText — позволяет задавать текст нашему созданному элементу
Метод .appendChild() добавляет узел в конец списка дочерних элементов указанного родительского узла. Будьте внимательны! Селектор родительского элемента у вас может отличаться.
Функция .setTimeout() — для задержки выполнения
Метод .removeChild() удаляет дочерний элемент из DOM.
parentElement это родительский элемент текущего узла.
Возможно некоторые свойства, такие как : target, innerText станут понятнее, если мы на них взглянем. Для этого в этом отрезке кода, где мы отслеживаем действие по клику, можно вывести в консоль это событие клика мышкой:
Задача: Когда цена товара не указана или её значение равно 0 (нулю), то в этом случае выводить слово «БЕСПЛАТНО».
Было/Стало
Начнём наше решение мы как всегда с исследования. Проинспектируем наш элемент в котором выводится значение цены
Далее, поиском по файлам по директории плагина WooCommerce нам необходимо отыскать «темплэйт» который отвечает за вывод цены. Я его нашёл — price.php
Нас интересует метод (функция) get_price_html(), и следующим шагом мы отыщем её также по директории плагина. Вот так она выглядит:
Нас интересуют два её хука. Это хук-фильтр ‘woocommerce_empty_price_html’ и хук-фильтр ‘woocommerce_get_price_html’. Сама функция возвращает тип данных — строка, это важно отметить.
Как мы видим, первый фильтр нам поможет изменить возвращаемое значение в том случае если цена у товара не указана и оформить нашу функцию можно следующим образом:
Если обратить внимание на исходный код метода get_price_html() класса WC_Product, то можно заметить, что строгая проверка там уже стоит на пустую строку. Поэтому в фильтр мы передаём один аргумент, я его назвал $string и присвоил ему новое значение и тут же вернул (это важно! При использовании хуков-фильтров всегда возвращать, то что передали). Цифры после анонимной функции говоря об очерёдности выполнения (так как на этот фильтр может ещё кто-то, например, разработчики стороннего плагина, прикрепить свои функции) и вторая цифра — это число аргументов для передачи. В следующем примере их будет уже два 🙂
Теперь в случае, если цена не указана, будет выводиться слово — Бесплатно
Теперь рассмотрим второй хук, который поможет нам решить задачу во втором случае — когда цена указана значением равным нулю.
Если взглянуть исходный код метода, то можно обнаружить вот такую запись возврата функцией (методом) данных
Итоговый код будет выглядеть вот так. Сейчас я поясню. С первым аргументом $price думаю всё понятно — это возвращаемая строка цены, а вот второй $this — это объект товара — экземпляр класса которому принадлежит метод, соответственно мне нужно указать его в виде $product — объект товара, который доступен в глобальной зоне видимости (global $product). Немного может показаться это сложным для понимания, но со временем и практикой ясность придёт.
Вобщем, передав вторым аргументом $product, наш фильтр будет обладать данными из этого объекта, а соответственно нам будет доступен метод получения цены. Если взглянуть на исходный код метода, то можно встретить в нём ещё один нужный нам метод получения цены $this->get_price()
Вот итоговый код. Единственное, я понизил строгость проверки 0 == $product->get_price(), так как возвращается строка, а мы сравниваем с типом число и это уже не будет удовлетворять условию и указал последней цифрой после функции передаваемое число аргументов — 2. Так как второй аргумент (объект $product) нам нужен для проверки значения цены равное нулю.
Теперь, если значение цены указано, как ноль, то получим вывод слова «бесплатно»:
Учтите, это справедливо и для случая если в качестве акционной цены проставлен «ноль»
Мы так же получим вывод слова «бесплатно».
Обратите внимание, что я возвращаю наше слово в тегах для строчного элемента <span> А это значит, что указав тегу атрибут класса, мы можем менять через CSS стиль отображения данного слова.
Начинающие пользователи могут быть озадачены добавлением ссылок в меню на созданные ими категории товаров в магазине под управлением WooCommerce и это неспроста. Да, есть некоторые особенности и сейчас мы с вами их рассмотрим.
Первые сложности могут появиться, если вы используете классическую тему оформления сайта. Наверняка, вы можете и не знать какой шаблон темы у вас используется, поэтому рассмотрим оба варианта.
Классический шаблон сайта
Находясь на сайте с правами администратора, вы должны видеть в разделе с названием сайта в выпадающем меню ссылку Меню
А если вы находитесь непосредственно в панели управления, то этот раздел должен находиться во Внешний вид
Если вы не видите этого раздела, то вероятнее всего у вас установлена «блочная тема» оформления дизайна сайта и вам следует перейти к этому разделу.
Далее, на этой странице настроек меню вы можете увидеть текущие меню сайта или подобную пустую область для меню, которая говорит о том, что на вашем сайте отсутствует меню и его необходимо создать
В этом случае:
дайте название вашему меню
Отметьте область отображения на сайте (в разных темах эти области разные)
Создайте меню
Наполните его ссылками из раздела Элементов меню
И первая неприятность нас подстерегает вот в чём. По умолчанию добавления ссылок категорий товаров скрыты и вы их можете не увидеть в блоке элементов меню.
Нам необходимо их включить. Для этого откроем раздел в верхней правой части экрана Настройки экрана и отметим чекбокс Категории товаров, тем самым включив его в раздел элементов меню
Теперь категории товаров будут доступны нам в разделе конструктора элементов меню
Теперь отмечаем нужные категории и добавляем в наше меню. Сделаю примечание, что если вам нужно сделать вложенность, то необходимо перетянуть элементы вправо. Примерно должно получиться следующее:
Не забудьте сохранить изменения 🙂
Теперь на лицевой (публичной) части сайта вы увидите созданное меню и добавленные в него ссылки:
Блочная тема оформления
Если вы используете блочную тему оформления, то в верхней части сайта вы должны видеть ссылку Редактировать сайт
Откроется режим редактирования сайта. В который можно было попасть из Панели управления, но это мы рассмотрим чуть ниже.
После открытия режима редактирования нужно нажать на какую-нибудь область содержимого сайта.
После этого загрузится блочный редактор и возможно его загрузка будет сопровождаться вот таким уведомлением:
После загрузки редактора я рекомендую открыть (распахнуть) все элементы страницы в виде иерархического списка, как на примере ниже. Нажмите на специальную иконку и распахните элементы:
Нас интересует Навигация и её список страниц. Выделите Список страниц. Он должен подсвечиваться примерно так. Это говорит что вы выделили Списки страниц (элементов) нужного меню
Далее нажимаем Изменить. Есть вероятность получить подобное уведомление:
Этот список страниц синхронизируется с опубликованными страницами на вашем сайте. Отсоедините список страниц, чтобы самостоятельно добавлять, удалять или изменять порядок страниц.
Это обычно случается в том случае, если вы меняете меню впервые. По умолчанию оно создается автоматически из новых страниц вашего сайта. Нам этот вариант не подходит. Поэтому нажимаем Отсоединить и тем самым берём полную ответственность за построение меню на себя.
Убедитесь, что в режиме редактирования Навигации у вас включена справа область нужного Блока, как в примере ниже:
Теперь мы можем создавать новые ссылки для нашего меню. Нажмите на «плюсик» и при помощи поиска отыщите Категории.
Начните писать название… Вы увидите Блок для построения ссылок из категорий ваших товаров
Добавляем и выбираем нужную категорию
Добавляем нужные ссылки:
А также мы можем управлять их вложенностью:
А на публичной части сайта мы получим следующий результат:
Из Панели управления
А из панели управления в разделе Внешний вид будет аналогичная ссылка, правда с другим названием — Редактор:
После вызова редактора вы можете увидеть подобный раздел. Нас интересует Навигация
![добавим шорткод [featured_products]](https://i0.wp.com/codeispoetry.ru/wp-content/uploads/codeispoetry-076.jpg?resize=660%2C423&ssl=1)
