Consejo Divi n°55

¿Cómo armonizar los colores de su tienda WooCommerce con Divi?

Actualizado en 13/05/19

629 palabras

3 lectura de minutos
11 Comentarios

Este artículo contiene enlaces de afiliados reconocibles por el icono porcentaje (%) → Soy un enlace de afiliado

Acabas de añadir una tienda en línea en su sitio Divi y te das cuenta de que Botones WooCommerce son de una terrible azul ? No te preocupes, en este artículo, explico rápidamente cómo obtener una tienda en armonía con su carta gráfica

Aquí está el programa:

  1. Cambiar el color del tema
  2. Cambiar el color del botón sobrevuela
  3. Cambiar WooCommerce color de placa de promo
  4. Utilice un color diferente del tema d acento color
Cambiar los botones de color WooCommerce y Divi

1 – Cambiar el color del tema

Color básico - WorCommerce y Divi

Como se puede ver en la imagen anterior: esto es lo que parece la hoja de producto de una tienda online creada con WooCommerce y Divi. Si no cambias nada, tu producto se verá así:

  1. El notificación de WooTrade tendrá un fondo azul
  2. El botón Ver carrito será escrito en azul
  3. El promo badge será 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!

Aquí está cómo cambiar el color de la mayoría de botones WooCommerce / notificaciones en un clic:

Divi tema acento color
  1. Vaya a la pestaña Apariencia √≥ Personalizar √ Ajustes Generales > Ajustes de diseño. Define el color acento de tu tema. Esto implica que muchos elementos de su sitio tendrán el mismo color. Esto hace posible estandarizar el diseño de su sitio y también afectará a su tienda.
  2. Así, la notificación WooCommerce tomará el color de acento de su tema.
  3. El precio del producto también.
  4. Por otro lado, el botón de añadir en la cesta permanecerá azul por el momento en el lado del ratón.
  5. Y la insignia promo también permanecerá naranja.

2 - Cambiar el color del botón sobrevuela

Sobrevoltura de botón - Divi y WooCommerce

Para cambiar el color del botón Añadir a la cesta, durante el ratón flotando:

  1. Vaya a la pestaña Aspecto > Personalizar > Estilo de los botones voladores. Define el color de texto sobre el ratón.
  2. Ahora, el texto en el folleto obtiene el color deseado.
  3. La placa promo sigue siendo naranja. Veremos cómo cambiarlo después.
más recursos para Divi

3 – Cambiar el color de placa de promo WooCommerce

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

Cambiar el color de la placa de promo Divi y WooCommerce
  1. Vaya a la pestaña Aspecto √≥ Personalizar √≥ CSS adicional.
  2. Introduzca el código de abajo.
  3. ¡El color de la placa de promo está personalizado!
/* cambiar el color del promo badge woocommerce */ .woocommerce span.onsale, .woocommerce-page span.onsale { background: #974df3 !important; }

Por supuesto. Cambiar el código de color para usar el suyo.

4 - Use un color diferente del tema d acento color

Cómo hacer si desea utilizar un color diferente para su WooCommerce tienda del color de acento tema divi?

diferencia de color de acento tema color

Es posible. En este caso tendrá que personalizar su tienda WooCommerce completamente con CSS.

El siguiente código se adjuntará a la pestaña Aspecto √≥ Personalizar √≥ CSS adicional.

/* customise WooCommerce with Divi */ .woocommerce a.button, .woocommerce a.button.alt, .woocommerce a.button.alt, .woocommerce a.button:hover, .woocommerce-page a.button.alt, .woocommerce-page a.button.woocommerce botón.button.button.alt, .woocommerce botón.button:hover, .woocommerce botón.button.button:hover, .woocommerce-page botón.button:hover, .woocommerce-page botón.button.button.alt:hover { color: #974df3 !important; .woocommerce .woocommerce-error, .woocommerce-info, .woocommerce-message { color: #974df3 !important; fondo: #974dwoober3 !important; .

Aquí, también, pensarás en cambiar el código de color con el tuyo.

¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos!

También te gustará :

Cambiar el color de WooCommerce botones
Armonizar el color de la tienda con el gráfico

Obtener Divi

Entrenamiento Divi

Libro electrónico Divi

Consejos gratis

Cuestionario Divi

Entrenamiento en vivo

icono 256x256

Proudly translated by wpLingua, la extensión de traducción para WordPress ¡Que me desarrolle! SEO-Friendly / Automático / Editable

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

  11. yohan

    bonjour, je souhaite modifier la page « mon compte » woocommerce j’utilise deja divi depuis plusieurs années j’ai vu les ajouts des modules woo dans divi egalement toutefois je ne vois pas comment on peut faire pour changer la couleurs le style…
    merci de votre aide

Presentar un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios se indican con *