Как динамически добавить строку кода купона на определенные страницы продукта с помощью Divi

Когда вы запускаете интернет-магазин, созданный с помощью Divi и WooCommerce, вам иногда нужно показывать коды купонов на своем веб-сайте, чтобы усилить ощущение срочности. В Интернете вы заметите, что многие интернет-магазины размещают коды купонов в строке, которая прикреплена к верхней части страницы. Теперь, с помощью Divi Theme Builder, вы можете автоматически добавлять такую ​​строку кода купона к продуктам, на которые распространяется код купона.

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

Давайте приступим к делу!

Предварительный просмотр

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

Рабочий стол

Мобильный

Загрузите шаблон страницы продукта БЕСПЛАТНО

Чтобы получить доступ к шаблону страницы продукта, вам сначала необходимо загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Обзор учебного пособия

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

1. Создайте новую категорию товаров со скидкой.

Перейдите в категории продуктов и добавьте новую категорию продуктов со скидкой

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

2. Назначьте продукты новой категории скидок.

Редактировать продукт

Затем откройте продукты, которые хотите включить в распродажу.

Назначьте товары новой категории скидок

И включите их в новую категорию дисконтных товаров.

3. Создайте код купона WooCommerce.

Перейти к купонам и добавить новый купон

Следующая часть этого руководства посвящена созданию нового кода купона. Перейдите в панель управления WordPress> Купоны> и нажмите «Создать свой первый купон» .

Добавить код купона и данные купона

Добавьте код купона вверху и выберите общие настройки, которые вы хотите применить к коду купона.

• Код скидки: Добавьте код скидки
• Тип скидки: Процентная скидка
• Сумма купона: добавить процент
• Дата истечения срока действия купона: Выберите дату

Добавить ограничение использования

Затем перейдите к ограничению использования и убедитесь, что код купона работает только с продуктами в вашей категории товаров со скидкой.

• Категории товаров: Скидка

4. Добавьте новый шаблон для категории скидки.

Добавить новый шаблон

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

Использовать на

Используйте этот новый шаблон для категории товаров со скидкой.

• Использование: продукт в определенной категории продукта: скидка

5. Повторно используйте тело глобальной страницы продукта для нового шаблона.

Перетащите тело шаблона продукта в тело нового шаблона

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

6. Добавьте верхнюю строку кода купона в тело нового шаблона.

Войти в редактор шаблонов тела

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

Добавить новый раздел в начало

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

Фоновый цвет

Откройте настройки раздела и измените цвет фона.

• Цвет фона: # e02b20

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Анимация

Завершите настройки раздела, добавив анимацию.

• Стиль анимации: слайд
• Направление анимации: вниз
• Продолжительность анимации: 1500 мс
• Задержка анимации: 1000 мс
• Начальная непрозрачность анимации: 100%
• Кривая скорости анимации: легкость выхода
• Повтор анимации: один раз

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:

Размеры

Откройте настройки строки и позвольте строке занять всю ширину контейнера раздела.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Столбец 1

Интервал

Затем откройте настройки столбца 1 и добавьте верхний и нижний отступы.

• Верхний отступ: 25 пикселей
• Нижний отступ: 25 пикселей

Колонка 2

Фоновый цвет

Откройте также настройки столбца 2 и добавьте белый цвет фона.

• Цвет фона: #ffffff

Интервал

Также добавьте к этому столбцу некоторые пользовательские отступы сверху и снизу.

• Верхний отступ: 20 пикселей
• Нижний отступ: 20 пикселей

Граница

И включите некоторые радиусы верхней левой и правой границы.

• Верхний левый + верхний правый: 30 пикселей

Добавить текстовый модуль в столбец 1

Добавить содержимое

Первый и единственный модуль, который нам нужен в столбце 1, - это текстовый модуль. Введите какую-нибудь копию по вашему выбору.

Настройки текста

Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:

• Шрифт текста: Монтсеррат
• Цвет текста: #ffffff
• Размер текста: 16 пикселей
• Выравнивание текста: по центру

Добавить текстовый модуль в столбец 2

Добавить код купона в поле содержимого

Во втором столбце добавьте еще один текстовый модуль с кодом скидки, который вы добавили в первой части руководства.

Настройки текста

Измените текстовые настройки модуля следующим образом:

• Шрифт текста: Монтсеррат
• Толщина шрифта текста: толстый
• Цвет текста: # 000000
• Размер текста: 19 пикселей
• Выравнивание текста: по центру

Размеры

Затем измените настройки размера.

• Ширина: 50%
• Выравнивание модуля: по центру

Интервал

Также добавьте немного нижнего отступа.

• Нижний отступ: 10 пикселей

Граница

И завершите настройки модуля, добавив нижнюю границу.

• Ширина нижней границы: 1 пикс.
• Цвет нижней границы: # 333333

7. Сохраните изменения в построителе тем и просмотрите результат.

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

Предварительный просмотр

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

Рабочий стол

Мобильный

Последние мысли

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

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.