Пропустить

Как добавить текст в продукт WooCommerce на Divi

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

В предыдущем уроке мы ты представил Divi, Для тех, кто не знает, Divi - это тема WordPress премиум-класса, разработанная командой Элегантные темы который предлагает различные услуги на WordPress и дизайн плагинов и тем.

Divi - адаптивная тема, последняя совместима с несколькими другими плагинами, в том числе с WooCommerce. Сегодня мы покажем вам, как настроить анимацию для ваших продуктов WooCommerce.

Иногда стиль WooCommerce может быть немного неуместным, особенно если ваш стиль CSS немного отличается. Этот урок, который будет немного техническим (немного CSS и больше ничего), позволит вам это исправить.

Другие учебники по теме Divi

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

Comment ajouter une image sur un produit woocommerce

Изменение иконки для текста над мышью

По умолчанию, когда вы используете WooCommerce с Divi и наводите курсор на товар, вы видите маленький значок «+», который является шрифтом (макияж значок), предложенный Divi и заключающийся в следующем:

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Значок woocommerce по умолчанию

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

Вот что мы когда-нибудь закончим:

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Resultat final modification produit wordpress

В любом случае, зачем использовать текст вместо иконки?

Я могу подумать о некоторых причинах, которые могут заставить вас сделать это:

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

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

Источник вдохновения

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

Пример веб-сайта

Реализация мыши над текстом

Шаг 1: наложение цвета

Сначала мы изменим цвет наложения стационарного наложения. Это очень легко сделать на Divi. В вашем магазине модуль Перейти на вкладку « расширенные передовые параметры дизайна И выберите свой цвет.

Подборка цветов диви

Шаг 2: добавление CSS

Следующий код CSS в " Параметры темы> Пользовательский CSS Или в таблице стилей вашей детской темы.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

.woocommerce .et_overlay: перед {слева: 0; поле слева: 0; содержание: «просмотр»; / *** Твой текст здесь *** / font-family: 'Source Without Pro', Arial! / *** Выберите ваш шрифт *** / text-transform: uppercase; размер шрифта: 24px; цвет: #fff; / *** Установить цвет текста *** / font-weight: bold; выравнивание текста: по центру; ширина: 100%; отступы: 5px 0; }

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

.woocommerce ul.products li.product IMG, .et_overlay {границы радиус: 50%; }

Вот так!

Теперь вы можете посетить свой магазин и посмотреть, как ваши изменения принимаются во внимание.

Другие учебные пособия Divi

Эта статья содержит комментарии 5

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
10 акции
доля6
чирикать
Регистрация4