Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

добавить столбцы товаров woocommerce wordpress.png

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

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

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

настроить таблицу продуктов css.png

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

настройка таблицы параметров продукта. png

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

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

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

расширенная конфигурация таблиц продукта

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

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

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

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

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

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

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

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

таблица виджета woocommerce.png

Шаг 3: добавьте шорткод, где вы хотите отобразить сетку вашего продукта

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

Например:

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

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

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

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

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

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

Для веб-сайта 1 - 75 $

Для сайтов 5 Web - 135 $

Для сайтов 20 - 275 $

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

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

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

1. HBook

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

Hbook

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

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

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

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

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

Этот плагин WordPress предлагает вам неограниченное количество дополнительных вкладок на странице продукта.Дополнительные вкладки-продукт-страниц WordPress-плагин к странице-строитель

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

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

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

Многоуровневый реферальный плагин Woocommerce

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

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

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

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

Заключение

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

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

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

...

Эта статья содержит комментарии 2

  1. Привет,

    Большое спасибо за этот урок, очень ясный и точный, но можете ли вы обновить ставки для плагина "Таблица продуктов WooComerce", потому что разработчик изменил его ставки намного выше, чем рекламируется в вашей статье.
    плагин Цена:
    Персональный = 1 Сайт: 89 € / год или 269 € обновление на всю жизнь
    Бизнес = 5 Сайты: 159 € / год или 479 € обновление на всю жизнь
    Агентство = 20 Сайты: 319 € / год или 959 € обновление на всю жизнь

    Хорошая неделя

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

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
11 акции
доля8
чирикать1
Регистрация2