WooCommerce — это популярный плагин электронной коммерции для WordPress, позволяющий продавать товары/услуги на вашем сайте. По умолчанию заголовки товаров WooCommerce имеют один цвет. Однако с помощью Elementor можно создать два цвета для заголовков товаров. Это может стать отличным способом выделить конкретные товары или создать более привлекательную страницу товара.
Шаги по созданию двух разных цветов для заголовков продуктов WooCommerce с помощью Elementor
Шаг 1: Создание пользовательских полей с помощью ACF
Сначала создайте пользовательские поля для размещения текста. Мы будем использовать текст в качестве заголовков товаров WooCommerce. ACF — один из плагинов для создания пользовательских полей, который поддерживает эту функцию.
После загрузки и установки плагина ACF в WordPress откройте плагин и создайте новую группу полей, нажав кнопку Add New. После этого вы можете задать группе полей любое имя.
Затем добавьте два поля в группу полей. Установите тип поля «Текст», добавьте метку для каждого поля, а затем установите группу полей для отображения в продукте WooCommerce. В данном примере мы добавим 1-й цвет для метки первого поля и 2-й цвет для метки второго поля (см. рисунок ниже).
После создания пользовательских полей перейдите в блок «Настройки» и присвойте группе пользовательских полей значение «Продукт».
Примените изменения, нажав кнопку Save Changes (Сохранить изменения).
Шаг 2: Создание или редактирование продукта WooCommerce
Хорошо, теперь мы переходим к следующему шагу. Мы добавим название продукта в только что созданную группу полей (первое и второе поля).
На приборной панели WordPress перейдите в раздел Products, чтобы создать новый продукт или выбрать существующий.
Войдя в редактор WooCommerce Product, прокрутите страницу вниз и найдите группу полей, которую вы только что создали, затем добавьте названия в поля ввода. В данном примере наш товар состоит из трех слов «Willy White Blouse». Мы добавляем «Willy» в первое поле и «White Blouse» во второе поле.
После добавления названия продукта в поля не забудьте обновить или опубликовать продукт WooCommerce, нажав кнопку Обновить или Опубликовать.
Шаг 3. Создание или редактирование шаблона Elementor Single Product
Ну что ж, мы переходим к последнему шагу этого руководства. Здесь мы воспользуемся конструктором тем Elementor Theme Builder для создания шаблона WooCommerce Single Product. Конструктор тем доступен только в Elementor Pro, поэтому убедитесь, что вы уже обновили версию до pro.
На приборной панели WordPress перейдите в раздел Templates -> Theme Builder. Войдя в окно Theme Builder, перейдите на вкладку Single Product, создайте новый шаблон для одного товара или выберите существующий.
Попав в редактор Elementor, настройте и оформите шаблон для одного товара по своему вкусу.
Далее мы сделаем несколько изменений, как показано ниже:
- Удаление заголовка товара
Если в шаблоне одного товара имеется виджет «Заголовок товара», то сначала необходимо удалить его.
- Добавление виджетов заголовков
Далее добавьте два виджета заголовков в шаблон одного товара, чтобы заменить функцию виджета Product Title, который используется для отображения названий товаров. Замените текст и установите HTML-тег H1 для каждого виджета заголовка. Чтобы два виджета заголовков располагались в линию (рядом друг с другом), установите ширину каждого виджета в значение Inline. Эту опцию можно найти на вкладке Advanced блока настроек Layout.
После этого можно настроить виджеты Хединга, например, размер, типографику, цвет текста и т.д. Не забудьте настроить пространство между первым виджетом Heading и вторым виджетом. В данном примере мы добавляем 7px правого поля к первому виджету.
- Установка заголовка к полю ACF
Настало время установить динамический тег заголовка заголовка к созданному ранее полю ACF.
На виджете Heading перейдите к заголовку Title, затем щелкните на пиктограмме Dynamic Tags. Прокрутите страницу вниз, чтобы найти опцию ACF Field, и щелкните на ней.
После этого щелкните на значке гаечного ключа (🔧), затем выберите свое поле (первый заголовок — для первого поля ACF, второй виджет Heading — для второго поля ACF).
Вот и все. Теперь заголовки товаров WooCommerce имеют два разных цвета. Не забудьте обновить или опубликовать шаблон Single Product после завершения работы.
(Бонус) Динамическое создание двух разных цветов для заголовков продуктов WooCommerce
В этом бонусном разделе рассматривается продвинутая технология, позволяющая динамически создавать два разных цвета для заголовков товаров WooCommerce. Это означает, что у вас есть возможность выбирать цвета для заголовков товаров непосредственно перед их публикацией в редакторе товаров WooCommerce.
Примечание: Прежде чем продолжить этот урок, пожалуйста, следуйте пошаговой инструкции по созданию двух цветов для заголовков товаров Woo Commerce с помощью Elementor, приведенной выше.
Шаг 1: Добавление двух дополнительных пользовательских полей
Сначала необходимо добавить еще два пользовательских поля в группу полей, которую вы создали ранее. Но на этот раз в виде типа Color Picker.
Перейдите в группу полей и добавьте новые поля, нажав кнопку Add Field. Затем добавьте метку и установите для каждого поля тип Color Picker.
После добавления полей не забудьте применить изменения, нажав кнопку Save Changes.
Шаг 2: Установка цвета текста виджетов заголовков в динамический режим
В этом шаге мы установим динамический цвет текста для двух виджетов заголовков, которые вы добавили в шаблон Single Product.
Перейдите в шаблон Single Product, затем перейдите к настройкам заголовков. На вкладке Style перейдите к опции Text Color, затем установите ее на dynamic, щелкнув на значке Dynamic Tags. После щелчка на значке Dynamic Tags появится опция ACF Color Picker Field, щелкните на ней.
После этого щелкните на значке гаечного ключа (🔧), затем выберите поле выбора цвета (первый виджет Heading — в первое поле выбора цвета ACF, второй виджет Heading — во второе поле выбора цвета ACF).
Примените изменения к шаблону Single Product, нажав кнопку UPDATE.
Шаг 3: Настройка цвета заголовка товара WooCommerce
Пришло время задать два разных цвета для заголовка продукта WooCommerce.
Отредактируйте один из своих продуктов WooCommerce и вы увидите, что теперь в группе полей есть четыре поля. Перейдите к полям Color Picker, а затем, нажав кнопку Select Color, установите два цвета для своего продукта WooCommerce.
После того как вы установили два разных цвета для заголовка, не забудьте нажать кнопку Update, чтобы применить изменения. Вы можете просмотреть продукт, чтобы увидеть результат.
Итог
В этом уроке мы показали, как с помощью Elementor можно статически или динамически создавать два цвета для заголовков товаров WooCommerce. Это отличный способ добавить визуальный интерес к страницам товаров и сделать их более заметными. Благодаря простым, но эффективным шагам этого руководства вы научились реализовывать эту функцию без ввода кода. Использование этих приемов позволит вам создать более интересную и динамичную презентацию товара, что в конечном итоге приведет к повышению вовлеченности клиентов и потенциальному росту продаж.