Нет виджета карусели продукта WooCommerce Master Addons. Это честный ответ, и он экономит вам установку.
Что работает, так это три маршрута. Петлевая карусель Elementor Pro - единственная, которая выполняет живой запрос на продукт, поэтому выберите ее, если полоса должна следовать вашему каталогу. бесплатный дизайн Quadrant Paged Catalogue дает вам тщательно подобранную витрину из девяти предметов, за которой нет запросов. И виджет избранного продукта Master Addons освещает один продукт, а бесплатная карусель изображений покрывает фотографию продукта. Все три сидят внутри более широкого Виджет карусели Элементор семья; если вы комплектуете целый магазин, то лучшие дополнения Elementor для WooCommerce roundup покрывает остальное.
Ниже: как построена каждая из них, затем пропускается часть большинства учебных пособий, и именно здесь карусель с продуктом активно стоит вам продаж.
Какой метод выбрать
- У вас есть Elementor Pro, и полоса должна отслеживать акции, цены и новые поступления → Петлевая карусель. Это настоящий ответ.
- Вам нужны девять рукописных карт, которыми вы управляете, вплоть до последней строки копии → Квадрантный страничный каталог, бесплатно.
- Вы хотите сильно подтолкнуть один продукт → Рекомендуемый продукт, Про.
- Вам просто нужны фотографии продуктов на дорожке → Изображение Карусель, бесплатно.
Способ 1: Петлевая карусель Elementor Pro
Elementor Pro решает эту проблему изначально, поэтому начните здесь. The Петля Карусель берет шаблон Loop Item, одну карту продукта, которую вы проектируете один раз, и указывает на него на запрос WooCommerce.Добавить продукт, изменить цену, распродать не в размер, и карусель отражает его, никто не открывает редактор. Никакого дополнения не участвует.
- Создайте шаблон элемента цикла. Шаблоны → Theme Builder → Loop Item, исходный код установлен в Product. раскладывайте изображение, заголовок, цену, рейтинг и кнопку с помощью динамических тегов.
- Опустите виджет "Карусель с петлей" на страницу и выберите этот шаблон.
- Установите запрос. Источник - это место, где происходит реальная работа: все продукты, категория, тег, в продаже, избранные или вручную выбор. Затем заказ по дате, цене, популярности или меню порядок.
- Установите, сколько загрузить. Это сумма, которую держит карусель, а не сколько видно Восемь-двенадцать подходит полосе сопутствующих товаров Загрузите четыре с четырьмя видимыми и не к чему прокрутить.
- Исключить то, чего там быть не должно. Нет в наличии товаров, и на одной странице продукта, текущий продукт.Полоса сопутствующих товаров, которая включает в себя продукт, который вы уже смотрите, читается как сломанный.
- Установите слайды для каждого просмотра для каждой точки останова. Четыре на рабочем столе, три на планшете, полтора на мобильном.
Что “one-полтора на mobile” - не опечатка Полная карта плюс половина следующей - самый сильный сигнал полосковых прокруток Одна карта, заполняющая ширину, выглядит как статический блок и большинство людей никогда ее не свайп.
Улов - лицензия. Петлевая карусель предназначена только для профессионалов, без бесплатного эквивалента в ядре Elementor. обзор плагина карусели подробно просматривает элементы управления запросами и бесплатные обходные пути.
Метод 2: ручная обработка с помощью каталога Quadrant Paged (бесплатно)
Живой запрос иногда совершенно неверен. коллекция домашней страницы, где вы хотите написать каждую строку самостоятельно, или демонстрация продукта на сайте, который вообще не запускает WooCommerce, хочет тщательно отобранные карты.
Квадрантный страничный каталог - один из восьми бесплатных импортируемых Виджет Строитель дизайны: сетка из девяти ящиков для предметов, выложенных по три за раз, с сегментной направляющей, которая показывает, где вы находитесь, и перемещается между страницами. в каждом ящике находится изображение, метка категории, заголовок, строка копии и статистика, все они вводятся вручную, что и является точкой.
Живая демо Скачать виджет JSON
Импортирует на бесплатном плагине через Master Addons → Widget Builder → Import Widget, затем появляется в Elementor под Избранное, Остальная часть набора, двадцать дизайнов с восемью из них бесплатными, находится в бесплатные шаблоны ползунков Элементора облава.
Честное предостережение: девять пунктов, исправлено. это не запрос продукта. Ничто не отслеживает запас, ничто не обновляет цену, и аншлаг находится там, пока вы не отредактируете коробку. Используйте его для курируемого набора, который вы редко меняете. Для всего, что должно следовать каталогу, вернитесь к Методу 1.
Метод 3: Рекомендуемый продукт и карусель изображений для фотографий
У Master Addons ровно один виджет WooCommerce, и это не карусель The Избранный виджет продукта is Pro, и он выполняет другую работу: один продукт, заданный номер, с изображением, названием, ценой, описанием и кнопкой покупки, расположенной в виде блока, а не карты в полоске.
Это часто лучше формы в любом случае, Единственный продукт с пространством вокруг него преобразуется сложнее, чем тот же продукт, как одна из четырех карт кто-то должен прокрутить мимо. Используйте его для запуска, бестселлер, или один элемент, вокруг которого построена целевая страница.
Для фотографии продукта на дорожке (шесть ракурсов одной куртки, лукбук, полоска материалов) бесплатно Изображение Карусель обрабатывает его. Лайтбокс, подписи, слайды для каждого устройства на просмотр. Если некоторые из этих углов являются клипами, а не кадрами, видеокарусель и руководство по слайдерам галереи охватывает виджеты, обрабатывающие воспроизведение.
Понятно, что это не так: вы сами добавляете изображения, и они не ссылаются на продукты, если вы не устанавливаете ссылки вручную. это фотокарусель, а не лента магазина.
Где принадлежит карусель для продуктов
Какой бы метод вы ни использовали, четыре позиции работают надежно:
- Сопутствующие товары на одной странице продукта. Посетителя уже интересует эта категория Скользящая полоса из четырех альтернатив - это услуга.
- Перекрестные продажи и “полнить look.” Аксессуары под основным продуктом Никому не нужно видеть все двенадцать, им нужно знать, что двенадцать существуют.
- Рекомендуемая или сезонная коллекция на домашней странице. Кураторский, а не исчерпывающий.
- Недавно просмотрено. Маленькая, личная и карусель - естественная форма.
Что они разделяют: продукты есть опционально. Страница по-прежнему работает, если никто не касается полосы.
Где это стоит вам продаж
Никогда не кладите карусель на страницу магазина или категории.
Это тот, который нужно сделать правильно Страница категории существует, чтобы люди могли сравнить: сканировать сетку, обнаружить ту, которую они хотят, щелкнуть. карусель показывает четыре продукта, а остальные скрывает за стрелкой, что превращает сравнение в упражнение памяти. Посетитель должен держать продукт два в голове, глядя на продукт шесть.
Стоимость презентации тоже есть Карусель и сетка могут выводить ту же наценку, но страница категории, которая наглядно показывает шесть позиций, читается как тонкая категория, как покупателям, так и всем, кто оценивает глубину страницы. ваша страница магазина должна выглядеть как магазин.
Вторая плохая позиция: над складкой на мобильном. Карусель продукта - это запрос, рендеринг шаблона и инициализация слайдера перед тем, как что-либо раскрасит. В верхней части страницы телефона это ваша самая большая содержательная краска, потраченная на спиннер. Положите туда статического героя и запустите карусель под ним.
В корзину: в карусели или нет?
Показать кнопку для простых продуктов Скрыть ее для переменных.
Простой продукт с AJAX надстройка в тележке в полосе является настоящим ярлыком: один касание, без загрузки страницы, обновления корзины. Стоит иметь.
Переменный продукт нельзя добавить, не выбрав размер или цвет, поэтому кнопка либо ничего не делает, либо отскакивает покупателя на страницу продукта. Оба чувствуют себя сломанными. Для переменных продуктов сделайте всю карту ссылкой и пропустите кнопку.
Если в вашем каталоге смешаны оба варианта, запустите две карусели с разными запросами, а не одну компромиссную компоновку.
Значки продажи и отображение цен
Покажите значок продажи. это самая контрастная вещь в карточке продукта, и именно поэтому люди перестают прокручивать.
Покажите цену, включая продаваемый оригинал, потому что сравнение - это убеждение.
Переменные продукты отображают диапазон (“£20 до £45”).Длинные диапазоны свертывания и разбивания карты выравнивание, и несоосные карты в горизонтальной полосе гораздо более заметны, чем в сетке. либо установить фиксированную высоту в ценовой строке или показать “From £20.”
Дизайн карты, который не выглядит любительским
Три вещи имеют большее значение, чем остальные.
Равные высоты карт. Названия продуктов сильно различаются по длине, а двухстрочный заголовок рядом с однострочным заголовком поднимает ценовой ряд на разную высоту. Установите фиксированную высоту заголовка с усечением или включите автоматическую высоту, чтобы строка сама выравнивалась.
Соотношение сторон одного изображения. Портрет и квадратные фотографии продукта в одной полосе - единственная наиболее распространенная причина, по которой карусель продукта выглядит дешево. Установите соотношение и дайте ему обрезаться.
Разрыв между картами. от 16 до 24px. Zero gap заставляет продукты сливаться вместе; слишком много и четыре карты перестают читать как набор.
Автозапуск продуктов?
Нет, и этот не является предпочтением. правило автозапуска отличается для слайдера-героя, где ничего не щелкается и вращение ничего не стоит.
Карты товаров кликабельны. автоигра означает, что карта может двигаться, когда кто-то тянется к ней, а покупатель, который нажимает не на тот товар, обычно не возвращается и не пробует снова. они уходят. пауза на зависании охватывает рабочий стол; на ощупь вообще нет зависания, а мобильный телефон - это то место, где находится большинство ваших покупателей.
Выключите его.
Производительность: сколько на самом деле стоит карусель
Каждый продукт в запросе - это чтение базы данных плюс рендеринг шаблона, и сценарий ползунка не может инициализироваться, пока не существует этой разметки. Три практических ограничения:
- Закройте запрос двенадцатью. Кроме того, вы раздаете карты, до которых никто не доходит.
- Лениво загружайте все, кроме первого ряда видимых изображений. Закадровая загрузка слайдов является обычной причиной медленной загрузки страницы продукта.
- Подавайте изображение карты размером с карту. Фотография продукта размером 2000px, масштабированная в карту 300px, является наиболее распространенной бесполезной загрузкой на сайте WooCommerce.
Одна карусель на страницу раздела - разумный потолок Три сложенные карусели на домашней странице - это три ползунка, конкурирующие за основную нить на телефоне.
Схема: не крутите вручную
WooCommerce уже выводит структурированные данные о продукте на отдельных страницах продукта, и именно там этого хочет Google. Карусель карточек продуктов на домашней странице или целевой странице не нуждается в собственной разметке продукта, и добавление ее вручную - хороший способ получить данные о цене или доступности, которые противоречат реальной странице продукта.
Если карусельные карты ссылаются на страницы продукта, и они должны, путь ползания нетронут и структурированные данные живут там, где они принадлежат. оставьте это в покое.
Часто задаваемые вопросы
Есть ли у Master Addons виджет карусели продукта WooCommerce?
Нет. мастер аддоны имеет один виджет WooCommerce, Рекомендуемый продукт, и он выделяет один продукт, а не скользить через несколько. для реального продукта карусель, использовать Elementor Pro's Loop карусель с продуктом шаблон Loop Item. для ручной куратор витрины на бесплатном плагине, импортировать дизайн Quadrant Paged Catalogue и заполнить девять коробок самостоятельно.
Есть ли в WooCommerce карусель для продуктов?
Не изначально. WooCommerce выводит продукты в сетках: страница магазина, архивы категорий, сопутствующие товары. для скользящей карусели нужна либо Loop Carousel от Elementor Pro с шаблоном продукта, либо сторонний виджет, который его добавляет.
Как сделать карусель в Элементоре бесплатно?
У Free Elementor нет динамической карусели продуктов, поэтому честный свободный путь - это путь, пройденный вручную: импортируйте дизайн Quadrant Paged Catalogue через Master Addons → Widget Builder → Импортируйте виджет и введите девять элементов или используйте бесплатную карусель изображений для фотографии продукта с ручными ссылками. Все, что запрашивает каталог, автоматически нуждается в Elementor Pro.
Должен ли я использовать карусель с продуктом на странице своего магазина?
Нет. Категория и страницы магазинов существуют, чтобы люди могли сравнить продукты с первого взгляда, и карусель скрывает большинство из них за стрелкой. Используйте сетку на страницах объявлений и сохраняйте карусели для сопутствующих товаров, перекрестных продаж и курируемых коллекций.
Может ли карусель с продуктом показывать кнопки добавления в тележку?
Да, если вы сами строите карту в шаблоне Loop Item. поместите дополнение к корзине в шаблон, и каждый слайд получит его. Покажите его для простых продуктов с AJAX add-to-cart; спрячьте его для переменных продуктов, которым сначала нужно выбрать вариант, поэтому кнопка либо не работает, либо перенаправляет.
Сколько продуктов должно быть в карусели?
Восемь-двенадцать загружено, четыре видно на рабочем столе Меньше восьми и едва ли есть к чему прокрутить; больше двенадцати и хвост никогда не виден Если вам нужно больше, чем это, контент хочет сетку.
Почему мои товарные карты имеют разный рост?
Названия продуктов разной длины толкают цену и строки кнопок в разные положения.Установите фиксированную высоту заголовка с усечением или включите автоматическую высоту, чтобы строка соответствовала самой высокой карте.Установите фиксированное соотношение сторон изображения тоже, потому что смешанные портретные и квадратные фотографии вызывают одну и ту же проблему.
Следующий
Снимать один товар с шести ракурсов, а не перечислять шесть товаров, Вот изображение карусели учебник, который закрывает лайтбокс и сторону субтитров.
Все карусельное, бесплатное и профессиональное, находится на сайте карусельный виджет-хаби распад бесплатного и профессионального показывает, что именно добавляет лицензия.
Квадрантный страничный каталог импортируется бесплатно. Остальные двенадцать образцов нуждаются в лицензии, и страница ценообразования показывает, под какой уровень подпадает каждый из них.
