¿Cómo puedo combinar el color de mi tienda WooCommerce con Divi?

¿Acabas de añadir una tienda online a tu sitio Divi y te das cuenta de que los botones de WooCommerce son de un azul terrible? No te preocupes, en este artículo te explicaré rápidamente cómo conseguir una tienda que se ajuste a tu diseño gráfico...

Aquí está el programa:

1. Cambiar el color de acento del tema
2. Cambiar el color de los botones hover
3. Cambiar el color de la insignia de promoción de WooCommerce
4. Utilizar un color diferente del color de acento del tema

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - Cambiar el color de acento del tema

Como puedes ver en la captura de pantalla anterior, este es el aspecto de un listado de productos en una tienda online creada con WooCommerce y Divi. Si no cambia nada, su producto tendrá este aspecto:

1. El Notificación de WooCommerce tendrá un fondo azul
2. El botón Ver cesta se escribirá en azul
3. El insignia promocional será de color naranja
4. El precio del producto será azul
5. El botón Añadir a la cesta también será azul.

¡¡¡Y ese azul, supongo que todos lo odiamos!!!

A continuación te explicamos cómo cambiar el color de la mayoría de los botones/notificadores de WooCommerce en un solo clic:

1. Ir a la pestaña Apariencia > Personalizar > Ajustes generales > Ajustes de diseño. Establezca el color de acento de su tema. Esto significa que muchos elementos de su sitio web tendrán el mismo color. Esto ayuda a mantener la coherencia del diseño de su sitio y también funcionará para su tienda.
2. De esta manera, la notificación de WooCommerce tomará el color de acento de su tema.
3. El precio del producto también.
4. Sin embargo, el botón de añadir al carrito seguirá siendo azul por el momento, al pasar el ratón por encima.
5. Y el distintivo de promoción también seguirá siendo naranja.

2 - Cambiar el color de los botones hover

Para cambiar el color del botón Añadir a la cestacuando el ratón pasa por encima:

1. Ir a la pestaña Apariencia > Personalizar > Botones > Estilo del botón Hover. Establece el color del texto del ratón.
2. Ahora el texto flotante tiene el color deseado.
3. El distintivo de promoción es siempre naranja. Veremos cómo cambiarlo a continuación.

3 - Cambiar el color de la insignia promocional de WooCommerce

No hay opción de cambiar el color de fondo de la insignia promocional. Tendrás que hacerlo en CSS :

1. Ir a la pestaña Apariencia > Personalizar > CSS adicional.
2. Introduzca el código siguiente.
3. El color de la insignia promocional se puede personalizar.

/* changer la couleur du badge promo woocommerce */

 .woocommerce span.onsale, .woocommerce-page span.onsale {
     background: #974df3 !important;
 }

Por supuesto, cambiará el código de colores para utilizar el suyo propio.

4 - Utilizar un color diferente del color de acento del tema

¿Qué pasa si quieres usar un color diferente para tu tienda WooCommerce que el color de acento del tema Divi?

Esto es muy posible. En este caso tendrás que personalizar tu tienda WooCommerce completamente con CSS.

El siguiente código debe ser pegado en la ficha Apariencia > Personalizar > CSS adicional.

/* customiser WooCommerce avec Divi */

 .woocommerce a.button, .woocommerce a.button.alt, .woocommerce a.button.alt:hover, .woocommerce a.button:hover, .woocommerce-page a.button, .woocommerce-page a.button.alt, .woocommerce-page a.button.alt:hover, .woocommerce-page a.button:hover, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce-page button.button, .woocommerce-page button.button.alt, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .woocommerce-page button.button:hover, .woocommerce-page button.button.alt:hover {
     color: #974df3 !important;
 }

 .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message {
   color: #974df3 !important;
     background: #974df3 !important;
 }

 .woocommerce .woocommerce-message {
     color: #ffffff!important;
 }

 .entry-summary p.price ins {
     color: #974df3 !important;
 }

 .woocommerce span.onsale, .woocommerce-page span.onsale {
     background: #974df3 !important;
 }

En este caso, también debería considerar la posibilidad de cambiar el código de colores por el suyo propio.

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.

También te gustará :

• Obtenga un color diferente en cada página de su sitio Divi
• Consigue un fondo que cambia de color automáticamente