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

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

В плагине 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” можно найти данный плагин:

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

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

  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

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

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

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

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

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

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

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

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

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

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

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

Создай свой первый сайт на WordPress

Dan Zakirov
Оцените автора
Добавить комментарий

  1. Dan Zakirov автор

    Плагин переведен на русский язык и обновлен интерфейс

    Новый интерфейс

    Ответить
  2. Анатолий

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

    Ответить
    1. Dan Zakirov автор

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

      Ответить
  3. Павел

    Что именно планируете добавить в следующем обновлении?

    Ответить
    1. Dan Zakirov автор

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

      Ответить
  4. Антон

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

    Ответить
  5. Юрий

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

    Ответить
  6. Александр

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

    Ответить
  7. Виктор

    Здравствуйте. Плагин отличный. Но почему-то не работает в яндекс-браузере. Можете подсказать, с чем это может быть связано? Спасибо

    Ответить
  8. Виктор

    Здравствуйте. Замечательный плагин, очень удобен в настройках. Только столкнулся с проблемой: в браузере Яндекс плагин почему-то не работает. Стили из плагина подтягиваются, а скрипты нет. Можете подсказать, с чем это может быть связано? Спасибо

    Ответить