WooCommerce in DIVI: Zeigen Sie einen Text anstelle eines Symbols an, wenn Sie mit der Maus über ein Produkt fahren

Viele von Ihnen haben mich um weitere Tutorials zum Anpassen von WooCommerce in DIVI gebeten.

In diesem Tutorial erkläre ich es wie Sie die ersten Schritte mit dem WooCommerce-Modul in DIVI machen

Ich bereite eine Reihe von Tutorials vor, um unseren Shop mit WooCommerce anpassen zu können, bleiben Sie dran 😉

In diesem Tutorial zeige ich Ihnen, wie Sie einen Text anstelle eines Symbols anzeigen, wenn Sie mit der Maus über ein Produkt fahren.

Standardmäßig wird in DIVI beim Bewegen der Maus über ein Produkt ein Symbol angezeigt:

In diesem Tutorial erfahren Sie, wie Sie es in eine Text- und Hintergrundfarbe ändern, die so aussieht:

Um dem Tutorial zu folgen, benötigen Sie die DIVI-Vorlage, bei der Sie sie kaufen können hier oder wenn Sie sind Premium-Mitglied Sie steht Ihnen kostenlos im Mitgliederbereich zur Verfügung.

Hier ist das Video-Tutorial:

Als Erstes bearbeiten wir das WooCommerce-Modul im DIVI-Builder, gehen zur Registerkarte „Design“ und ändern die Farbe in der Option „Ebenenfarbe bei Mouseover überlagern“.

Mit einem Schieberegler wählen Sie den gewünschten Farbton und mit dem anderen die Transparenz:

Mit dieser Einstellung ändern wir die Hintergrundfarbe beim Hover:

Um das Symbol in einen Text umzuwandeln, müssen wir den folgenden Code in Divi –> Designoptionen –> Benutzerdefiniertes CSS hinzufügen.

.woocommerce .et_overlay:before {
    left: 0;
    margin-left: 0;
    content: 'ver';
    /*** TEXTO ***/
    font-family: 'Source Sans Pro', Arial !important;
    /*** ELEGIR FUENTA DE TEXTO ***/
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
    /*** COLOR DE TU TEXTO ***/
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding: 5px 0;
}

Im Code können Sie sehen, dass der Text, der in der Inhaltsoption angezeigt wird, derjenige ist, der angezeigt wird.