CodeCanyon WooCommerce Sale Products Layout - Плагин WordPress
CodeCanyon WooCommerce Sale Products Layout - это плагин, разработанный для улучшения макетов продуктов в Elementor для веб-сайтов на WordPress. Сосредоточенный на виджетах, демонстрирующих распродажу товаров, он предлагает удобное решение для улучшения представления с обозначением скидок на электронных коммерческих платформах. Эти виджеты предлагают гибкость и настройку, позволяя пользователям настраивать отображение распродажи в соответствии с их дизайнерскими предпочтениями и требованиями. Плагин интегрируется плавно с Elementor, упрощая процесс создания привлекательных и динамичных макетов продуктов без необходимости в глубоких знаниях кодирования.

Особенности плагина
CodeCanyon WooCommerce Sale Products Layout эффективно управляет распродажей на веб-сайтах WordPress, предлагая простой интерфейс и интуитивные инструменты для настройки демонстрации продуктов. Его функциональные возможности позволяют владельцам веб-сайтов эффективно выделять скидочные товары, улучшая видимость и увеличивая продажи. Совместимость с Elementor обеспечивает беспрепятственный пользовательский опыт, позволяя легко интегрировать с популярным конструктором страниц. Используя эти возможности, бизнесы могут создавать визуально привлекательные образцы продуктов, которые завораживают аудиторию и стимулируют конверсии.
Оптимизация представления распродажи товаров улучшает общее впечатление от шоппинга для посетителей веб-сайта, облегчая им поиск и изучение скидочных товаров. Это способствует более интересному онлайн-магазину, внося позитивный вклад в пользовательский опыт и благоприятно влияя на конверсию. Гибкость и адаптивность плагина соответствуют различным дизайнерским предпочтениям и брендинговым стандартам, позволяя владельцам сайтов поддерживать единообразие в представлении продуктов, эффективно продвигая продажи и специальные предложения.
Использование адаптивных элементов дизайна обеспечивает привлекательное отображение макетов продуктов на различных устройствах и размерах экранов, оптимизируя опыт шоппинга для пользователей как на рабочих столах, так и на мобильных платформах. Такой отзывчивый подход улучшает доступность продуктов распродажи, облегчая покупателям просмотр и приобретение товаров. Способность плагина адаптироваться к различным средам просмотра отражает его стремление к предоставлению ориентированного на пользователя и визуально цельного опыта, важного для увеличения конверсий и укрепления лояльности клиентов.
Спецификации:
| Дата выхода: | 28-12-2019 | |
| Дата обновления: | 20-12-2019 | |
| Тип расширения: | Платный | |
| Лицензия: | GPL | |
| Тематика: | Специфические для Elementor | |
| Совместимость: | W5.x | |
| Включает в себя: | Плагин | |
| Языковые пакеты: |
|
|
| Разработчик: | CodeCanyon | |
| Рейтинг: | ||
Скачивание по подписке!
Вам необходимо авторизоваться на сайте и приобрести клубную подписку!
Поделись с друзьями!
Руководство по CodeCanyon WooCommerce Sale Products Layout для витрины акционных товаров в Elementor
CodeCanyon WooCommerce Sale Products Layout нужен не для замены всего каталога WooCommerce, а для более узкой задачи - показать товары со скидкой в управляемом блоке Elementor. В этом руководстве разберём, где такой блок действительно полезен, что проверить до установки, как выбрать между классической сеткой и showcase-выводом, как настроить карточки, колонки, пагинацию и проверку результата.
В публичных источниках по этому продукту есть важное ограничение: у плагина видны официальная карточка, страница Envato Elements и live preview автора, но отдельная открытая документация с каждым полем виджета не найдена. Поэтому точные факты ниже опираются на подтверждённые элементы - два виджета, шесть стилей, режимы пагинации, 1-3 колонки, адаптивность, переводы и демо. Всё, что касается диагностики Elementor и WooCommerce, сформулировано как безопасная практика для этого класса плагинов, а не как скрытая функция продукта.
Главная идея простая: сначала убедиться, что WooCommerce сам корректно понимает, какие товары находятся на распродаже, затем вставить sale-блок в Elementor, подобрать логику вывода и проверить страницу как покупатель. Если пропустить этот порядок, можно долго настраивать цвета и анимации, хотя проблема будет в том, что у товаров нет настоящей цены распродажи или они скрыты из каталога.
Где аддон уместен, а где лучше не добавлять лишний слой
Плагин ориентирован на магазины, где товары со скидкой нужно показать не как обычную архивную страницу, а как отдельную промо-секцию. Это может быть главная страница, лендинг сезонной акции, блок после баннера, страница с подборкой или небольшой раздел внизу статьи. В таких местах стандартный каталог часто выглядит слишком тяжёлым: фильтры, сортировка и полный архив отвлекают, а владельцу магазина нужен компактный блок с акцентом на скидку.
Официальное описание и live preview показывают две семьи вывода: Sale Products Layout и Sale Products Showcase. В практическом смысле это две разные роли. Первая ближе к сетке карточек, вторая - к витрине или карусельному промо-блоку. Плагин также заявляет шесть стилей для каждого направления, пагинацию Numeric, Classic и Load More, более двухсот эффектов анимации, настройку цветов, адаптивность, готовность к переводу и колонки от одной до трёх.
Лучший сценарий для такого аддона - отдельная витрина скидок, а не попытка заменить всю архитектуру магазина. Если нужно полностью перестроить страницу магазина, фильтры, карточки архива, шаблон товара, корзину и оформление заказа, одного узкого sale-layout плагина будет мало. Если же задача - красиво вывести уже подготовленные акционные товары в Elementor, продукт попадает в свою нишу.
| Сценарий | Почему подходит | Что проверить заранее |
|---|---|---|
| Главная страница магазина | Нужно быстро показать несколько товаров со скидкой рядом с баннером или подборкой. | Достаточно ли товаров со скидкой для выбранного числа колонок. |
| Отдельная промо-страница | Можно собрать страницу акции из заголовка, условий и сетки распродажи. | Не конфликтует ли блок с кешем, темой и другими Elementor-аддонами. |
| Небольшой блок в статье или подборке | Showcase-режим помогает показать акционные товары без длинного каталога. | Не слишком ли много анимаций для страницы с текстовым контентом. |
| Полная замена магазина | Не лучший выбор, потому что продукт не заявлен как комплексный WooCommerce builder. | Лучше смотреть на более широкие решения или штатные инструменты Elementor/WooCommerce. |
Что проверить до установки, чтобы блок не оказался пустым
Большая часть проблем с блоками акционных товаров начинается не в Elementor. Виджет может быть подключён правильно, стили могут загружаться, но на странице всё равно будет пусто. Причина часто лежит в данных WooCommerce: товар не опубликован, скрыт из каталога, не имеет стандартной цены распродажи, относится к вариативному товару с неочевидной скидкой или попал под кэшированный запрос.
Перед установкой стоит пройти короткую подготовку. Она экономит время, потому что отделяет проблему данных магазина от проблемы самого аддона.
Проверьте реальные цены распродажи
WooCommerce считает товар акционным не потому, что на странице нарисован бейдж, а потому что у товара есть обычная цена и цена распродажи, заданная через стандартные поля товара. Для простого товара это проверяется в карточке товара. Для вариативного товара нужно убедиться, что скидка задана на нужных вариациях, а не только визуально описана в тексте.
Если магазин использует отдельный плагин динамических скидок, купонов или правил ценообразования, проверьте, считает ли он товары настоящими on_sale для WooCommerce-запросов. Некоторые правила меняют цену во время расчёта корзины или отображения, но не записывают стандартное поле sale price. В таком случае sale-блок может не увидеть эти товары.
Проверьте видимость товара в каталоге
Акционный товар может быть опубликован, но скрыт из каталога и поиска. Для обычной страницы товара это не всегда заметно, а для блока с выборкой товаров - критично. Если товар должен участвовать в витрине, проверьте его статус публикации, наличие изображения, категорию, остаток и видимость в каталоге.
Практическая проверка: создайте временную страницу и выведите стандартный WooCommerce shortcode для товаров со скидкой. Если стандартный вывод тоже пустой, сначала исправляйте данные WooCommerce, а не настройки Elementor-виджета.
[products limit="4" columns="4" on_sale="true"]
Сравните версии и окружение
В открытых источниках не найден отдельный публичный changelog продукта, а доступные сведения о совместимости выглядят ограниченными. Поэтому для рабочего магазина особенно важно тестировать плагин на копии сайта или staging-среде. Проверьте WordPress, WooCommerce, Elementor, тему, PHP, кеширующие плагины и другие Elementor-аддоны. Если сайт уже построен на большом наборе WooCommerce-расширений, новый визуальный аддон лучше подключать не сразу на боевой странице.
Не начинайте настройку с анимаций и цветов. Сначала подтвердите, что sale-товары находятся и выводятся в базовом виде. Внешний вид имеет смысл настраивать только после этого.
Установка и первое включение в Elementor без лишних действий
Установка коммерческого WordPress-плагина обычно выполняется через ZIP-архив в админ-панели. Стандартный путь: Plugins, затем Add New, затем Upload Plugin, выбор ZIP-файла, Install Now и Activate Plugin. Ручная загрузка по FTP нужна редко и больше подходит опытным администраторам, когда админ-панель не позволяет загрузить архив.
После активации не переходите сразу к главной странице магазина. Создайте тестовую страницу или черновик, откройте её в Elementor и найдите новые виджеты по словам Sale, WooCommerce или названию аддона. Официальное описание говорит о двух Elementor-виджетах, поэтому логично ожидать отдельные варианты для классического вывода и showcase-режима.
Первичная проверка после активации
- Откройте админ-панель WordPress и убедитесь, что активны WooCommerce и Elementor.
- Проверьте, что на сайте есть хотя бы несколько опубликованных товаров со стандартной ценой распродажи.
- Создайте тестовую страницу, чтобы не ломать текущую главную или промо-страницу.
- Откройте страницу в Elementor и найдите виджет плагина в панели элементов.
- Перетащите виджет на страницу, сохраните черновик и откройте предварительный просмотр.
- Проверьте, появились ли карточки товаров, бейдж скидки, цена, название и кнопка
Add To Cart.
Если виджет не появился
Сначала проверьте простое: активирован ли Elementor, нет ли ошибок установки, не установлен ли архив вложенным уровнем, когда внутри ZIP лежит ещё один ZIP. Затем очистите кеш Elementor, если он есть в вашем стеке, и обновите страницу редактора. Если редактор зависает или не открывается, Safe Mode Elementor может помочь понять, мешает ли загрузке тема или другой плагин. Но важно помнить: безопасный режим помогает диагностировать редактор, а не исправляет проблемы публичной части сайта.
Подробная настройка после установки: от данных WooCommerce к готовой карточке
После первого включения важно не пытаться настроить всё за один проход. Sale-блок зависит сразу от трёх слоёв: данные товаров в WooCommerce, параметры виджета в Elementor и стили темы. Если менять эти слои одновременно, трудно понять, что именно дало результат или вызвало ошибку. Гораздо надёжнее идти по цепочке: сначала выборка товаров, затем структура карточки, затем внешний вид, затем поведение на разных экранах.
Такой порядок особенно полезен для CodeCanyon WooCommerce Sale Products Layout, потому что продукт заявлен как визуальный аддон с несколькими стилями, пагинацией, колонками и анимациями, но открытая документация по каждому полю виджета не найдена. Значит, настройку нужно вести через проверяемые действия, а не через догадки о скрытых возможностях.
Первый проход: добейтесь правильной выборки
Начните с минимального состояния виджета. Выберите базовый стиль, поставьте небольшое количество товаров и временно отключите сложные эффекты, если в вашей версии есть такой переключатель. Цель первого прохода - увидеть, что в блок попадают именно товары со скидкой, а не любые товары магазина. Если в виджете есть поля фильтрации по категории, тегу или количеству записей, меняйте по одному параметру и каждый раз обновляйте предпросмотр.
Что считать нормой
Нормальный первый результат - простая витрина, где карточки появляются без ошибок, каждая карточка ведёт на правильный товар, цена распродажи отличается от обычной, а кнопка действия не пропадает. На этом этапе не страшно, если цвета ещё не совпадают с дизайном сайта. Сейчас проверяется не красота, а логика вывода.
Когда остановиться и вернуться к товарам
Если блок показывает пустоту, перемешивает обычные товары с акционными или выводит не тот набор, не продолжайте стилизовать. Вернитесь в WooCommerce и проверьте конкретные товары: статус публикации, цену, скидку, наличие изображения, остаток, видимость и принадлежность к нужной категории. Чем раньше вы отделите проблему данных от проблемы виджета, тем меньше времени уйдёт на настройку.
Второй проход: настройте структуру карточки
Когда товары выводятся правильно, можно решать, какие элементы карточки оставить. Для блока распродажи обычно важны изображение, название, цена, признак скидки и кнопка. Категория полезна, если в акции участвуют разные типы товаров. Короткое описание уместно только тогда, когда оно действительно помогает выбрать товар; в маленькой карточке длинный текст часто создаёт визуальный шум.
Старайтесь не перегружать карточку второстепенными деталями. В live preview автора видны элементы карточки, похожие на категорию, заголовок, цену, короткий фрагмент текста и кнопку. Это хороший ориентир, но не обязательство копировать демо один в один. В реальном магазине важнее не количество элементов, а ясность: покупатель должен увидеть скидку, понять товар и перейти дальше.
Цена и бейдж скидки
Цена распродажи должна быть самым считываемым элементом после изображения и названия. Если старая цена перечёркнута, новая цена должна иметь достаточный контраст. Бейдж Sale не должен выглядеть как основная кнопка, иначе пользователь может принять его за действие. Если вы переводите интерфейс магазина на русский, проверьте, можно ли заменить текст бейджа штатными средствами темы, перевода или самого плагина. Не правьте файлы плагина ради одной надписи.
Кнопка действия
Для простых товаров кнопка Add To Cart может быть удобной, но для вариативных товаров безопаснее вести пользователя на карточку товара, где он выберет размер, цвет или другую вариацию. Если тема или WooCommerce показывают разные тексты кнопок для простых и вариативных товаров, это не обязательно ошибка. Важно, чтобы действие было честным: если товар требует выбора параметров, пользователь должен попасть туда, где этот выбор возможен.
Третий проход: подгоните внешний вид под тему
Только после проверки выборки и структуры карточки переходите к цветам, отступам, анимациям и колонкам. У продукта заявлены custom color и animation effects, но это не значит, что стоит включать максимальное количество визуальных эффектов. Для коммерческого блока лучше спокойная и стабильная подача, чем эффект, который мешает нажать кнопку или замедляет первый экран.
Сравните блок с соседними элементами сайта: высота заголовков, цвет кнопок, скругление карточек, расстояние между товарами, фон секции. Если sale-блок выглядит чужим, проверьте сначала настройки виджета и темы. CSS добавляйте только точечно и только в том месте, которое легко отключить.
Типовой набор значений для старта
- На главной странице используйте 4-6 товаров и две или три колонки на широком экране.
- На промо-странице можно показать больше товаров, но включить простую пагинацию вместо бесконечной ленты.
- Для мобильной версии оставьте одну колонку и проверьте высоту карточек.
- Для первого запуска выберите спокойную анимацию или отключите её, пока не проверите скорость страницы.
- Для бейджа скидки используйте контрастный, но не кричащий цвет, который не спорит с основной кнопкой.
Четвёртый проход: зафиксируйте контрольную страницу
Когда настройка выглядит рабочей, сохраните ссылку на тестовую страницу и запишите, какие параметры выбраны: режим Classic или Showcase, число колонок, вид пагинации, стиль карточки и важные настройки темы. Это особенно полезно, если магазин ведёт не один человек. Через несколько недель будет легче понять, что изменилось после обновления темы, WooCommerce, Elementor или самого контента товаров.
Рабочий подход: настройка sale-блока считается завершённой не после красивого предпросмотра, а после проверки данных, кликов, мобильной версии, кеша и понятного способа отката.
Classic или Showcase: как выбрать рабочую логику витрины
У продукта есть два ключевых направления вывода, и от выбора зависит не только внешний вид, но и поведение посетителя. Классическая сетка хороша там, где пользователь должен быстро сравнить несколько товаров: увидеть цену, название, категорию и перейти к покупке. Showcase-режим больше похож на промо-витрину: он подходит для главной страницы, блока после баннера или ограниченного набора товаров, где важнее акцент, чем полный обзор.
Не стоит выбирать showcase только потому, что он выглядит эффектнее. Карусели и анимации требуют аккуратности: часть пользователей не ждёт автоматического движения, часть пролистывает страницу быстро, а на мобильных устройствах лишняя динамика может мешать. Сетка проще, стабильнее и лучше подходит для раздела, где покупатель должен сравнивать товары глазами.
Когда лучше Classic
Выбирайте классическую сетку, если у акции есть несколько товаров и пользователю важно увидеть их одновременно. Это хороший вариант для страницы распродажи, блока "Товары недели", подборки в категории или секции под текстовым описанием акции. Колонки от одной до трёх позволяют не превращать блок в слишком плотную сетку: одна колонка подойдёт для узкого контента, две - для спокойной витрины, три - для страницы с большим экраном и равномерными изображениями.
Когда лучше Showcase
Showcase уместен, если блок должен работать как визуальный акцент. Например, на главной странице можно показать несколько наиболее заметных скидок, а не всю подборку. Этот режим лучше сочетать с коротким заголовком и понятным призывом: пользователь должен сразу понять, что перед ним ограниченная витрина, а не основной каталог.
Что не стоит прятать в карусель
Не прячьте в showcase товары, которые пользователь обязан сравнить по характеристикам. Если скидки похожи, а различия в моделях критичны, статичная сетка обычно удобнее. Также не стоит делать carousel единственным способом увидеть все товары акции, если блок стоит на странице с высокой коммерческой важностью.
| Задача | Лучший режим | Почему |
|---|---|---|
| Показать 6-9 товаров акции | Classic |
Покупатель видит больше товаров сразу и сравнивает цены без пролистывания. |
| Сделать акцентный блок на главной | Showcase |
Витринная подача лучше работает как промо-элемент рядом с баннером. |
| Разместить блок внутри статьи | Classic в 1-2 колонки |
Сетка меньше отвлекает и лучше вписывается в текстовый контент. |
| Показать только лучшие предложения | Showcase |
Небольшой набор товаров можно подать как подборку, а не как каталог. |
Как не смешать акционные товары с обычным каталогом
Самая важная техническая мысль для такого плагина: витрина скидок должна опираться на данные WooCommerce, а не на визуальное ощущение. Если на карточке товара вручную написано "скидка", но стандартное поле sale price не заполнено, автоматический блок может не считать этот товар акционным. Если товар скрыт из каталога, его тоже не стоит ожидать в нормальной витрине.
Цена распродажи и расписание скидки
Для простого товара проверьте обычную цену, цену распродажи и, если используется расписание, его период. В тексте руководства не нужно фиксировать конкретные даты акции, но в админке расписание важно: товар может быть подготовлен заранее, а блок останется пустым до начала скидки. После окончания скидки товар может исчезнуть из sale-выборки, и это будет нормальное поведение.
Категории, теги и ручные подборки
Открытая карточка продукта подтверждает именно sale-ориентированный вывод, но не даёт полного публичного списка query-настроек виджета. Поэтому в рабочем сценарии лучше готовить данные так, чтобы они были понятны любому WooCommerce-инструменту: используйте категории для тематических акций, теги для внутренних подборок и стандартные цены распродажи для самого факта скидки. Если в вашей версии виджета есть дополнительные фильтры, сначала проверьте их на тестовой странице с небольшим набором товаров.
Вариативные товары
С вариативными товарами будьте осторожнее. Если скидка есть только у одной вариации, а родительский товар отображается в сетке, тема и виджет могут показывать цену не так очевидно, как в карточке простого товара. Перед публикацией проверьте, ведёт ли кнопка на страницу товара, правильно ли показан диапазон цены и не вводит ли бейдж скидки в заблуждение.
Надёжная проверка: откройте акционный товар как обычный покупатель, убедитесь, что цена распродажи видна на странице товара, затем вернитесь к Elementor-блоку и проверьте, попал ли этот товар в витрину.
Колонки, пагинация и Load More без поломки пользовательского пути
Плагин заявляет колонки от одной до трёх и три режима пагинации: Numeric, Classic и Load More. Это не просто декоративные варианты. Они меняют то, как пользователь воспринимает акцию и как долго остаётся в блоке.
Колонки от одной до трёх
Одна колонка подходит для узких секций, боковых промо-блоков и страниц, где каждая карточка должна быть крупной. Две колонки - сбалансированный вариант для большинства посадочных страниц: товары не слишком мелкие, изображения читаются, кнопка заметна. Три колонки уместны для полноценной страницы распродажи или широкого блока на главной, но требуют аккуратных изображений и похожей длины названий.
На мобильных устройствах фактическое число колонок может зависеть от адаптивных настроек Elementor, темы и CSS плагина. Поэтому не оценивайте блок только в редакторе на широком экране. Обязательно переключитесь на планшет и телефон, а затем откройте опубликованную страницу в отдельном окне.
Numeric и Classic
Numeric удобен, когда товаров много и пользователю важно понимать размер подборки. Classic проще, потому что обычно показывает переходы вперёд и назад без списка страниц. Для небольшой акции numeric-пагинация может быть избыточной: она визуально намекает на большой каталог, хотя у вас может быть всего несколько товаров.
Когда выбирать Load More
Load More хорошо работает на промо-страницах, где пользователь остаётся в одном контексте и постепенно раскрывает ещё товары. Но этот режим сильнее зависит от скриптов, кеша и корректной подгрузки. Если на сайте уже есть оптимизаторы JavaScript, отложенная загрузка, сложный кеш или несколько WooCommerce-фильтров, проверьте этот режим особенно внимательно.
| Режим | Когда использовать | Что проверить |
|---|---|---|
Numeric |
Большая подборка, где важен переход по страницам. | Не сбрасывается ли страница при обновлении и не конфликтуют ли ссылки с кешем. |
Classic |
Небольшой каталог акции с простым переходом вперёд и назад. | Сохраняется ли порядок товаров при переходе. |
Load More |
Лендинг акции, где удобнее догружать товары без ухода на другую страницу. | Нет ли ошибок JavaScript и правильно ли работает кнопка после кеширования. |
Оформление карточки: цена, бейдж, кнопка и цвета без конфликта с темой
У продукта заявлена настройка цветов для каждого аддона, а live preview показывает карточки с бейджем Sale, ценой, категорией, названием, коротким описанием и кнопкой Add To Cart. Это хороший набор для промо-блока, но в WooCommerce внешний вид карточки редко живёт изолированно. На него могут влиять тема, глобальная типографика Elementor, стили WooCommerce, кэшированные CSS-файлы и другие аддоны.
Что стилизовать первым
Начинайте не с эффектов. Сначала настройте и проверьте базовую читаемость: изображение, название товара, старую и новую цену, бейдж скидки и кнопку. Покупатель должен мгновенно понять, что товар продаётся дешевле обычного, куда нажать и чем один товар отличается от другого. Если сначала включить сложные анимации, можно спрятать проблемы с высотой карточек, переносами названий или контрастом цены.
Анимации и производительность
Более двухсот эффектов звучат заманчиво, но для магазина это не повод включать движение везде. Анимация должна помогать заметить блок, а не отвлекать от товара. На странице с несколькими тяжёлыми секциями, слайдерами и рекламными блоками дополнительная анимация может ухудшить ощущение скорости. Для первой версии лучше выбрать спокойный эффект или отключить его, затем проверить страницу на мобильном устройстве.
Единая высота карточек
Витрина выглядит аккуратно, когда изображения похожи по пропорциям, названия не выбиваются на пять строк, а кнопки выровнены. Если в вашем ассортименте есть товары с очень разными фото, подготовьте изображения заранее или выберите стиль, где карточка выдерживает разный контент. Сломанная сетка почти всегда выглядит как техническая ошибка, даже если покупатель не понимает причину.
Практический сценарий: секция товаров недели на главной странице
Разберём рабочую задачу: на главной странице магазина нужно показать блок "Товары недели" с несколькими товарами со скидкой. Цель - не построить весь каталог, а дать посетителю быстрый вход в акцию: увидеть скидку, открыть товар, добавить простую позицию в корзину или перейти к подробной карточке.
Цель
Получить компактную секцию Elementor с товарами, у которых в WooCommerce действительно задана цена распродажи. Для desktop-версии используем две или три колонки, для мобильной проверяем один столбец. Если товаров мало, выбираем сетку. Если нужно сделать более промо-вид, можно протестировать showcase, но только после проверки базовой сетки.
Подготовка
- Выберите 6-8 товаров, которые реально участвуют в акции.
- Проверьте у них обычную цену и цену распродажи в WooCommerce.
- Убедитесь, что товары опубликованы, имеют изображения и не скрыты из каталога.
- Подготовьте короткий заголовок секции и пояснение, если акция требует контекста.
- Создайте черновик главной страницы или дубликат секции, чтобы не править живой блок без проверки.
Шаги в Elementor
- Откройте страницу в Elementor и добавьте отдельную секцию под блок распродажи.
- Вставьте виджет sale layout или showcase из набора плагина.
- Выберите стиль, который не спорит с темой магазина и не перегружает карточку.
- Выставьте количество колонок: две для спокойной витрины или три для широкой промо-секции.
- Если товаров больше первого экрана, выберите пагинацию. Для лендинга попробуйте
Load More, для каталожной страницы -NumericилиClassic. - Настройте цвета бейджа, цены и кнопки так, чтобы скидка была видна, но не ломала общий стиль сайта.
- Сохраните страницу, откройте предпросмотр и проверьте клики по карточке и кнопке.
Ожидаемый результат
Покупатель видит отдельную секцию с акционными товарами, в карточках присутствуют изображения, названия, цена со скидкой, бейдж и кнопка действия. Карточки не выглядят чужеродно, не вываливаются по высоте и не показывают товары без скидки. Если используется Load More, кнопка догружает товары без визуального сбоя и без повторов.
Нюанс, который часто пропускают
Если после публикации один товар исчезает из блока, не спешите менять стиль. Сначала проверьте, не закончилась ли его скидка, не пропал ли остаток, не изменили ли видимость каталога и не очищался ли кеш после изменения цены. Для sale-блоков данные важнее оформления.
Проверка результата перед публикацией
Проверка нужна отдельно от настройки, потому что редактор Elementor и реальная публичная страница могут вести себя по-разному. В редакторе вы видите рабочее состояние для администратора, а покупатель получает страницу с кешем, оптимизированными скриптами, стилями темы и иногда другим поведением кнопок.
Проверка в редакторе
- Виджет загружается без бесконечного спиннера и ошибок редактора.
- Карточки появляются сразу после выбора стиля и количества колонок.
- В редакторе видны товары, у которых есть настоящая цена распродажи.
- Переключение между desktop, tablet и mobile не ломает сетку.
- Анимация не перекрывает кнопки и не делает карточку недоступной.
Проверка на живой странице
- Откройте страницу в режиме инкогнито или в другом браузере.
- Проверьте, совпадает ли набор товаров с ожидаемой акцией.
- Откройте 2-3 карточки товара и убедитесь, что ссылки ведут на правильные страницы.
- Нажмите
Add To Cartдля простого товара и проверьте корзину. - Если есть вариативный товар, убедитесь, что покупатель попадает туда, где может выбрать вариацию.
- Очистите кеш сайта и повторите проверку после изменения цены у одного тестового товара.
Что смотреть на мобильном
На телефоне блок распродажи должен быть удобным, а не просто уменьшенным. Названия товаров не должны заслонять цену, кнопки не должны становиться слишком маленькими, а карусель не должна перехватывать прокрутку страницы. Если блок выглядит тесно, лучше уменьшить количество товаров в первом экране, отключить лишние элементы карточки или перейти к одной колонке.
Мини-итог проверки: публиковать блок стоит только после того, как совпали три вещи - правильные товары, понятная карточка и рабочее действие покупателя.
Как вести блок распродажи после публикации
Sale-витрина не заканчивается в момент публикации. В отличие от обычного статичного блока, она зависит от текущих цен, расписаний скидок, остатков, категорий и кеша. Если через некоторое время блок изменился, это не всегда поломка плагина. Иногда товар просто перестал быть акционным, закончился на складе, был скрыт из каталога или получил новую категорию.
Контроль после изменения цен
После массового изменения цен проверьте хотя бы одну страницу, где стоит блок CodeCanyon WooCommerce Sale Products Layout. Убедитесь, что товары появились или исчезли ожидаемо. Если магазин использует кеш, очистите кеш страницы, кеш WooCommerce и, если применимо, кеш CDN. Для промо-страниц с высокой посещаемостью полезно иметь короткий чек-лист на случай запуска акции: обновить цены, проверить стандартный вывод WooCommerce, открыть Elementor-страницу, проверить публичную версию.
Контроль после изменения дизайна
Смена темы, глобальной типографики, кнопок Elementor или WooCommerce-стилей может изменить вид карточек. Поэтому после редизайна не ограничивайтесь главной страницей. Откройте все страницы, где используются sale-блоки: главную, промо-лендинг, категорийную подборку и текстовые материалы с товарными вставками. Проверьте, не съехали ли цены, бейджи и кнопки, а также не стала ли сетка слишком плотной.
Контроль после обновлений
Перед обновлением WooCommerce, Elementor, темы или набора Elementor-аддонов сделайте резервную копию и проверьте блок на копии сайта, если магазин коммерчески важен. После обновления повторите базовый сценарий: редактор открывается, виджет виден, товары со скидкой выводятся, пагинация работает, кнопки ведут туда, куда нужно. Если ошибка появилась только после обновления, сначала временно отключите спорный режим, например Load More или анимацию, и верните стабильную версию блока.
Когда блок стоит пересобрать, а не чинить
Иногда дешевле пересобрать секцию, чем долго искать конфликт. Если старый блок использует сложный стиль, несколько анимаций, нестабильную подгрузку и давно не проверялся, создайте новую тестовую секцию с минимальными настройками. Перенесите только нужные товары и базовый дизайн. Если новый блок работает стабильно, постепенно добавляйте оформление. Такой способ быстрее показывает, проблема в конкретных настройках старой секции или в общем конфликте плагинов.
Как передать блок контент-менеджеру
Если скидками занимается не разработчик, оставьте для редактора короткую внутреннюю инструкцию: где задаётся цена распродажи, какие товары участвуют в блоке, какая страница отвечает за промо-секцию и что нужно проверить после изменения акции. В инструкции не должно быть сложного кода или технических догадок. Достаточно понятного порядка: обновить товары, открыть тестовую страницу, убедиться в правильной цене, проверить кнопку и только потом менять опубликованную секцию. Такой регламент снижает риск случайно показать обычные товары как акционные или оставить на главной пустой блок после окончания распродажи.
Почему блок пустой, тянет не те товары или выглядит чужеродно
У этого продукта не найден отдельный публичный список ошибок, поэтому диагностику нужно строить по слоям: данные WooCommerce, подключение Elementor, конфликт темы или аддонов, кеш и скрипты. Такой подход безопаснее, чем сразу править CSS или искать сложную настройку.
| Симптом | Вероятная причина | Что проверить | Как исправить безопасно |
|---|---|---|---|
| Блок пустой | Нет товаров с настоящей ценой распродажи или товары скрыты. | Стандартный shortcode [products on_sale="true"], статус публикации, видимость каталога. |
Исправить данные товара, очистить кеш, повторить проверку на тестовой странице. |
| Показываются товары без скидки | Кеш, конфликт запроса или динамические скидки, которые не записаны как sale price. | Работает ли стандартный WooCommerce-вывод, есть ли плагины динамического ценообразования. | Разделить реальные sale-товары и маркетинговые скидки, при необходимости использовать отдельный тег акции. |
| Виджет не виден в Elementor | Плагин не активирован, Elementor не активен, ошибка установки или конфликт редактора. | Список активных плагинов, поиск по панели Elementor, безопасный режим редактора. | Переустановить корректный ZIP, проверить без лишних аддонов на staging-сайте. |
Load More не работает |
Конфликт JavaScript, кеш, оптимизация скриптов или нестабильный контекст страницы. | Консоль браузера, отключение оптимизации JS, работа на обычной тестовой странице. | Перейти на Classic или Numeric, пока причина не найдена. |
| Карточки выглядят иначе, чем в демо | Тема или глобальные стили WooCommerce переопределяют внешний вид. | Базовая тема, отключение соседних Elementor-аддонов, инспектор CSS. | Исправлять через настройки темы, Customizer или дочернюю тему, не меняя файлы плагина. |
| Кнопка ведёт не туда | Вариативный товар, AJAX add to cart, конфликт темы или фильтра. | Тип товара, поведение до применения фильтров, ошибки JavaScript. | Для сложных товаров вести пользователя на страницу товара, а не форсировать мгновенное добавление. |
Когда лучше откатить настройку
Откатывать стоит не только после явной ошибки. Если после включения анимации страница стала заметно тяжелее, если Load More работает нестабильно, если карточки ломаются на мобильном или если sale-блок начал показывать спорный набор товаров, верните последний простой вариант. В коммерческом блоке стабильность важнее эффектности.
Безопасные улучшения без правки ядра
Если нужна небольшая правка внешнего вида, используйте настройки темы, Elementor или дочернюю тему. Не меняйте файлы WordPress, WooCommerce, Elementor или самого плагина: после обновления такие изменения пропадут, а при ошибке будет сложнее понять причину. Небольшой CSS допустим только после проверки селекторов на staging-сайте и с понятным способом отката.
Хорошее правило: если проблему можно решить выбором режима, количеством колонок или отключением лишней анимации, не решайте её кодом.
Совместимость, скорость и SEO для блока распродажи
Sale-блок влияет не только на внешний вид. Он добавляет изображения, стили, скрипты, кнопки и внутренние ссылки на товары. Для небольшого магазина это может быть незаметно, но на тяжёлой главной странице даже один дополнительный carousel может ухудшить восприятие скорости.
Скорость
Используйте столько товаров, сколько нужно для решения задачи. Блок из 4-8 товаров часто работает лучше, чем длинная лента из десятков карточек. Подготовьте изображения товаров, избегайте слишком тяжёлых фото и проверьте страницу после очистки кеша. Если включены анимации, проверьте, не мешают ли они первому экрану и прокрутке.
SEO
Витрина скидок сама по себе не гарантирует рост позиций. Она может улучшить страницу, если помогает пользователю найти товары и перейти в карточки. Но если блок создаёт дубли, скрывает важный текст или подгружает товары нестабильно, он не заменит нормальную структуру категорий, карточек товара, описаний и внутренних ссылок.
Безопасность и поддержка
Так как публичная документация и открытый changelog по этому продукту не обнаружены, не ставьте плагин сразу на критичную страницу без теста. Сделайте резервную копию, проверьте на копии сайта, сравните поведение с текущей версией Elementor и WooCommerce. Если на современном стеке возникают ошибки, не пытайтесь лечить их случайными фрагментами кода из форумов.
FAQ по выводу товаров со скидкой через этот аддон
Нужен ли Elementor для работы плагина?
Да. Официальное описание прямо указывает, что Elementor должен быть установлен, потому что продукт является аддоном для Elementor. Без Elementor нет смысла ожидать появление его виджетов на странице.
Нужен ли Elementor Pro?
В открытом описании продукта подтверждена зависимость от Elementor, но отдельное требование Elementor Pro не найдено. Поэтому проверяйте это на вашей версии плагина и в комплектной документации архива. Если виджет не появляется в бесплатном Elementor, не делайте вывод без проверки документации продукта.
Почему товары со скидкой не отображаются?
Сначала проверьте, есть ли у товаров стандартная цена распродажи WooCommerce, опубликованы ли они и видимы ли в каталоге. Затем сравните результат со стандартным shortcode [products on_sale="true"]. Если базовый WooCommerce-вывод пустой, проблема не в стиле плагина.
Можно ли использовать блок не на странице магазина?
Да, логика Elementor-виджета как раз удобна для произвольных страниц: главной, промо-страницы, посадочной страницы акции или контентного материала. Но если страница сильно зависит от архивного контекста WooCommerce, отдельно проверьте пагинацию и подгрузку.
Какой режим лучше для мобильных устройств?
Для мобильных устройств чаще безопаснее одна колонка или аккуратный showcase без агрессивной анимации. Главное - чтобы цена, название и кнопка действия не становились мелкими и не перекрывались.
Подойдёт ли плагин для вариативных товаров?
Продукт выводит WooCommerce sale products, но поведение вариативных товаров зависит от того, как скидки заданы у вариаций и как тема показывает цену. Проверьте каждый важный вариативный товар отдельно: цена, переход, выбор вариации и кнопка должны быть понятны покупателю.
Можно ли использовать динамические скидки вместо sale price?
Это зависит от того, как плагин динамических скидок передаёт данные WooCommerce. Если скидка рассчитывается только во время просмотра или в корзине, sale-выборка может её не увидеть. Для таких акций надёжнее использовать отдельную категорию, тег или инструмент самого discount-плагина.
Когда лучше выбрать другое решение?
Если вам нужен не отдельный блок распродажи, а полная перестройка магазина, фильтры, шаблоны товара, checkout и глобальные WooCommerce-компоненты, лучше смотреть на комплексный builder или штатные инструменты Elementor/WooCommerce.
Когда CodeCanyon WooCommerce Sale Products Layout будет удачным выбором
Этот продукт лучше всего подходит для магазина, где уже есть корректно настроенные товары со скидкой и нужен быстрый визуальный блок в Elementor: сетка, showcase, несколько стилей, базовая пагинация, цвета и адаптивный вывод. Он не должен чинить данные WooCommerce, заменять каталог, строить фильтры или решать проблемы динамического ценообразования.
Перед рабочим запуском проверьте продукт на копии сайта, соберите тестовую секцию, сравните вывод со стандартным WooCommerce-результатом, пройдите мобильную версию и убедитесь, что кнопки ведут покупателя в правильное место. Если такой сценарий совпадает с вашей задачей, можно загрузить CodeCanyon WooCommerce Sale Products Layout и протестировать его на подготовленной странице.
Главный критерий выбора простой: если вам нужна аккуратная витрина акционных товаров в Elementor, плагин может сэкономить время. Если вам нужна новая логика магазина, сложные фильтры или гарантированная поддержка современного стека без дополнительной проверки, сначала сравните его с более широкими решениями.


