Как создать красивую страницу магазина WooCommerce (за 5 шагов)

Ищете самый простой способ настроить страницу магазина WooCommerce?

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

Поэтому вам может быть интересно, как использовать эти элементы для создания страницы магазина WooCommerce, которая стимулирует конверсии.

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

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

Оглавление:

1. Разместите блок «Все товары».
2. Добавьте блоки рекомендуемых продуктов и/или отобранных продуктов
3. Включить поиск товара на странице магазина
4. Используйте блоки избранных категорий
5. Добавить возможность фильтровать товары по цене

Как настроить страницу магазина WooCommerce с помощью блоков

Для начала вам нужно открыть редактор страницы магазина вашего магазина. Затем следуйте этим инструкциям, чтобы настроить его содержимое.

1. Разместите блок «Все товары».

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

С WordPress и WooCommerce у вас есть полный контроль над тем, какие элементы включать на страницу вашего магазина. Внешний вид этой страницы будет зависеть от используемой вами темы и от того, как вы ее настроите.

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

Откройте эту страницу в редакторе блоков, и вы должны увидеть что-то вроде этого:

По умолчанию страница « Магазин » содержит блок « Все товары » и заголовок. Если вы не видите этот блок, вы можете добавить его на страницу, нажав на плюсик (+) и выбрав его из списка вариантов:

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

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

2. Добавьте блоки рекомендуемых продуктов и/или отобранных продуктов.

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

После того, как вы разместите этот блок на своей странице, вам нужно будет выбрать продукт, который вы хотите показать, и нажать « Готово »:

Затем WooCommerce отобразит изображение продукта, название, цену, описание и призыв к действию (CTA). Блок должен выглядеть примерно так:

Затем вы можете настроить этот блок по своему вкусу. Например, вы можете изменить изображение и изменить кнопку CTA.

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

Альтернативой блоку Featured Products является опция Hand-Picked Products . Этот блок позволяет выбрать несколько товаров и отобразить их рядом. Он использует тот же стиль, что и блок All Products :

Блоки Featured Products и Hand-Picked Products выполняют схожие задачи. В идеале вы должны выбрать один из двух вариантов, чтобы не перегружать посетителей слишком большим количеством рекомендуемых элементов. Мы также рекомендуем размещать эти блоки вверху страницы, чтобы пользователи не могли их пропустить.

3. Включите поиск товаров на странице магазина.

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

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

Вот как выглядит функция поиска WooCommerce:

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

4. Используйте блоки избранных категорий

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

Начните с добавления блока Featured Category на страницу вашего магазина WooCommerce. Затем выберите категорию продукта, которую хотите выделить, и нажмите « Готово »:

Вот как будет выглядеть блок Featured Category :

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

Поскольку блок Featured Product Category очень простой, мы рекомендуем вам изучить плагины, такие как Otter Blocks, для дальнейшей настройки.

С Otter Blocks вы можете изменять блоки WooCommerce, добавляя анимацию и другие настройки видимости:

Кроме того, Otter Blocks добавляет множество новых блоков, которые вы можете использовать в своем интернет-магазине. К ним относятся такие параметры, как всплывающие окна (которые идеально подходят для сбора подписок по электронной почте) и обзоры продуктов.

5. Добавьте возможность фильтровать товары по цене.

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

Блок « Фильтровать товары по цене » позволяет покупателям делать именно это. В блоке отображается ползунок, который позволяет покупателям устанавливать минимальную и максимальную цены на товары, которые они хотят видеть:

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

Когда вы вносите изменения в ползунок цены, блок « Все продукты » обновляется, чтобы отображать продукты, соответствующие критериям. Это происходит без необходимости перезагрузки страницы пользователями.

Что касается размещения, мы рекомендуем вам добавить блок « Фильтровать товары по цене » над каталогом товаров. Таким образом, пользователи увидят его, прокручивая страницу вниз.

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

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

Настройте свою страницу магазина WooCommerce сегодня

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

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

У вас есть вопросы о том, как создать страницу магазина WooCommerce с помощью блоков? Дайте нам знать в комментариях ниже!