¿Cómo combinar los colores de tu tienda WooCommerce con Divi?

Publicado el 13/05/2019 | 6 comentarios

¿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 al color de acento del tema
Changer les boutons de couleur WooCommerce et Divi

Anuncio: 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

Couleur de base - WorCommerce et Divi

Como puedes ver en la captura de pantalla anterior: así se ve 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 carrito 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!!!

Así que aquí está cómo cambiar el color de la mayoría de los botones/notificadores de WooCommerce en un solo clic:

Couleur d'accent du thème Divi
  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 tendrán el mismo color. Esto ayuda a unificar el 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 a la cesta permanecerá azul por el momento, al pasar el ratón por encima.
  5. Y la insignia de promoción, seguirá siendo naranja también.

2 - Cambiar el color de los botones hover

Bouton au survol - Divi et WooCommerce

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

  1. Ir a la Apariencia > Personalizar > Botones > Estilo del botón Hover. Establece el color del texto al pasar el ratón por encima.
  2. Ahora el texto hover obtiene el color deseado.
  3. El distintivo de promoción es siempre naranja. Veremos cómo cambiarlo a continuación.
plus de ressources pour Divi

3 - Cambiar el color de la insignia de promoción de WooCommerce

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

Changer la couleur du badge promo Divi et WooCommerce
  1. Ir a la pestaña Apariencia > Personalizar > CSS adicional.
  2. Introduzca el código siguiente.
  3. El color de la insignia de promoción se personaliza!
/* 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?

couleur différence de la couleur d'accent du thème

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

Hay que pegar el siguiente código 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;
 }

Aquí también querrás considerar cambiar el código de colores por el tuyo propio.

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

También te gustará :

Changer la couleur des boutons WooCommerce
Harmoniser la couleur de la boutique avec la charte graphique

618 palabras

2

A ti también te debería gustar:

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

6 Commentaires

  1. audrey PUYBONNIEUX

    Bonjour, j’ai regardé pour faire mon changement de couleur d’accent du thème mais je pense avoir la dernière version de DIVI. donc j’ai rien pour le changer dans la manière que vous l’expliquer comment faire dans ce cas et dans quelle ligne mon css faut faire les changement;
    merci à voua d si vous pouvez m’aider.
    Audrey

  2. Lycia Diaz

    Salut Audrey, tu dois inspecter le code CSS dans ton navigateur pour trouver quelle est la ligne à changer.

  3. Broggini

    Bonjour,

    je ne sais pas si je suis dans la bonne section.

    Je post ici mon problème:

    J’utilise le layout ‘Nutritionnist’ pour mon site que je personnalise. Il n’y a pas de page SHOP dans ce layout.
    Donc j’utilise un autre layout qui possède une page SHOP.

    Seulement cette page SHOP ne se met pas en fullWidth comme convenu.

    J’ai essayé plusieurs possibilités, ajout de code CSS, parametrages dans les options de theme, mais rien n’y fait.

    Auriez-vous une solution?

    Merci à vous 🙂

    Damien

  4. Lycia Diaz

    Salut Damien,
    Tu dois vérifier le dimensionnement, soit des sections, soit des rangées. Tu dois mettre à 100% au lieu de 80% et mettre la largeur à 2500px au lieu de 1080px. Ça se passe dans les réglages des sections ou des rangées à l’onglet Styles > Dimensionnement ou Styles > Espacement.

  5. sanchez

    Bonjour Lycia,
    je recherche une manière de changer la forme des boutons, auriez-vous une solution?

  6. Lycia Diaz

    Ça ne fonctionne pas si tu personnalises tes boutons depuis l’onglet Apparence > Personnaliser > Boutons ?

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto