Сен
23
1

Вывод Woocommerce товаров на странице с Elementor с помощью плагина

Сегодня рассмотрю, казалось бы, простую задачу, но, как выяснилось, без специального плагина с ней рядовому пользователю справиться будет достаточно сложно. Итак, мне нужно было на существуем сайте с установленным конструктором Elementor вывести список последних товаров по определенной категории. Если у вас есть премиальная версия данного плагина, то в нем предусмотрены специальные виджеты для этого, но в обычном бесплатном Элементоре они недоступны.

Теоретически, вы можете воспользоваться стандартным виджетом самого модуля Woocommerce, сделанного под WordPress. Называется он “Товары”.

товары Elementor

Минусы этого подхода видных сразу:

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

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

Woo Products Widgets For Elementor

Woo Products Widgets For Elementor

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

После установки в редакторе Elementor появится сразу 3 разных блока:

Виджеты Elementor

А именно:

  • Продукция в Grid-формате (в несколько колонок).
  • Категории Woocommerce в такой же Grid стилистке.
  • Вывод продукции обычным списком.

Я взял первый вариант. И тут, конечно, передо мной открылось нереальное множество разных параметров и настроек. Редакторам/новичкам это однозначно понравится.

Woo Products Widgets For Elementor

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

А дальше идут всякие опции в стиле:

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

Во второй вкладке (Стиль) вы можете редактировать абсолютно все элементы блока: заголовок, картинку, кнопку, рейтинг, категории, описание и др. Ну, круто же!

Единственное, с чем у меня возникли проблемы – почему-то не выводился символ валюты, пришлось дописывать его через CSS псевдокласс after.

Альтернативы

Думаю, несколько альтернативных решений найти можно, но и там есть нюансы. Например, я сразу же попал на плагин Unlimited Elements For Elementor с сотней полезных виджетов на любой вкус и цвет. Но, во-первых, только часть из них бесплатная + настройки ограничены, а, во-вторых, не хочется ставить громоздкий модуль из-за одной вполне конкретной задачи. Поэтому сегодня лично я использовал Woo Products Widgets For Elementor.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 107, средний балл: 4,37 из 7)
Загрузка...

категория Категории: WooCommerce;
теги Теги: , , , , , , .

1 комментарий к статье “Вывод Woocommerce товаров на странице с Elementor с помощью плагина”

  • adward   02.06.2023

    А как выводить только те товары у которых есть наличие?

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


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

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости