WooCommerce Produkte Darstellung Shop- und Produktseiten und Produktbilder

 

In diesem Beitrag der Schlagwort-Serie Grundlagen möchte ich näher auf die Registerkarte Produkte eingehen und dir unter Darstellung die abschnitte Shop- und Produktseiten sowie Produktbilder näher erläutern.

Im abschnitt Shop- und Produktseiten, kannst du eine Basisseite für deine Produkte festlegen. Auf dieser Seite werden alle Produkte gelistet, die in deinem Shop verkauft werden. Die festgelegte Seite kann zudem für die Permalink-Struktur verwendet werden.
Je nach Wunsch kannst du die Anzeige der Produkte auf der Shop-Seite bestimmen, hierfür hast du drei Auswahlmöglichkeiten. Gleiches gilt auch für die Kategoriedarstellung.
Die Produktsortierung sortiert deine Produkte im Shop beispielsweise nach Beliebtheit, Neuheit oder anderen. Es ist gleichzeitig ein Auswahlmenü im Frontend und zu finden meist, oben rechts in jeder Kategorie oder auf allen Archivseiten. Dein Kunde kann die Standardsortierung für sich umstellen.
Das Warenkorb-Verhalten ist eine Aktion das ausgelöst wird, nachdem der Kunde etwas in den Warenkorb hinzufügt hat.

Im abschnitt der Produktbilder, kannst du die Größen der automatisch generierten Bilder von WooCommerce festlegen. Beachte dass, diese in Pixel-Maßen angegeben werden. Um Verzerrungen oder Größenunterschiede zu vermeiden, kannst du die Produktbilder genau zuschneiden lassen.

Schnelleinstellungen

Shop & Produktseiten

  1. Shop-Seite: Lege eine Seite für deine Produkte fest. In den meisten Fällen ist das die Seite namens Shop.
  2. Anzeige auf Shop-Seite: Wähle hier Produkte anzeigen aus, um nur Produkte auf der Shop-Seite anzuzeigen.
  3. Standard-Kategoriedarstellung: Wähle hier Unterkategorien & Produkte anzeigen aus, um Produkte und Unterkategorien der jeweiligen Kategorie anzuzeigen.
    Lege außerdem Bilder für deine Kategorien unter Produkte > Kategorien fest.
  4. Standard-Produktsortierung: Wähle hier nach neuestem Produkt sortiert aus, damit der Kunde neuesten Produkte zu sehen bekommt.
  5. „In den Warenkorb“-Verhalten:
    1. Nach erfolgreichem Hinzufügen zum Warenkorb weiterleiten: Anhaken wenn der Kunde direkt zum Warenkorb weitergeleitet werden soll, wenn der Kunde das „In den Warenkorb“-Button in einem Produkt angeklickt hat.
    2. AJAX-Warenkorb-Buttons auf Produktarchivseiten aktivieren: Durch anhaken wird dem Kunden signalisiert „Produkt wurde erfolgreich Ihrem Warenkorb hinzugefügt“, sobald er das „In den Warenkorb“-Button in einem Produkt angeklickt hat.

Produktbilder

WordPress und WooCommerce generiert Hochgeladene automatisch in mehreren Größen. Für eine optimale Darstellung im Shop müssen diese Größen meist angepasst werden.

  1. Katalogbilder: Alle Seiten mit Produktauflistungen wie Kategorie-Seiten, Archiv-Seiten.
  2. Einzelnes Produktbild: Hauptproduktbild, Produktbilder
  3. Produkt-Vorschaubilder: Thumbnails der Produktgalerie

Die Option Genau zuschneiden ist nützlich, damit Seitenverhältnisse genau zugeschnitten werden.

Nachfolgend findest du eine ausführliche Erklärung der einzelnen Punkte mit weiterführenden und hilfreichen Tipps.

 

 

Shop & Produktseiten

Pfad: Backend > WooCommerce > Einstellungen > Produkte > Darstellung : Shop & Produktseiten

Shop-Seite

In diesem abschnitt, legst du eine Shop-Seite als Basis für deine Produkte fest. Die Shop-Seite definierst du selbst. Alle Produkte werden auf dieser Seite aufgelistet, sozusagen ein Produktkatalog für deine Kunden. Standardmäßig nutzt WooCommerce hierfür seine selbst erstellte Seite namens Shop, du musst nicht diese Bezeichnung behalten. Wenn die Seite nicht auswählt ist, wähle sie zunächst aus.
Falls du noch nicht erkannt hast, die auswählbaren Seiten im Auswahlmenü unter Shop-Seite, sind normale WordPress-Seiten. Wenn du also keine Seite namens Shop zum Festlegen hast, erstelle im Menü unter Seiten eine neue Seite namens Shop oder lege einen eigenen Titel fest. Eine Gestaltung der Seite ist nicht notwendig.

Die neue Basisseite kann zudem auch unter Einstellungen > Permalinks für die Permalinks verwendet werden. Hierzu erfährst du in einem anderen Beitrag Permalink-Basis Produkte mehr.

Anzeige auf Shop-Seite

Hier legst du die Darstellung der Shop-Seite fest.

Standard-Kategoriedarstellung

Hier legst du die Darstellung der Kategorie-Seiten fest.

Die Darstellung der Shop-Seite und der Kategorien lassen sich in drei Möglichkeiten darstellen. Hier kannst du auswählen, ob nur Produkte anzeigen möchtest, nur Kategorien oder beides.

  • Produkte anzeigen: Es werden nur Produkte angezeigt.
  • Kategorien / Unterkategorien anzeigen: Je nach Art und Umfang deines Shops kann es sinnvoll sein, wenn du vorerst die Kategorien oder Unterkategorien anzeigen lässt.
  • Kategorien / Unterkategorien und Produkte anzeigen: Die sowohl als auch Methode. Es werden Kategorien und Produkte zugleich angezeigt.

Sicherlich wirst du auch, wie die meisten wahrscheinlich Kategorien / Unterkategorien und Produkte anzeigen auswählen. Allerdings wird bei dieser Option zwischen Kategorien und Produkten keine Zeile eingefügt, stattdessen werden die Produkte direkt nach den Kategorien angereiht. Das kann dazu führen, dass das Layout unübersichtlich aussieht und der Kunde dadurch verwirrt wird.

Wie du diesen Schönheitsfehler beseitigen kannst erzähl ich dir hier.

Die Standard-Kategoriedarstellung wird zwar global festgelegt, kann aber im Einzelfall davon abweichen. Dieses Feature ist praktisch, wenn du die letzten Unterkategorien nicht mehr unbedingt anzeigen möchtest oder vereinzelt einige Kategorien anpassen willst.
Hierfür wechselst du in den Menüpunkt Produkte > Kategorien. Suche dir eines deiner erstellten Kategorien aus und klicke auf Bearbeiten.
Hier kannst du die Produktkategorie bearbeiten, ein Vorschaubild vergeben und sogar einen Text hinzufügen.
Um die Kategoriedarstellung für diese Produktkategorie zu ändern, gehe auf Anzeigeart und lege im Auswahlmenü deine gewünschte neue Anzeigeart fest. Der Wert Standard bezieht sich auf die globale Einstellung.

Standard-Produktsortierung

Bei Produktsortierung gibst du deinen Produkten eine Reihenfolge vor. Die ausgewählte Sortierung wird für alle Seiten mit Produkten übernommen. Hierzu gehören beispielsweise die Shop-Seite und die Kategorie-Seiten.
Beachte das die Reihenfolge der Produktsortierung durch den Kunden jederzeit, auf seine gewünschte Sortierung geändert werden.

Auswählbar sind

  • Standardsortierung (benutzerdefinierte Reihenfolge + Name)
  • Beliebtheit (Verkäufe)
  • Durchschnittliche Bewertung
  • Nach neuestem Produkt sortiert
  • Nach Preis sortiert (aufsteigend)
  • Nach Preis sortiert (absteigend)

Falls du gerne weitere Sortierungsmöglichkeiten deinen Kunden ermöglichen möchtest, kannst du das mit diesem Plugin WooCommerce Extra Product Sorting Options machen. Dieses Plugin erstellt beispielsweise die Produktsortierung nach Namen A-Z, zudem hast du die Möglichkeit eigene Produktsortierungen zu erstellen.

In den Warenkorb-Verhalten

Nach erfolgreichem Hinzufügen zum Warenkorb weiterleiten:
Hier stellst du ein, ob dein Kunde, nachdem er ein Produkt in den Warenkorb gelegt hat, direkt zur Warenkorb-Seite weitergeleitet wird.

Du solltest natürlich vorher abschätzen, ob deine Kunden mehr als ein Produkt in den Warenkorb legen bevor sie einen Kauf tätigen oder meist nur ein Produkt kaufen.

AJAX-Warenkorb-Buttons auf Produktarchivseiten aktivieren:
Diese Funktion deaktiviert die erstere Option: Nach erfolgreichem Hinzufügen zum Warenkorb weiterleiten.  Mit anhaken dieser Option wird das weiterleiten zur Warenkorb-Seite verhindert.
Stattdessen signalisiert die Ajax Funktion, dass das Produkt ins Warenkorb hinzugefügt wurde. Der Kunden erhält einen Hinweis: Das Produkt wurde erfolgreich deinem Warenkorb hinzugefügt. Die Seite wird nicht neu geladen und der Kunde kann bequem weiter shoppen.

Damit Produkte im Warenkorb signalisiert werden können, muss das verwendete Theme die entsprechende Ajax Funktion unterstützen und über ein Warenkorb-Widget verfügen.

Cache Plugins können Fehler verursachen, da diese eine Ajax Funktion nicht ausschließen können.

 

Produktbilder

Pfad: Backend > WooCommerce > Einstellungen > Produkte > Darstellung : Produktbilder

In diesem abschnitt, kannst du die Größen der Produktbilder einstellen. Für eine optimale Darstellung im Shop, generiert WooCommerce automatisch Produktbilder in mehrere Größen. Hier kannst du drei Größen einstellen.

Maße einstellen

Die Katalogbilder sind die Bilder auf den Kategorie-Seiten und der Shop-Seite, während Einzelnes Produktbild die Größe des Produktbildes darstellt. Die Produkt-Vorschaubilder sind die Thumbnails der Produktgalerie.

  • Katalogbilder: sind alle Bilder auf Produktarchiv-Seiten und Kategorie-Seiten.
  • Einzelnes Produktbild: ist das Produktbild im Produkt der Galerie.
  • Produkt-Vorschaubilder: Sind die Thumbnails auch Vorschaubilder genannt. Wird in der Produktgalerie verwendet.

Gib die gewünschten breiten und höhen in Pixel an ein.

Hinter den Feldern findest du die Option Genau zuschneiden. Diese Option ist nützlich um beispielsweise aus einem rechteckigen Bild ein quadratisches Bild zu erstellen, Seitenverhältnisse werden genau zugeschnitten.
Möglicherweise benötigst du diese Option, um Produktbilder im Shop optimal anzeigen zu lassen. Andernfalls werden nur die Proportionen des Bildes neu berechnet. Um die Produktbilder genau zuzuschneiden, aktiviere die Checkbox Genau zuschneiden.

Regenerate Thumbnails

Nach speichern der neuen Maße musst du eventuell die Produktbilder neu generieren. So werden alle zuvor hochgeladen Bilder regenerierst und neu skaliert, um verzerrte und unscharfe Produktbilder zu vermeiden oder wiederherzustellen. Das gelingt mit dem WordPress Plugin Regenerate Thumbnails.

Die optimalen Größen für die Produktbilder sind vom verwendeten Theme abhängig und können mittels CSS ermittelt werden.
Wenn du Probleme mit verzerrten und unscharfen Produktbildern hast, ließ dir Using the Appropriate Product Image Dimensions von WooCommerce Docs durch. Einen deutschsprachigen Beitrag werde ich demnächst dazu erstellen.

Wenn du Fragen oder Anmerkungen zu diesem Beitrag hast, lass es mich in einem Kommentar wissen. Bis bald!

Vorheriger Beitrag

WooCommerce Einstellungen Permalink-Basis Produkte

Nächster Beitrag

WooCommerce Produkte Allgemein Maßeinheiten und Bewertungen

  1. Alles sehr ausführlich und verständlich Dokumentiert.

    Danke

  2. Clemens

    Hey, gute Beschreibung. Gibt wenige deutsche in der Qualität.
    Hätte zwei Fragen…
    Weißt du vielleicht wie ich die dünnen Rahmen um die Produktbilder entfernen kann?
    In der Warenkorb-Ansicht verschwindet auf schmalen Displays und Mobiles das „Löschen Icon“ und das „Mini Produkt Thumbnail“. Das Thumbnail würde mich ja nicht stören, aber dass man auf Handys keine Waren aus dem Warenkorb entfernen kann stört massiv! Hast du eine Lösungsvorschlag?

    • Hi Clemens,
      wenn in den Theme Einstellungen nichts zu finden ist, kannst du die Rahmen der Produktbilder auch per CSS verändern. Für das „Löschen Icon“ in der mobilen Ansicht, müsste man dein Theme kennen. Aber auch hier würde ich dir empfehlen erstmal in den Theme Einstellungen nachzusehen.
      LG Adem

  3. Zappo

    Hallo,

    ich suche als Umsteiger von WPSG zu WooCommerce verzweifelt eine Option, in der Produktübersicht auch einen Text zu dem Produkt anzeigen zu können, leider bislang erfolglos.

    Weißt du hier eine Lösung?

    Danke und viele Grüße,
    Zappo

  4. Hallo Adem,
    ich suche eine Möglichkeit, auf der Produktseite nur Bilder ohne einen Text (Preis, Lieferzeit etc.) anzuzeigen.
    Arbeite mit Divi Theme.
    Viele Grüße
    Ulrike

  5. Merhaba Adem,

    Bin gerade auf deinem Blog gelandet auf der Suche nach Möglichkeiten für meinen eigenen Onlineshop. Und zwar habe ich folgendes Problem.

    Ich möchte mein Onlineshop nur auf einer einzigen Seite haben und die Produktdetailseite und die Kateogorie seiten erst gar nicht anzeigen lassen.

    Meine Frage an dich: Kann man das im Woocommerce so einrichten dass nur die Shopseite als Shop existiert und die weiteren Seiten abschaltet oder entfernt oder wie auch immer.

    Geht das im WordPress oder im Woocommerce und wenn ja weisst du evt. auch wie oder kannst du mir diesbezüglich behilflich sein.

    Ich bedanke mich Im Voraus schon mal bestens für deine Bemühungen und hoffe auf eine baldige Antwort von dir.

    Freundliche Grüsse aus der Schweiz

    Mutlu Cetin

  6. René

    Hallo Herr Oezen,

    ich möchte gern alle Bilder ausblenden (Katalogbilder, Einzelnes Produktbild und Produkt-Vorschaubilder)oder anders formuliert – die Funktion der Bildanzeige benötige ich nicht. Ohne Bilder erscheint überall so ein Kasten, vermutlich der Platzhalter für die Bilder.
    Haben Sie eine Lösung für mich, ohne Code schreiben zu müssen – weil ich das nicht kann ;-(
    Vorab vielen Dank!

    Herzlichst, René Springer

  7. Vielen dank für die tolle anleitung …viel zeit gespart.

  8. Marc

    Hey,

    zu aller erst super Beitrag! Sehr Qualitativ und Interessant.

    Ich würde gerne Produkte auf mehreren Seite anzeigen lassen.
    Z.b. habe ich Filme von denen ich pro Seite 12 anzeigen lassen möchte. Das Problem ist jedoch das ich nicht weiss, wie ich die Kategorie „Filme“ auf mehrere Seiten verteile ( z.b. 12 Filme auf seite 1 -> 12 Filme auf seite 2 etc.). Woocommerce legt die Produkte alle auf eine Seite. Hoffe mir kann jemand dazu helfen.

    Danke. Lg

  9. Birgit

    Hallo
    erstmal vielen Dank für diese super verständliche Erklärung! Eine Frage hätte ich noch: Ich möchte gerne, dass ein einzelnes Produkt gar nicht auf der Shopseite aufscheint, da es dort eigentlich nicht dazupaßt, Ich möchte es nur mit einem Link auf eine Seite einbauen. Wie kann ich das aus der Shop-Seite rausnehmen?
    Danke und lg
    Birgit

  10. Vielen Dank für den interessanten Artikel. Dazu habe ich noch eine Frage.
    Wenn ich eine Seite als Shopseite festlege, habe ich die Möglichkeit – wie beschrieben – diese unter Woocommerce > Einstellungen > Produkte > Darstellung > Anzeige auf der Shop-Seite – Produkte, Kategorien oder beides anzuzeigen.
    Diese Anzeige will ich durch meine eigene Gestaltung über das Theme Impreza ersetzen. Wenn ich die Seite mit Impreza gestalte und veröffentliche, werden mir beide Auflistungen angezeigt. Ich will aber nur die Impreza-Gestaltung darstellen. Kann ich die Woocommerce-„Standard-Anzeige“ unterdrücken? Wenn ja, wie?

Schreibe einen Kommentar zu Ulrike Antworten abbrechen

Präsentiert von WordPress & Theme erstellt von Anders Norén