Woocommerce / Storefront Produktbild .woocommerce-product-gallery

  • Es ist mir ja schon fast unangenehm, so kurz nach der letzten frage direkt mit der nächsten zu kommen.

    Ich bin mit der Product Gallaery von Woocommerce gerade nicht glücklich.
    Wer vorbeischauen möchte einmal hier klicken.

    Beim Produktbild hätte ich im vergleich zum Ist-Zustand gerne drei Sachen anders:

    1. Das Vorschaubild sollte auch ohne Mouseover den kompletten Platz ausnutzen, der ja beim Mouseover auch korrekt genutzt wird.
    2. Entsprechend zur breite sollte natürlich auch die Höhe angepasst werden. Am liebsten wäre mir eigentlich das aktive Bild quadratisch in etwa 500x500px anzuzeigen, Änderungen am .flex-viewport werden aber ignoriert/überschrieben.
    3. Die weiteren Vorschaubilder (habe bewusste einen Artikel mit 5 Bildern verlinkt) werden ohne für mich nachvollziehbaren Grund in 2 Zeilen sortiert, obwohl genug Platz wäre alle nebeneinander zu packen. Selbst wenn ich das margin-right entferne oder reduziere, landet das 5. Bild unter den anderen.

    Bin wie immer für alle Tipps dankbar

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • So, nach einer aufregenden Schnitzeljagd durch die Woocommerce php templates hier meine Lösung, falls jemand mal das selbe Problem haben sollte.
    Bild:
    Damit das aktive Bild auch die volle Breite des Containers nutzt einfach die breite auf 100% setzen. Das war noch einfach, wenn man erst mal das richtige Element gefunden hat.

    Code
    div.woocommerce-product-gallery__image > a,
    div.woocommerce-product-gallery__image > a > img{
        width:100%;
    }

    Bei den Vorschaubildchen wurds dann richtig lustig. Über 7 Ecken wird abgefragt wieviele Bilder je Column angezeigt werden sollen. Standardmäßig sind dies 4, bei aktiver sidebar 5. Hierbei gilt scheinbar dass die Sidebar auf der tatsächlichenSeite aktiv sein muss. Grundsätzlich ist die Sidebar bei mir nämlich aktiv, allerdings nicht auf der Produktseite.

    Wie dem auch sei, in der class-storefront-woocommerce.php schließlich fand ich die Möglichkeit den Wert 5 zu erzwingen.
    (Ausgeklammert der Originalcode um beim Fehlschlag direkt zurückrudenr zu können und als Anschaung für euch, wie üblicherweise abgefragt wird.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!