Пропустить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Зачем использовать текст вместо значка?

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

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

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

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

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

Выполнение мыши над текстом

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

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

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

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

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

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

.woocommerce .et_overlay: before {left: 0; margin-left: 0; content: 'view'; / *** Ваш текст здесь *** / font-family: «Pro-Free Source», Arial! / *** Выберите шрифт *** / text-transform: uppercase; font-size: 24px; цвет: #fff; / *** Установите цвет текста *** / font-weight: bold; text-align: center; width: 100%; padding: 5px 0; }

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

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

Вот так!

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

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

Эта статья содержит комментарии 5
  1. Отличная статья, спасибо за этот совет. И если нам нужен другой текст для каждого продукта, как нам это сделать?

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

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

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

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