Руководство по использованию блоков Гутенберга для вашего магазина WooCommerce

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

Лучшее преимущество, которое Gutenberg предлагает по сравнению с предыдущим редактором (также называемым редактором TinyMCE), заключается в том, что он устраняет необходимость знать, как кодировать, или необходимость понимать структуру WordPress, чтобы знать, как добавить больше функций на ваш веб-сайт WordPress или WooCommerce. хранить. Если, однако, вам удобнее работать со старым редактором WordPress, вы всегда можете установить этот бесплатный плагин, известный как классический редактор от участников WordPress, который дает вам возможность полностью отключить Гутенберг или переключаться между старым редактором и Гутенбергом. . Gutenberg также предлагает блок Classic Editor, позволяющий пользователям использовать функции классического редактора в Gutenberg! Звучит слишком хорошо, чтобы быть правдой? Давайте углубимся в этот пост или, скорее, в руководство по использованию блоков Гутенберга для вашего магазина WooCommerce!

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

Существуют различные типы блоков, которые Гутенберг предоставляет для разных целей:

Хотя блоки можно использовать для создания различных страниц, как администратор WooCommerce или менеджер магазина, вы хотели бы больше всего сосредоточиться на домашней странице или странице магазина. Следовательно, для целей этого урока давайте создадим домашнюю страницу для вашего магазина, которая предназначена для увеличения ваших продаж! Для этого мы будем использовать блоки WooCommerce . Эти блоки ранее были частью функционального плагина Automattic и были объединены в WooCommerce версии 3.5.

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

• Товары по категориям
• Новейшие продукты
• Рекомендуемый продукт
• Самые продаваемые продукты
• Товары со скидкой
• Товары, отобранные вручную
• Продукты с самым высоким рейтингом
• Товары по атрибуту

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

Мы добавили продукт, известный как «Членство в магазине». Как только товар добавлен, отображается его изображение, описание и цена. Вы можете скрыть их, используя параметры на правой боковой панели. Также добавляется кнопка «Купить сейчас»; цвет, текст и URL-адрес, на который он указывает, являются редактируемыми атрибутами.

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

Вы также можете добавить класс CSS к этому изображению. Точно так же можно отредактировать кнопку «Купить сейчас»:

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

Для этого мы сначала добавим блок, известный как «Заголовок», который находится в разделе «Общие блоки»:

После добавления соответствующего заголовка, такого как «Новые поступления», мы можем продолжить и добавить соответствующий блок для него. Для обеих наших целей мы будем использовать блоки WooCommerce, известные как самые продаваемые продукты и новейшие продукты . Эти блоки снова можно найти в блоках WooCommerce. Добавим блок Newest Products .

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

Таким образом, мы добавили еще одну строку после строки рекомендуемого продукта для новых поступлений:

Далее аналогичным образом добавим товары-бестселлеры (предварительно добавив для них блок «Заголовок»):

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

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

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

На наш магазин/домашнюю страницу мы можем добавить кнопку с надписью «Обзор магазина», которая будет ссылаться на страницу магазина.

Чтобы добавить кнопку, нам нужно выбрать один из блоков Layout Elements.

Мы свяжем эту кнопку со страницей магазина.

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

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

Вот так наша страница выглядит в итоге:

Теперь просто нажмите «Настроить» (в интерфейсе, после предварительного просмотра вашей страницы), чтобы сделать ее главной страницей, и все готово! Вот как легко создать привлекательные главные страницы для вашего магазина WooCommerce с помощью Gutenberg. Исследуйте и экспериментируйте с различными блоками, которые Гутенберг может предложить, чтобы использовать его возможности по максимуму!