Как установить карусель товаров woocommerce для рекомендуемых и похожих товаров?

В плагине woocommerce существуют похожие товары. Они появляются автоматически в карточке товара при условии определенных настроек. Так же есть рекомендуемые товары ( АПСЕЛЛЫ ), которые вы можете назначить самостоятельно на вкладке “Сопутствующие”. По умолчанию эти товары выглядят в виде обычной сетки и сегодня речь пойдет как практически в один клик сделать из них карусель товаров.

Обсудим это в комментариях?

Задавай любой вопрос, мы всегда этому рады!

Небольшая демонстрация в работе

Официальная страница плагина Carousel Upsells and Related Product for Woocommerce
Официальная страница плагина Carousel Upsells and Related Product for Woocommerce

Быстрая скорость работы плагина Carousel Upsells and Related Product for Woocommerce

Все свои плагины я стараюсь оптимизировать таким образом, чтобы они работали быстро.

Самое главное преимущество плагина “Carousel Upsells and Related Product for Woocommerce” заключается в том, что он использует “чистую” javascript библиотеку glide.js и не имеет зависимостей от jQuery. Основной JS файл плагина весит всего ~23kb, а в сжатом виде всего ~7kb. По сравнению с подобными каруселями-слайдерами, такие как Slick Slider(88kb, а в сжатом 44kb), Swiper Slide(более 100kb) или OWL carousel (89kb, а в сжатом 44kb) – это в разы меньше и напомню glide.js без зависимостей jQuery. При всем этом у glide.js присутствует режим Touch Swipe, который позволяет пальцем (касанием по элементу) двигать карусель в нужном направлении.

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

Также стоит отметить про похожие товары или апселлы (рекомендуемые товары) которые по тем или иным причинам меньше количества видимой области в карусели. Например, нашлось 3 похожих товара, физически нет 4-го, а в карусели должно быть 4, то карусель вообще не запускается, данный элемент отображается по стандарту как обычная сетка, карусель вообще не интерпретируется. В общем, в отношении оптимизации не беспокойтесь, все работает быстро и плагин некоим образом не будет замедляет ваш сайт.

Установка плагина Carousel Upsells and Related Product for Woocommerce

Установить плагин можно стандартным способом перейдя в разделы “Плагины”, далее сверху нажать на кнопку “Добавить новый” и по ключу справа в поиске “Carousel Upsells and Related Product” можно найти данный плагин:

После активации у вас появятся дополнительные настройки плагина, но он уже в работе. Ваши апсейлы (рекомендуемые товары) и похожие товары преобразовались в карусель.

Сами настройки плагина находятся тут и разделены на два меню:

  1. Woocommerce → Настройки → Продукты→ Settings Related Products Carousel
  2. Woocommerce → Настройки → Продукты → Settings Upsells Product Carousel

Подробности по установке плагина вы можете найти на официальном репозитории WordPress.

Основное настройки плагина Carousel Upsells and Related Product for Woocommerce 
Основное настройки плагина Carousel Upsells and Related Product for Woocommerce

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

Особенности плагина Carousel Upsells and Related Product for Woocommerce 

Во-первых, самое главное, в некоторых темах уже предусмотрен кастомных вывод похожих товаров или они имеют настройки в самой теме, поэтому на данный момент “Похожие товары” могут не работать именно в таких темах. В 80% случаев все работает отлично, ну а рекомендуемых товаров (апсейлов) это касается в меньшей степени. Я полагаю, эту проблему мы со временем решим, почаще обновляйте плагин, обновлений будет много.

Во-вторых, дизайн самих карточек товаров берется из вашего каталога товаров, поэтому с дизайнером сложностей нет. Просто требуется настройка в соответствии с вашим дизайном. Например, на мобильном устройстве можно отображать по 2 товара, но сама тема не позволяет качественно отобразить 2 товара поскольку имеет свой оригинальный отступ от краев и специфическую карточку товара.

Будущее плагина

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

Появится возможность выбирать дизайн  навигационных стрелок, их анимацию. Ну и различные “плюшки” по самой карусели, возможностей много.

В целом, я хочу реализовать целую систему слайдеров и каруселей – различные выводы в категории, кросселы(рекомендуемые в корзине) и т.д.

Буквально на днях, плагин будет полностью переведен на русский язык о чем я дополнительно сообщу в комментариях к этому посту.

Обращение к инсталляторам и пользователям

Прошу строго не судить, это первые мои плагины. Я стараюсь делать для людей и реализую все необходимое для вашего комфорта. Если вам понравился плагин пожалуйста оставьте отзыв на официальном репозитории, меня это значительно мотивирует развивать плагин дальше.

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

7 комментариев

  1. Статья интересная и актуальная. Когда ожидать обновления, чтобы можно было бы менять кнопки в навигации?

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

    • 1. Точно будет Центр-мод, это когда по краям каруселька обрезается, на яндексе такая стоит
      2. Будут добавлены настройки по управлению навигацией
      3. Подсказка на мобильном устройстве – не все понимают что можно прокручивать пальцем
      4. Продолжительность анимации в миллисекундах.
      5. Соотношение альтернативного расстояния перемещения слайдов при смахивании и перетаскивании. В общем это такая штука, когда вы пальцем зацепили слайд и перетаскиваете, так вот тут будет управление именно скорости перемещения. Пока думаю стоит ли вводить такую настройку
      6. Минимальное расстояние, необходимое для смены слайда.
      7. Размер зазора между слайдами в пикселях…
      ———-
      Это было в планах. Реализована половина уже. При чем навигация будет сменятся сразу, то есть поменяли фон – сразу видите изменение ну и несколько несколько самих иконок на выбор.

  2. Плагин действительно необычный. Мне, как владельцу сайта на WordPress он значительно облегчит жизнь. Спасибо за информацию.

  3. Пользовался не раз скриптом OWL carousel, чтобы вывести похожие товары. Ваш плагин, как я понял, несколько отличается. Думаю, – попробовать стоит…

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*