Saltar al contenido principal

Cómo agregar texto en un producto WooCommerce en Divi

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

En una previa tutoriel, nous usted introdujo Divi. Para aquellos que no saben, divi es un tema premium de WordPress diseñado por el equipo Elegante Temas que ofrece varios servicios en WordPress y diseña complementos y temas.

Divi es un tema receptivo y este último es compatible con muchos otros complementos entre otros que tenemos WooCommerce. Hoy, le mostraremos cómo dar una animación diferente a sus productos WooCommerce.

A veces, el estilo de WooCommerce puede ser un poco inadecuado, especialmente si su estilo CSS es un poco diferente. Este tutorial, que será un poco técnico (un poco de CSS y nada), te permitirá arreglarlo.

Otros tutoriales sobre el tema Divi

Vamos a empezar.

Modificar un icono para texto sobre el mouse

De forma predeterminada, cuando usa WooCommerce con Divi y pasa el cursor sobre un producto, ve un pequeño ícono "+" que es una fuente (make-icono) propuesto por Divi y que dice lo siguiente:

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 554.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Es muy fácil cambiar eso para un ícono diferente en la configuración, pero si quieres agregar un texto, ¿eso es otra cosa? Voy a mostrarle cómo lograr esto con los fragmentos de código CSS de hoy, y también incluiré un código opcional para agregar a su sitio.

Esto es lo que tendremos una vez completado:

¿Por qué usar texto en lugar de un ícono de todos modos?

Puedo pensar en algunas razones que pueden hacer que hagas esto:

Para definir, dale un aspecto único a tu tienda: Cualquier cosa que puede hacer para distinguir su sitio Divi / WooCommerce otro es siempre una buena cosa.

Usar palabras como "Ver" o "Comprar" puede dar como resultado más conversiones: Todos deben hacer lo mejor para su sitio web, y puede aprovechar las pruebas A / B integradas en Divi para ayudar con eso.

Crea fácilmente tu blog con SiteGround

SiteGround le permite crear su blog de WordPress en unos pocos clics. Nombre de dominio gratis, alojamiento seguro, SSL, transferencia y mucho más ... [Recomendado]

Fuente de inspiración

Hace poco navegué por un sitio que tenía texto sobre el producto suspendido. Por supuesto, he visto otros sitios de comercio electrónico que tienen palabras en lugar de iconos en el producto, por lo que no era un concepto nuevo. Nunca tuve que hacer esto en un tema Divi, y cuando lo vi, me planteé un desafío y me di cuenta de que de hecho es fácil implementar esto. Con muy poco código necesario, está seguro de no afectar el rendimiento de su blog.

Implementando el mouse sobre el texto

Paso 1: la superposición de color

Primero cambiaremos el color de la superposición de superposición estacionaria. Esto es extremadamente fácil de hacer en Divi. En el módulo de tu tienda Ve a la pestaña « parámetros avanzados de diseño avanzado Y selecciona tu color

Paso 2: Agregar CSS

El siguiente código CSS en " Opciones de tema> CSS personalizado O en la hoja de estilo del tema de su hijo.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

.woocommerce .et_overlay: before {left: 0; margin-left: 0; contenido: 'vista'; / *** Su texto aquí *** / font-family: 'Pro-Free Source', Arial! / *** Elija su fuente *** / text-transform: mayúscula; tamaño de letra: 24px; color: #fff; / *** Establecer el color del texto *** / font-weight: bold; text-align: center; ancho: 100%; relleno: 5px 0; }

Si desea que sus productos sean bastante redondos, puede agregar este código opcional:

.woocommerce ul.products li.product un img, .et_overlay {border-radius: 50%; }

Es todo !

Ahora puede visitar su tienda y ver cómo se toman en cuenta sus cambios.

Otros tutoriales de Divi

Este artículo contiene los comentarios 4

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
11 acciones
cuota6
Tweet1
Guardar4
WhatsApp