Astuce Divi n°55

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

Publicado el 13/05/2019 | 10 comentarios

618 palabras

2

¿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
Changer les boutons de couleur WooCommerce et Divi

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

Couleur de base - WorCommerce et Divi

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:

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

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 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.
plus de ressources pour Divi

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 :

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 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?

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

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

Changer la couleur des boutons WooCommerce
Harmoniser la couleur de la boutique avec la charte graphique
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

Comment changer une image au survol de la souris ?

¿Cómo cambiar una imagen al pasar el ratón por encima?

Si no estás usando las opciones de hover disponibles en Divi, ¡te estás perdiendo algo! Aquí tienes un ejemplo de cómo utilizarlos que te puede resultar útil. En este tutorial y vídeo, te muestro cómo cambiar una imagen al pasar el ratón por encima.

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio web? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener al usuario que pasa por su sitio en el mismo. Descubre el tutorial paso a paso + vídeo.

10 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 ?

  7. jérôme

    bonjour,
    est-il possible de choisir un dégradé de couleur au survol des boutons?
    dans apparences, seulement les couleurs uniformes sont possible.

    merci, et au passage, votre site est une ressource inestimable pour moi 😉

  8. Lycia Diaz

    Salut Jerome, en natif on ne peut pas mais avec du CSS c’est sûrement possible

  9. Heath Jansse

    This was so helpful, thank you so much for your work on this article!!! Kindly from Australia.

  10. Lycia Diaz

    Thanks !

Soumettre un commentaire

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

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