skip to Main Content

Comment ajouter du texte sur un produit WooCommerce sur Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Dans un précédent tutoriel, nous vous avons présenté Divi. Pour ceux qui ne savent pas, Divi est un thème WordPress premium conçu par l’équipe Elegant Themes qui propose des services divers sur WordPress et conçoivent des plugins et thèmes.

Divi est un thème responsive et ce dernier est compatible avec plusieurs autres plugins entre autres nous avons WooCommerce. Aujourd’hui, nous allons vous montrer comment donner une animation différente à vos produits WooCommerce.

Parfois, le style de WooCommerce peut être un peu inadéquat, surtout si votre style CSS est un peu différent. Ce tutoriel, qui sera un peu technique (unpeu de CSS et rien que ça), vous permettra d’y remédier.

Autres tutoriels sur Divi thème

Commençons.

Modification d’une icône pour un texte au survole de la souris

Par défaut, lorsque vous utilisez WooCommerce avec Divi et survolez un produit que vous voyez une petite icône « + » qui est une police (font-icon) proposé par Divi et qui se présente comme suit:

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Il est vraiment facile de modifier cela pour une icône différente dans les réglages, mais si vous voulez ajouter un texte, c’est une autre chose ? Je vais vous montrer comment y parvenir avec les extraits de CSS d’aujourd’hui, et je vais aussi inclure un code facultatif à ajouter sur votre site.

Voici ce que nous aurons une fois terminé:

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Pourquoi utiliser du texte à la place d’une icône de toute façon?

Je peux penser à quelques raisons qui peuvent vous pousser à faire cela :

Pour définir donner un look unique à votre boutique : Tout ce que vous pouvez faire pour distinguer votre site Divi / WooCommerce d’un autre est toujours une bonne chose.

L’utilisation d’un mot comme « Voir » ou « Acheter » peut entraîner plus de conversion: Tout le monde doit faire ce qui est mieux pour son site web, et vous pouvez profiter de tests A/B intégré sur Divi pour aider à cela.

Source d’inspiration

J’ai récemment parcouru un site qui avait du texte sur le produit en vol stationnaire. Je l’ai bien sûr vu d’autres sites de commerce électronique qui ont des mots plutôt que des icônes sur le produit en vol stationnaire, donc ce n’était pas nouveau concept. Je n’avais jamais eu à faire cela sur un thème Divi, et lorsque j’ai vu cela, je m’en suis fixé un défis et je me suis rendu compte qu’il est effectivement facile de mettre cela en œuvre. Avec très peu de code nécessaire, vous êtes sûr de ne pas affecter les performances de votre blog.

La mise en œuvre d’un texte sur survol de la souris

Étape 1: La superposition de couleur

Nous allons d’abord changer la couleur de la superposition sur survol stationnaire. Cela est extrêmement facile à faire sur Divi. Dans votre module de magasin Accédez à l’onglet « paramètres avancés de conception avancée » et sélectionnez votre couleur.

Étape 2: Ajout du CSS

Le code CSS suivant dans « Options du thème > CSS Personnalisé » ou sur la feuille de style de votre thème enfant.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

.woocommerce .et_overlay:before {
 left: 0;
 margin-left: 0;
 content: 'view';
 /*** Votre Text ici ***/
 font-family: 'Source Sans Pro', Arial !important;
 /*** Choissiez votre police ***/
 text-transform: uppercase;
 font-size: 24px;
 color: #fff;
 /*** Définir la couleur du texte ***/
 font-weight: bold;
 text-align: center;
 width: 100%;
 padding: 5px 0;
}

Si vous souhaitez que vos produits soit plutôt ronds, vous pouvez ajouter ce code facultatif :

.woocommerce ul.products li.product a img,
.et_overlay {
 border-radius: 50%;
}

C’est tout !

Désormais, vous pouvez visiter votre boutique et voir comment vos modifications sont prise en considération.

Autres tutoriels Divi

Cet article comporte 5 commentaires

Laisser un commentaire

Votre adresse de messagerie 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.

Back To Top
10 Partages
Partagez6
Tweetez
Enregistrer4