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

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

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

С правильными инструментами настраиваемые поля WooCommerce также не должны быть сложными. Хотя вы, безусловно, можете использовать код для вставки настраиваемых полей, Elementor предлагает более простой способ работы с настраиваемыми полями, который позволяет вам делать все из визуального интерфейса Elementor.

В этом посте мы расскажем все, что вам нужно знать о настраиваемых полях WooCommerce, включая следующее:

• Более глубокий взгляд на то, что такое настраиваемые поля WooCommerce и как они помогают улучшить ваш магазин.
• Различные типы настраиваемых полей, которые вы можете добавить в WooCommerce.
• Когда использовать настраиваемые поля WooCommerce по сравнению с атрибутами/таксономиями продукта.
• Как создать настраиваемые поля WooCommerce на бэкенде.
• Как отображать настраиваемые поля в интерфейсе вашего магазина с помощью Elementor Pro или пользовательского кода.

Давайте начнем!

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

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

Вот где настраиваемые поля могут быть полезны.

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

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

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

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

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

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

Давайте рассмотрим их более подробно.

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

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

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

Вот пример добавления некоторых настраиваемых полей в бэкэнд:

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

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

1. Создавайте специальные поля ввода, что упрощает добавление информации и обновление информации в будущем.
2. Отображайте информацию именно там, где вы хотите ее разместить. Вы можете разместить его в любом месте на странице вашего продукта. А с Elementor вам даже не нужно знать какой-либо код, чтобы сделать это.
3. Отформатируйте информацию, как хотите. Например, вы можете добавить цвета, чтобы привлечь внимание, границы и т. д.

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

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

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

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

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

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

• Атрибуты/таксономии — вы используете их для группировки продуктов, что-то вроде категории. Ваши покупатели могут использовать эту информацию, чтобы отфильтровать все продукты с определенным атрибутом. WooCommerce по умолчанию уже включает две таксономии — категории продуктов и теги — но вы можете использовать атрибуты для добавления неограниченного количества пользовательских таксономий.
• Пользовательские поля — вы используете их для хранения информации, уникальной для каждого отдельного продукта. Товары не группируются вместе по информации настраиваемого поля.

Давайте посмотрим на некоторые примеры того, когда использовать каждый…

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

Для этого варианта использования вы хотели бы использовать атрибут продукта (таксономию). Это сгруппирует разные товары по назначенному им цвету и позволит покупателям фильтровать их. Например, просмотр всех зеленых рубашек.

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

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

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

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

Работа с настраиваемыми полями WooCommerce состоит из двух частей:

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

В этом первом разделе мы собираемся показать вам, как создавать настраиваемые поля WooCommerce в бэкэнде. Затем, в следующем разделе, мы рассмотрим, как их отображать.

То, как вы создаете свои настраиваемые поля, зависит от того, хотите ли вы отображать дополнительные поля данных о продукте или хотите ли вы отображать настраиваемые поля ввода. Пройдемся по обоим…

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

• Расширенные настраиваемые поля (ACF)
• Набор инструментов
• стручки
• Мета бокс

У нас есть подробное сравнение ACF, Toolset и Pods, если вы хотите узнать больше об этих предложениях, но мы собираемся использовать ACF для этого примера, поскольку он популярен, свободен и гибок. Тем не менее, одна и та же основная идея будет верна для всех плагинов.

Для начала установите и активируйте бесплатный плагин Advanced Custom Fields с сайта WordPress.org. Затем перейдите в « Пользовательские поля» → «Добавить новое », чтобы создать новую «Группу полей».

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

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

Во-первых, установите тип публикации равным Product . Если вы хотите отображать эти настраиваемые поля во всех своих продуктах, это все, что вам нужно сделать:

Если вы хотите отображать эти настраиваемые поля только для определенных продуктов (например, продуктов в определенной категории), вы можете добавить дополнительные правила по мере необходимости. Например, вот как выглядит таргетинг на товары в категориях «Одежда» или «Декор»:

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

Например, вот три настраиваемых поля для сбора…

1. Имя дизайнера.
2. Год, когда дизайнер создал дизайн.
3. Заявление о дизайне от дизайнера.

Как только вы будете довольны тем, как все выглядит, опубликуйте свою группу полей.

Теперь, когда вы редактируете продукт, вы увидите эти новые настраиваемые поля в интерфейсе редактирования продукта:

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

Но сначала — давайте поговорим о другом типе настраиваемых полей WooCommerce — настраиваемых полях ввода продукта.

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

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

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

• Официальный плагин WooCommerce Product Add-Ons — 49 долларов.
• Расширенные поля продукта — условно-бесплатно

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

Установив плагин, вы можете перейти в « Продукты» → «Дополнения », чтобы создать настраиваемые поля ввода, которые вы хотите отображать в некоторых/всех ваших продуктах.

Как и при настройке ACF, вы можете настроить таргетинг полей на все продукты или только на определенные категории продуктов.

Вы также можете добавить столько полей, сколько необходимо, и выбирать из разных типов полей.

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

Например, вы можете взимать дополнительные 5 долларов, если покупатель хочет добавить индивидуальную гравировку/сообщение:

У вас также есть возможность добавлять настраиваемые поля ввода непосредственно к продуктам, когда вы работаете в редакторе продуктов. Вы можете сделать это на новой вкладке « Дополнения » в поле « Данные о продукте»:

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

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

Здесь мы покажем вам два варианта:

1. Элементор
2. Пользовательский код через файл functions.php

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

Для начала перейдите в « Шаблоны» → «Конструктор тем» и создайте новый шаблон отдельного продукта.

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

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

На следующем экране щелкните значок гаечного ключа и используйте раскрывающийся список « Ключ », чтобы выбрать точное настраиваемое поле, которое вы хотите отобразить:

Вы также можете использовать дополнительные параметры для добавления статического текста до/после информации из настраиваемого поля.

Вот и все! Elementor теперь будет динамически извлекать данные настраиваемого поля для продукта, который вы просматриваете.

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

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

Чтобы узнать больше об этой функции, вы можете прочитать наше полное руководство по динамическому контенту в Elementor Pro.

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

Если вы создали настраиваемые поля ввода продукта с помощью одного из вышеперечисленных плагинов (например, официального плагина Product Add-Ons, о котором мы упоминали), эти плагины обычно автоматически отображают эти поля во внешнем интерфейсе вашего магазина, поэтому вы не будете необходимо вручную включить их в свои шаблоны Elementor.

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

Если вы разбираетесь в коде, вы также можете добавить настраиваемые поля WooCommerce на страницу продукта, используя файл functions.php вашей дочерней темы или плагин, например Code Snippets. Однако мы не рекомендуем этот метод для большинства людей, поскольку он сложен.

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

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

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

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

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

Затем вы можете использовать фрагмент кода, как показано ниже, для отображения поля, где insert_hook_location — это местоположение хука, которое вы хотите использовать, а field_name — это слаг имени поля из ACF:

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

Вот как это может выглядеть на интерфейсе вашего магазина:

Вы можете повторить процесс, чтобы отобразить дополнительные настраиваемые поля.

Понимание того, как использовать настраиваемые поля WooCommerce, действительно полезно для создания настраиваемых оптимизированных магазинов WooCommerce.

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

Чтобы создать настраиваемые поля для дополнительных данных о продукте, вы можете использовать плагин, такой как Advanced Custom Fields (ACF), в то время как для настраиваемых полей ввода требуется специальный плагин надстроек продукта.

Затем, чтобы проще всего отобразить эти настраиваемые поля в интерфейсе вашего магазина, вы можете использовать Elementor и Elementor WooCommerce Builder. С Elementor вы можете создавать свои собственные настраиваемые шаблоны продуктов, которые включают неограниченную динамическую информацию из ваших настраиваемых полей — код не требуется.

У вас остались вопросы о том, как использовать настраиваемые поля WooCommerce в вашем магазине? Оставьте комментарий и дайте нам знать!