Вы когда-нибудь хотели создать сортируемую и фильтруемую сетку, которая содержит все или часть ваших продуктов WooCommerce?

Если вы управляете магазином WooCommerce, вы знаете, что WooCommerce уже имеет специальную страницу архива, которая помогает вам продемонстрировать отдельные продукты.

Но, в зависимости от того, что вы продаете, это не всегда самый эффективный способ продемонстрировать свою продукцию.

В некоторых случаях отображение продуктов WooCommerce в сетке более эффективно.

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

Но если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь.

Что вы можете сделать с сеткой продуктов WooCommerce?

Хотя это и не полный список, вот несколько ситуаций, в которых сетка продуктов может дать посетителям больше впечатлений, чем обычная страница архива:

Откройте для себя Как установить интернет-магазин в WordPress с плагином WooCommerce

• Оптовые магазины - если вы продаете много товаров оптом, предоставление вашим клиентам простого способа сортировки или фильтрации сетки может быть более удобным для пользователя, чем просмотр отдельных страниц товаров.
• Каталог продуктов - аналогично, если вы просто хотите отобразить простой в навигации каталог продуктов, сетка сортировки / фильтрации AJAX сэкономит время клиентов (и перезагрузит страницу).
• Формы заказов - если вы хотите создать форму заказа на основе продуктов WooCommerce, сетка предоставляет очень простой способ сделать это. Это также хороший подход для отображения меню ресторана и приема онлайн-заказов.

Как создать сетку продуктов WooCommerce

Мы будем использовать плагин Таблица продуктов WooCommerce. Плагин специально ориентирован на создание товарной сетки. А благодаря параметрам интерфейса и короткий код, вы можете настроить практически каждый аспект работы вашей сетки.

Также прочитайте наше руководство по: Как увеличить время, потраченное на блог WordPress

Вот некоторые из наиболее полезных функций, на мой взгляд:

• Легко добавлять или удалять столбцы Вы даже можете добавлять столбцы, содержащие настраиваемые поля или настраиваемые таксономии, а таблица продуктов WooCommerce полностью интегрируется с расширенными настраиваемыми полями.
• Включены фильтры фильтров 4. Это позволяет вам предоставить читателям беспроблемный опыт, предлагая параметры фильтрации на боковой панели.
• Поддержка вариантов продукта / атрибутов. Выберите один из 3 различных способов отображения вариантов продукта в вашей сетке.
• Коробки с множественным выбором. Это облегчает создание форм заказа, позволяя клиентам выбирать несколько продуктов, прежде чем добавлять их в свою корзину.
• Мгновенный поиск, сортировка и фильтрация , Клиенты могут манипулировать данными вашей сетки без перезагрузки страницы.
• Добавить в корзину , Точно так же клиенты могут добавлять товары в свои корзины без перезагрузки страницы.
• Поддержка Lazy Load, Полезно для улучшения производительности больших сеток ( хотя это влияет на возможность предлагать мгновенную сортировку или фильтрацию )

Вот как использовать этот плагин ...

Шаг 1: настройка функции сетки по умолчанию

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

Это по существу определяет поведение шорткода по умолчанию. Но вы также можете изменить это поведение для отдельных сеток, добавив параметры в шорткод.

Чтобы получить доступ к настройкам плагина, перейдите на WooCommerce → Настройки. Затем щелкните вкладку Продукция и выберите вариант Таблицы продуктов :

Настройка внешнего вида ваших сеток

Прежде всего, вы можете выбрать стиль вашей сетки в разделе Дизайн стола, Вы можете сделать это с:

• По умолчанию - как вы понимаете, эта опция использует настройки плагина по умолчанию без какого-либо дополнительного вмешательства с вашей стороны. Он постарается максимально использовать текущую тему вашего блога.
• Personnalisé : при выборе он расширяет список параметров стиля, которые позволяют настраивать цвета и размеры шрифтов без необходимости Пользовательский CSS.

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

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

Откройте для себя Как добавить WooCommerce магазин на Facebook

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

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

Как контролировать запас вашего интернет-магазина WooCommerce ? Откройте его, нажав на эту ссылку.

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

Смотрите также наш выбор 12 лучшие плагины WooCommerce для улучшения вашего интернет-магазина

После завершения настройки обязательно сохраните изменения.

Шаг 2: добавление виджетов WooCommerce Grid (необязательно)

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

Чтобы получить к нему доступ, перейдите на Внешний вид → Виджеты как обычно и проведите по желаемым виджетам:

Шаг 3. Добавьте шорткод там, где вы хотите отображать сетку продуктов.

Вы на финише! Теперь все, что вам нужно сделать, это добавить шорткод. [product_table] везде, где вы хотите, чтобы ваша сетка появилась.

Откройте для себя тоже Как найти ссылку на WordPress страницу входа

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

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

[product_table Каталог="головные уборы"]

Вы даже можете проявить творческий подход и использовать условия И / ИЛИ здесь.

Например:

• [product_table Каталогзнак равноголовные уборы + в звезда« ] отображает только товары, принадлежащие время к категориям шляп et в звездах.
• [ Product_table Каталогзнак равноголовные уборы , en  звезда "] отображает продукты, которые так что головные уборы ou звездная категория.

Это внимание к мелким деталям делает сетку продуктов WooCommerce такой замечательной. 

Смотрите также наш 6 плагинов WordPress, чтобы вдохнуть новую жизнь в ваши статьи

Вот и все, что нужно сделать с сеткой продуктов на WooCommerce!

Цены на плагин WooCommerce Product Table

WooCommerce Product Table - это исключительно премиальный плагин. Хотя в каталоге WordPress.org есть несколько бесплатных вариантов, я не нашел ни одного, который был бы настолько гибким или хорошо документированным, поэтому я думаю, что таблица продуктов WooCommerce стоит своей цены, которая ...

Откройте для себя также несколько премиальных плагинов WordPress  

Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. HBook

HBook — это Расширение WordPress что позволит вам легко создать решение для онлайн-бронирования на вашем веб-сайте.

Он идеально подходит для всех, кто ведет бизнес в гостиничном секторе (отели, апартаменты для отдыха, кемпинги и т. Д.).

Узнайте также наш 5 WordPress плагины для публикации содержимого вашего блога

с Плагин Wordpress HBook, вы сможете добавить календари доступности, прайс-листы и формы бронирования на свой веб-сайт всего за несколько секунд.

скачать | Демонстрация | веб-хостинг 

2. WooCommerce Tabs Pro: дополнительные вкладки для страницы продукта

Ce Плагин Wordpress предоставляет вам неограниченное количество дополнительных вкладок на странице продукта.

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

скачать | Демонстрация | веб-хостинг

3. Многоуровневый плагин перенаправления WooCommerce

Этот плагин WooCommerce позволяет вашим партнерам зарабатывать кредитные очки, если их подписчики покупают ваши продукты в существующем интернет-магазине.

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

Откройте для себя тоже Как добавить выпадающую контактную форму в ваш глобальный заголовок

Это многоуровневая партнерская система WooCommerce, выходящая за рамки типичной системы партнерских транзакций.

скачать | Демонстрация | веб-хостинг

Другие рекомендуемые ресурсы

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

• 9 WordPress темы для создания веб-сайт продаж продуктов био
• 6 CDN сервисы для повышения скорости вашего блога WordPress 
• Как создать свою партнерскую программу с WP Affiliate PlatForm
• Как вручную обновить ваши плагины WordPress

Заключение

Вот и все! Вот именно для этого урока. Я надеюсь, что вы сможете создавать сетки продуктов WooCommerce на WordPress. не стесняйтесь поделитесь советом с друзьями в социальных сетях.

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

А пока расскажите о своем Комментарии и предложения в специальном разделе.

...