Saltar al contenido principal

Cómo agregar texto en un producto WooCommerce en Divi

Divi: el tema de WordPress más fácil de usar

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

más 600.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]

En un tutorial anterior, nosotros introdujiste a 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 complementos y temas de diseño.

Divi es un tema receptivo y este último es compatible con varios otros complementos, entre otros, 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 inapropiado, especialmente si su estilo CSS es un poco diferente. Este tutorial, que será un poco técnico (un poco de CSS y nada más), te permitirá arreglarlo.

Otros tutoriales sobre el tema Divi

Vamos a empezar.

Modificando un icono para texto sobre el mouse

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

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

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

Esto es lo que habremos completado una vez:

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

Se me ocurren algunas razones que pueden obligarlo a hacer esto:

¿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]

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

El uso de una palabra como "Ver" o "Comprar" puede generar más conversiones: Todos deben hacer lo mejor para su sitio web, y usted puede aprovechar las pruebas A / B integradas en Divi para ayudar con eso.

Fuente de inspiración

Recientemente navegué por un sitio que tenía texto sobre el producto flotando. Por supuesto, he visto otros sitios de comercio electrónico que tienen palabras en lugar de iconos en el producto que se cierne, por lo que no era un concepto nuevo. Nunca tuve que hacer esto en un tema Divi, y cuando vi eso, me planteé un desafío y me di cuenta de que es realmente fácil implementar esto. Con muy poco código necesario, seguramente 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 su tienda Vaya 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. [Recomendado]

.woocommerce .et_overlay: before {left: 0; margen izquierdo: 0; contenido: 'ver'; / *** Su texto aquí *** / font-family: 'Fuente sin Pro', Arial! / *** Elija su fuente *** / text-transform: mayúscula; tamaño de fuente: 24px; color: #fff; / *** Establecer el color del texto *** / font-weight: bold; alinear texto: centro; 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 tienen en cuenta sus cambios.

Otros tutoriales de Divi

Este artículo contiene los comentarios 5

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
10 acciones
cuota6
Tweet
Siguiente 4