was successfully added to your cart.

WooCommerce Produkte Darstellung Shop- und Produktseiten und Produktbilder

Im Menüpunkt „Darstellung“, haben Sie im abschnitt „Shop- und Produktseiten“, die Möglichkeit eine „Shop-Seite“ festzulegen und die Darstellung Ihrer „Shop-Seite“ anzupassen. Die im Auswahlmenü auswählbaren Seiten für die „Shop-Seite“, sind normale Seiten die Sie in Ihrem WordPress anlegen können. Im abschnitt der „Produktbilder“, können Sie Pixel-Maße eingeben und festlegen ob die Produktbilder genau zugeschnitten werden sollen.

Außerdem können Sie eine Basisseite für Ihre Produkte festlegen. Dieser wird als Produkt-Katalog bezeichnet und alle Produkte nach „Neuheit“ gelistet die Sie in Ihrem Shop verkaufen. Die standardmäßig festgelegte Seite „Shop“ kann für die Struktur der „Produkt Permalinks“ verwendet werden. Dieser hat einen direkten Einfluss auf die Permalinkstruktur und ist zudem SEO freundlich.

In diesem Tutorial möchte ich näher auf die Registerkarte „Produkte > Darstellung“ eingehen und die Möglichkeiten der Shop- und Produktseiten und Produktbilder näher erläutern.

 

INHALTSVERZEICHNIS

WooCommerce Produkte Darstellung

In diesem Tutorial erfahren Sie, wie Sie die Registerkarte „Produkte > Darstellung“ einrichten und verwalten.

  1. Darstellung
    1. Shop- und Produktseiten
    2. Produktbilder

papagei-produkte


 

WooCommerce Produkte Darstellung Shop- und Produktseiten und Produktbilder

Pfad: WooCommerce > Einstellungen > Produkte > Allgemein > Maßeinheiten und Bewertungen

WooCommerce Produkte Darstellung

WooCommerce Produkte Darstellung

Shop- und Produktseiten

In WooComemrce können Sie eine Basisseite für Ihre Produkte festlegen. Auf dieser Seite werden alle Produkte gelistet, die Sie in Ihrem Shop verkaufen. WooCommerce erstellt sozusagen ein Produktarchiv für Ihre Produkte im Shop. Die von WooCommerce festgelegte Seite „Shop“ kann auch für die Struktur der „Produkt Permalinks“ verwendet werden. Dieser hat dann einen direkten Einfluss auf die Permalinkstruktur und ist zudem SEO freundlich, daher ist es sinnvoll die Permalinkstruktur mal genauer anzusehen. Im Beitrag „Permalink-Basis Produkte“ habe ich die Möglichkeiten näher erläutert.

Shop-Seite
Die „Shop-Seite“ definiert eine Basisseite für Ihre Produkte im Shop. Hier können Sie eine gewünschte Seite als Basisseite festlegen. Auf dieser Seite erscheinen alle veröffentlichten Produkte als Produktarchiv. WooCommerce nutzt standardmäßig seine selbst erstellte Seite „Shop“, diesen können Sie jedoch selbst ändern. Eine Gestaltung der Seite ist nicht notwendig. Die Seite „Shop“ finden Sie wie gewohnt in Ihrem WordPress unter dem Menüpunkt „Seiten“.

Shop-Seite Darstellung
Die Darstellung der „Shop-Seite“ lässt sich in drei Möglichkeiten darstellen.

Standard-Kategoriedarstellung
Die Darstellung der „Kategorien“ lassen sich ebenfalls in drei Möglichkeiten darstellen.

  • Produkte anzeigen
    Es werden nur Produkte angezeigt.
  • Kategorien und Unterkategorien anzeigen
    Je nach Umfang des Shops kann es hilfreich sein, wenn die Produkte auf der „Shop-Seite“, erstmal in Kategorien und Unterkategorien angezeigt werden.
  • Beides anzeigen
    Es werden Produkte und zugleich Kategorien und Unterkategorien angezeigt.

Zudem haben Sie bei der Darstellung der „Kategorien“ die Möglichkeit, außer einer globalen Einstellung der „Standard-Kategoriedarstellung“, für die jeweilige Kategorie die Darstellung anzupassen.
Diesen finden Sie im Menüpunkt Produkte > Kategorien. Gehen Sie mit Ihrem Mauszeiger auf eines Ihrer erstellten Kategorien und klicken auf „Bearbeiten“, nun können Sie die Produktkategorie bearbeiten. Um die „Kategoriedarstellung“ für die Produktkategorie zu ändern gehen Sie auf „Anzeigeart“ und legen im Dropdown Menü Ihre gewünschte „Anzeigeart“ fest. Der Wert „Standard“ bezieht sich auf die globale Einstellung.

 

Standard-Produktsortierung
Geben Sie für die Produktsortierung eine Reihenfolge vor. Die vorgegebene Produktsortierung wird für die „Shop-Seite“ und der „Kategorie-Seiten“ übernommen. Die Reihenfolge der Produktsortierung kann vom Kunden jederzeit, auf seine gewünschte Sortierung geändert werden. Die Möglichkeiten der Produktsortierung habe ich Ihnen aufgelistet:

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

 

Tipp: Um Ihren Kunden eine individuellere Produktsortierung zu ermöglichen, können Sie mit einem Plugin weitere Arten einer Produktsortierung hinzuzufügen. Das Plugin „WooCommerce Extra Product Sorting Options“ erstellt Ihnen beispielsweise die Produktsortierung nach Namen A-Z, zudem haben Sie die Möglichkeit eigene Produktsortierungen zu erstellen.

 

In den Warenkorb

Zum Warenkorb weiterleiten, nach erfolgreichem Hinzufügen
Hier stellen Sie ein ob der Kunde, nachdem er ein Produkt in den Warenkorb gelegt hat, zur Warenkorb-Seite weitergeleitet wird.

AJAX-Warenkorb-Buttons auf Produktarchivseiten aktivieren
Diese Funktion deaktiviert die Option „Zum Warenkorb weiterleiten, nach erfolgreichem Hinzufügen“ dadurch wird das weiterleiten zur Warenkorb-Seite verhindert. Durch die Ajax Funktion werden Produkte stattdessen im Warenkorb signalisiert, hierbei erhält der Kunden einen Hinweis „Produkt wurde erfolgreich Ihrem Warenkorb hinzugefügt“. Die Seite wird somit nicht neu geladen und der Kunde kann bequem weiter Shoppen.

 

Hinweis: Damit Produkte im Warenkorb signalisiert werden können, muss das verwendete Theme die entsprechende Ajax Funktion unterstützen und ein „Warenkorb-Widget“ verfügen. Etwaige Cache Plugins für WordPress können Fehler verursachen, da die Cache Plugins die Ajax Funktion nicht ausschließen können.

 

Produktbilder

WooCommerce generiert automatisch Produktbilder in mehrere Größen, für eine optimale Darstellung im Shop. Im folgenden können Sie die Größen der Produktbilder einstellen, dieser abschnitt ist in drei Punkte geteilt. Die „Katalogbilder“ stellen die Bilder auf den Kategorie-Seiten und der Shop-Seite dar, während „Einzelnes Produktbild“ direkt die Größe des Produktbildes bestimmt. Die „Produkt-Vorschaubilder“ sind Thumbnails beispielsweise für die Produktgallerie. Die optimalen Größen für die Produktbilder sind vom verwendeten Theme abhängig.

Nach Speichern der neuen Maße, müssen Sie unter Umständen Ihre Produktbilder neu generieren, damit die zuvor hochgeladen Bilder neu skaliert werden können um verzerrte und unscharfe Bilder wiederherzustellen. Mit dem WordPress Plugin Regenerate Thumbnails regenerieren Sie verzerrte und unscharfe Produktbilder neu.

WooCommerce Produkte Produktbilder

WooCommerce Produkte Produktbilder

Katalogbilder
Katalogbilder stellen die Bilder auf allen Produktarchiv-Seiten dar.

Einzelnes Produktbild
Legt die Größe des Produktbildes fest.

Produkt-Vorschaubilder
Sind die Thumbnails auch Vorschubilder genannt. Wird beispielsweise für die Produktgallerie verwendet.

Geben Sie die gewünschten Breiten und Höhen in Pixel (Einheit px) ein.

Hinter den Feldern finden Sie 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ötigen Sie diese Option, um Produktbilder im Theme optimal anzuzeigen. Ansonsten werden nur die Proportionen des Bildes neu berechnet und es kann bei falscher Einstellung zu Verzerrungen im Bild kommen. Um die Produktbilder genau zuzuscheiden, aktivieren Sie die Checkbox „Genau zuschneiden?“.

Tipp: Wenn Sie Probleme mit verzerrten und unscharfen Produktbildern haben, lesen Sie sich „Using the Appropriate Product Image Dimensions“ auf WooThemes.com durch.

 

Bildergalerie für Produktbilder

Lightbox für Produktbilder aktivieren
Hiermit wird die Lightbox von WooCommerce eingebunden. Die Produktgaleriebilder werden in einer Lightbox geöffnet.


Korrekturen, Hinweise und Ergänzungen
Sollten Sie einen Punkt nicht verstehen, falls Ihnen etwas Wichtiges fehlt oder wenn Sie einen Verbesserungsvorschlag haben, dann lassen Sie es mich in einem Kommentar wissen.

Autor Adem Oezen

Grafikdesigner und Webentwickler. Entwickelt Webanwendungen wie Portalsysteme, Online-Shops und andere komplexe Webseiten. Auch Front-End Entwicklung, SEO Optimierung und Erweiterung von Webseiten, basierend auf WordPress, sind seine Aufgaben. Seit seinem 16ten Lebensjahr ist technische Kommunikation seine Leidenschaft. Als Blogger, schreibt er derzeit Tutorials über WooCommerce für die deutsche Community. Facebook | GoogleInstagramTwitterWordpressYoutube

More posts by Adem Oezen

Join the discussion 14 Kommentare

  • Thomas Mauer sagt:

    Die Beitragsbilder machen auch was her hehe cool weiter so 🙂

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

    Danke

  • Clemens sagt:

    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?

    • Adem Oezen sagt:

      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

  • Zappo sagt:

    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

  • Ulrike sagt:

    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

  • Mutlu sagt:

    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

  • René sagt:

    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

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

  • Marc sagt:

    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

  • Birgit sagt:

    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

  • 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?

Antworten auf Ulrike Cancel Reply