WooCommerce – Produktübersicht anpassen

Home/Wordpress/WooCommerce – Produktübersicht anpassen

Zur Zeit arbeite ich an der Einbindung des Shop-Plugin WooCommerce für WordPress in meinem privaten Projekt „Wat geiht?”.
Dabei ist mir aufgefallen, dass die Darstellung der Produkte auf der Übersichtsseite in der Standardeinstellung uneinheitlich aussieht.
Der Link „In den Warenkorb” wird je nach Länge des Artikelnamens an einer unterschiedliche Stelle dargestellt.

Dies kann mit einer einfachen CSS – Regel angepasst werden.

.woocommerce ul.products li.product h3, 
.woocommerce-page ul.products li.product h3
{
min-height: 9em; /* Diesen Wert anpassen */
}

Der Artikelname ist in WooCommerce mit der Überschrift H3 ausgezeichnet. Mit der obigen CSS-Regel wird die Mindesthöhe für diesen Bereich vorgegeben. Ändern Sie den Wert, bis der der Link „In den Warenkorb” bei allen Produkten auf einer Höhe steht.

By | 2017-02-07T10:27:26+00:00 9. April 2014|Wordpress|8 Comments

About the Author:

8 Comments

  1. Oliver Bähre 3. Februar 2015 at 13:13 - Reply

    Hallo!

    Das ist ein toller Tipp. Aber wo füge ich den Code ein?
    Viele Grüße

    • Jan Neuhoff 5. Februar 2015 at 10:54 - Reply

      Hallo,

      der Code muss in die style.css des verwendeten Worpdress Themes.
      Um es „update sicher“ zu machen, sollten solche Änderungen immer in einem WordPress Child Theme durchgeführt werden.

      Grüße von der Ostsee
      Jan Neuhoff

      • Heike 9. März 2015 at 10:18 - Reply

        Hallo, kann man ein Child Thema auch nachträglich erstellen, wenn man schon alles (fast alles) fertig hat?
        LG aus Bern
        Heike

  2. Oliver Bähre 7. Februar 2015 at 13:32 - Reply

    Hallo ,

    wo in der style.css füge ich diesen Code ein. Ich habe ihn zwar eingefügt, allerdinggs ohne nennenswertes Resultat. Vielleicht habe ich ihn ja an der falschen Stelle eingesetzt?

    Viele Grüße von der Nordsee
    Oliver Bähre

  3. Marko 20. Juli 2016 at 10:50 - Reply

    Danke für den Tipp! Ich bin auf der Suche nach einer Lösung, wie ich aller Shop-Produkte auf eine Seite darstellen kann (standardmäßig auf 10 limitiert), damit meine Kunden nicht auf Seite 2, 3, 4 … klicken müssen. Wäre die Lösung eine Code-Änderung oder gibt es dafür ein Plug-In (habe nicht gefunden). Wäre dankbar für eine Antwort.
    Mit freundlichen Grüßen
    Marko

  4. Oliver Bähre 17. April 2017 at 11:15 - Reply

    Hallo zusammen,

    gibt es ein Update dieser Funktion für Woocommerce 3.0? Leider funktioniert diese Regel nicht mehr.

    Mit freundlichen Grüßen

    Oliver

  5. Oliver Bähre 17. April 2017 at 15:02 - Reply

    Ergänzend zu meiner Frage habe ich herausgefunden; einfach h3 durch h2 austauschen, dann funktioniert es wieder.

    Mit freundlichen Grüßen

    Oliver

    • Jan Neuhoff 19. April 2017 at 9:24 - Reply

      Danke für den Hinweis und viel Erfolg mit dem Shop.

      Jan

Leave A Comment