Beitrag

 
Produktvarianten in WooCommerce

Produktvarianten in WooCommerce

In meinem Beitrag über strukturierten Content habe ich beschrieben, wie man Attribute in WooCommerce anlegt und Ausprägungen für diese Attribute definiert. In diesem Artikel zeige ich, wie man in WooCommerce verschiedene Varianten für ein Produkt anlegt und was das für den Nutzer eines Online-Shops bedeutet.

Variable Produkte in WooCommerce

Wenn ich also beispielsweise einen Online-Shop für Autos betreibe, kann ich meinen Autos Attribute wie Hersteller, Modell, Kraftstoff oder auch Farbe zuordnen. Wenn ich nun ein Auto in drei verschiedenen Farben und mit drei verschiedenen Kraftstoffarten habe, existieren insgesamt 9 Varianten dieses Autos, die ich allerdings nicht als einzelne Produkte auf den Produktlisten oder den Suchergebnisseiten anzeigen will, sondern als ein Produkt. Die jeweilige für ihn passende Variante (also die richtige Kombination aus Farbe und Kraftstoff-Typ) kann ein Kunde sich dann auf der Artikeldetailseite z.B. über DropDowns auswählen. Unterschiedliche Shopsysteme haben für dieses Konstrukt unterschiedliche Bezeichnungen. Bei Magento wird das als konfigurierbares Produkt bezeichnet, WooCommerce bezeichnet diese Produkte einfach als variable Produkte. Beim Anlegen eines neuen Produkts muss man dafür „variables Produkt“ auswählen. Dadurch wird ein weiterer Tab „Variationen“ angezeigt.

Produktvarianten anlegen

Unter Eigenschaften kann man nun alle Ausprägungen des Attributs Farbe für das angelegte Produkt angeben. In diesem Fall habe ich ein Produkt angelegt, das in den Farben blau, schwarz und weiß sowie mit den Kraftstoff-Typen Diesel, Benzin und Erdgas existiert.

Varianten-Ausprägungen-anlegen

Damit ein Nutzer Ihres Online-Shops auf der Artikeldetailseite eine Variante auswählen kann, muss man beim Anlegen des Produkts die Checkbox „Verwendbar für Variationen“ anhaken.

Varianten anlegen

Unter dem Reiter Variationen bietet WooCommerce dann eine sehr schöne und komfortable Funktion, mit der man automatisch alle möglichen Varianten anlegen kann. Dafür muss man auf den Button „Alle Varianten miteinander verknüpfen“ klicken und WooCommerce legt alle möglichen Kombinationen – in diesem Fall also 9 – an.
Außerdem kann man hier auch definieren, welche Variante als Default-Einstellung auf der Artikeldetailseite angezeigt wird.

Varianten erstellen

Das Ergebnis zeigt dann jede Variante mit verschiedenen Eingabefeldern:

Varianten

Unterschiedliche Bilder und Preise für Varianten

Da  jede Variante ein physisches Produkt in meinem Lager darstellt, kann ich z.B. die Artikelnummer oder die Lagermenge individuell festlegen.  Zwei weitere nützliche Funktionalitäten will ich an dieser Stelle noch erwähnen: für jede Variante kann man ein eigenes Produktbild hinzufügen. Bei unterschiedlichen Kraftstoffarten ist das nicht unbedingt relevant, bei unterschiedlichen Farben allerdings sehr sinnvoll, weil ein User dann bei der Auswahl der jeweiligen Farbe im Shop auch das entsprechende Bild dazu angezeigt bekommt.

Das zweite Feature ist die Möglichkeit, unterschiedliche Preise für die Varianten anzugeben. Das könnte z.B. dann hilfreich sein, wenn der Preis für eine Variante mit Metallic-Lackierung teurer ist als der für eine Variante mit normaler Farbe. Produkte, bei denen Varianten mit unterschiedlichen Preisen existieren, werden im WooCommerce Online-Shop dann auf den Produktlisten und Suchergebnisseiten mit einem ab-Preis angezeigt.

Das Ergebnis im Shop-Frontend sieht dann folgendermaßen aus. Über die Dropdowns Kraftstoff und Farbe kann der Nutzer sich seine Produktvariante auswählen und anschließend in den Warenkorb legen.

Produktvarianten Frontend

 

Im nächsten Blogbeitrag beschreibe ich kurz, wie man auf Basis der angelegten Attribute eine Filternavigation in WooCommerce anlegt.

Autor:

Elbnetz ist ein Team enthusiastischer WordPress-Fans. Wir sind davon überzeugt, dass niemand überkandidelte, komplizierte Websites braucht. Mit WordPress ist es möglich, grandiose Websites zu entwickeln.

  • Eddy

    Diese Kombination von Attributen zu einer Artikelnummernserie ist ja irgendwie ganz nett. Aber in der Praxis wird doch häufiger eine Art Produktbox (Build on demand) gebraucht. Etwas aus der analogen Welt. Gibt es aber nicht. Nirgends.

    Beispiel Präsentkorb:
    Kostet 79€ in der Grundausstattung, die aber variabel ist.
    Das Material kann gewählt werden – Span oder Rattan (Lagerbestand, nicht einzeln erhältlich)

    Inhalt:
    Wurst – 4 Sorten (4 Lagerartikel, auch einzeln erhältlich mit Einzelpreis)
    Käse – 2 Sorten (2 Lagerartikel, auch einzeln erhältlich mit Einzelpreis, 1 davon mit Aufpreis)
    Brezel (Lagerartikel)
    Wein – 3 Sorten (3 Lagerartikel, auch einzeln erhältlich mit individuellen Einzelpreisen)

    Also nichts anderes als eine Einkaufstüte, in der sich die Produkte auch nicht mit der Tüte verbinden. Oder ein Fahrrad. Oder Computer.

    Entscheidend ist, das die Bestandteile ihre Lagerbestände behalten.
    Ist ein Artikel in einer Version nicht mehr vorhanden, sollte er mindestens grau dargestellt werden. Ist er in in keiner Version vorhanden, ist der ganze Präsentkorb nicht mehr verfügbar. Natürlich können die Einzelartikel separat gekauft werden.

    Im Grunde ein sehr logische und modular aufgebaute Produktbox. Warum gibts sowas nirgends? Oder kenne ich nur den Fachbegriff nicht?

    Wer programmiert das mal als Plug- in? Ihr? 🙂

    Antworten
    • Thorsten Faltings

      Ahoi Eddy,

      also direkt ist uns dafür keine Lösung begann und programmieren werden wir so etwas auch nur nach einem Auftrag. Aber vielleicht wirst Du ja bei CodeCanyon fündig?

      Frohe Festtage und einen guten Rutsch!

      Antworten
  • Kathrin Unverdorben

    Hallo! Ich wende mich jetzt einfach hier weil ich sozusagen „verzweifelt“ bin! Ich hoffe ich bin richtig! Falls nicht könntet ihr mich eventuell verweisen! Ich habe einen Webshop mit Woo Commerce angelegt und vertreibe damit verschiedene Produkte. Jedes Produkt gibt es in 19 verschiedenen Farben. Diese hab ich auch als Attribute angelegt. Ich habe jeder Farbe ein Foto zugewiesen. Soweit so gut, nur wenn man im Shop dann die Farbe Gelb anklickt kommt immer das Foto welches ich als Profilbild angelegt habe. Dass passt natürlich nicht. Hab mir schon zich Nächte um die Ohren geschlagen und ich finde einfach das Problem nicht! Kann mir jemand helfen? Liebe Grüße Kathi

    Antworten
    • Thorsten Faltings

      Hallo Kathrin,
      leider können wir das so aus der Ferne auch nicht diagnostizieren. Am besten meldest Du Dich telefonisch bei uns: 040 609 444 310.

      Viele Grüße, Thorsten

      Antworten
  • Dominik

    Ist es auch möglich, die Bilder der Varianten beim „Mutterelement“ anzeigen zu lassen?

    Also anhand vom Beispiel oben: Klicke ich auf „Audi A3“ bekomme ich beispielsweise alle Farbvarianten auf dieser Seite angezeigt, inkl Bild, und kann dann per Klick darauf zur Artikelvariante kommen.

    Würde mich über eine kurze Antwort freuen. Danke schonmal!

    Antworten
    • Elbnetz Redaktion

      Hallo Dominik,

      diese Funktion ist uns nicht bekannt, aber vielleicht hilft Dir ja das Plug-in Woocommerce Color or Image Variation Select.

      Antworten
      • Dominik

        Danke für die schnelle Antwort, schaue ich mir mal an 🙂

        Antworten
  • Simon

    Hallo Hamburg! Danke für die sehr ausführlichen Artikel. Ich bin momentan dabei, einen Woo-shop für einen Kunden zu erstellen und möchte euch kurz fragen ob ihr für das „befüllen“ der Bilder bei Produktvarianten eine „Abkürzung“ kennt?
    Wenn ich ein zb. ein Produkt „Kinderhose“ erstelle, gibt es nach dem klick „sämtliche Variationen miteinander verbinden“ insgesamt 64 Variationen. Alles schön und gut – aber kann es wirklich sein, dass ich bei jeder einzelnen Variation das Bild einzeln einfügen muss? Eigentlich sind es ja nur 8 verschiedene Bilder (für die Farben) welche aber bei jeder der 8 Grössen erscheinen muss.
    Der Shop wird an die 300 Artikel führen.. der Zeitaufwand ist also extreeeeem gross mit dieser Methode. 😉
    Grüsse aus der sonnigen Schweiz

    Antworten
    • Elbnetz Redaktion

      Hallo Schweiz,

      leider kennen wir auch keine Abkürzung für Euer Problem und können Dir leider nicht weiterhelfen :-(.

      Wir und die Leser unseres Blogs wären Dir aber sicherlich sehr dankbar, wenn Du uns einen Lösungsweg mitteilst, so Du den einen findest :-).

      Sorry vielmals und sonnige Grüße zurück aus Hamburg,

      Das Elbnetz Team

      Antworten
      • Julian

        Hi Simon, hi Elbnetz Team,
        Meine Antwort kommt wahrscheinlich viel zu spät, aber besser spät als nie 😉
        Das Plugin Wp. All-Import ermöglicht ein sehr komfortables importieren sehr großer Produktkataloge via csv und XML. Das schöne daran, ich kann mir erst ein Produkt Template vor dem eigentlichen Import generieren und muss dadurch beim anlegen der Produkte wiederkehrendes nicht erneut tun. Das funktioniert aber nur, wenn meine zu importierende Datei sauber vorbereitet ist. Produktbilder sollten bereits auf dem server liegen So dass ich nur noch den Pfad der Bild URL dem Produkt zuordnen brauche. Viele Grüße
        Julian
        ps. Sehr schönes Tutorial ! danke 🙂

        Antworten
  • Paul

    Hallo zusammen,
    trotz des alters des Beitrags eine Frage: Im Screenshot eures Beispiels wird der Preis des Artikels (ohne gewählte Variation) mit „ab 15,000“ angezeigt. Bei mir steht an dieser Stelle aber „0,00€ – 15,000€“. Über einen Tipp, wie ich das ändern kann, oder diese Einblendung sogar ganz verschwinden lassen kann, wäre ich dankbar.

    Vielen Dank & Grüße,
    Paul

    Antworten
    • Elbnetz Redaktion

      Hallo Paul,

      vielen Dank für die Anfrage. Leider können wir den Unterschied nicht mehr nachvollziehen. Wir haben noch mal in den Einstellungsmöglichkeiten nachgeschaut, aber nichts gefunden. Vielleicht war das abhängig vom Theme.

      Deaktivieren kann man die Anzeige mittels dem CSS-Befehl „display:none“. Man muss dazu nur die Klasse oder ID ausfindig machen.

      Beste Grüße
      Das Elbnetz Team

      Antworten
      • Paul

        Hallo Elbnetz Team,

        Vielen Dank für eure Antwort. Über eine kurze Hilfe, wo und an welcher Stelle ich den CSS-Befehl einsetzen muss, wäre ich sehr dankbar.

        Grüße,
        Paul

        Antworten
  • Nicole

    ähm, eine Frage. Woran kann es liegen, dass ich dise Funktion „Eigenschaften“ gar nicht unter meinen Produkten finde? Ich verwende mehrere Plattformen und nirgendwo erscheint das Feld, um meine Variationen z.B. Preis pro Einheit einzugeben. Ein Tipp wäre super 🙂 Danke.

    Antworten
    • Elbnetz Redaktion

      Ahoi Nicole,
      Eigenschaften kannst Du direkt im Dashboard Menü unter „Produkte“ bestimmen.

      Hope that helps,

      Dein Elbnetz Team

      Antworten
  • Bernhard Rauscher

    Hi Elbnetz Team,
    super Artikel! Hab’s genau so gemacht und bin auch happy.
    Hab jetzt aber ein „Problem“, kennt Ihr eine Lösung?
    Ich hab ein Spielzeug in 8 verschiedenen Farben, die unterschiedlich gut laufen. In der WooCommerce Statistik gibt es aber immer nur das Produkt als ein Produkt zu sehen, nicht die Varianten. Das wäre aber für meine Nachbestellungs-Strategie wichtig.
    Oder wo bekommt man irgendwo einen Überblick, welche Varianten wie oft gekauft wurden, ohne doch wieder mit Strichliste Bestellungen auszuwerten oder alle Lagerbestände manuell zu vergleichen?
    Danke!

    Antworten
  • Andre Hoffschröer

    Hallo Elbnetz-Team,

    vielen Dank für den tollen Beitrag. Ich habe mal eine generelle Frage:

    Ich baue gerade einen Shop in dem man sich Möbel konfigurieren kann. Hierfür benutze ich variable Produkte von WooCommerce. Ich habe für die einzelnen Steps mehrere EIgenschaften verwendet. Das sind dann z.B.

    Größe (10 Auswahlmöglichkeiten)
    Holzart (4 Auswahlmöglichkeiten)
    Oberfläche (3 Möglichkeiten)
    Gestell (8 Möglichkeiten)

    Somit habe ich also insgesamt 960 varianten eines Produktes. Ich habe also alle Eigenschaften angelegt und alle Attribute zu den Eigenschaften hinzugefügt und in dem Produkt ausgewählt.

    Wenn ich nun die Massenverarbeitung (50 pro Lauf) verwende, werden die Varianten nicht korrekt gebildet. Es bleibt beim Defaultwert „Jede Größe“, „Jede Holzart“ etc. Ein Teil wird korrekt gebildet, bei anderen Werten bleibt es bei dem Default. Ich habe es nun auch mit weniger Varianten versucht (40). Auch hier das gleiche Phänomen allerdings weniger.

    Nun habe ich etwas recherchiert und das potentielle Problem mit den php_max_var in der php.ini finden können. Hier sind per default 1000 Einträge erlaubt. Nun habe ich über meinen Webspaceanbieter den Wert in der php.ini hochgeschraubt auf 8.000. Dies wird mir in den Systeminfos von WooCommerce auch angezeigt.

    Leider erscheint „Jede“ immer noch bei den Verknüfungen und es werden nicht alle korrekt gebildet. Kann der Fehler noch wo anders liegen oder ist das ein Bug in WooCommerce? Bin langsam am verzweifeln.

    Danke für eure Hilfe 😉

    Antworten
    • Elbnetz Redaktion

      Hallo Andre,

      leider können wir für diesen speziellen Fall keine schlaue Antwort geben, da uns so komplexe Varianten noch nicht untergekommen sind.

      Beste Grüße,
      Elbnetz-Team

      Antworten
  • Andre Hoffschröer

    Hallo Elbnetz-Team,

    vielen Dank für die schnelle Rückmeldung. Schade, dann werde ich noch einmal tiefer reinlesen. Hoffentlich gibt es da eine Lösung und WooCommerce unterstützt überhaupt so viele Variationen.

    Schöne Grüße
    Andre

    Antworten
  • Sara

    Hallo nach Hamburg,
    ich darf nun auch endlich einen Shop mit WooCommerce umsetzen und stoße auf ein komisches Problem.
    Ich habe einem Produkt mehrere Attribute zugewiesen, die im Backend korrekt angezeigt werden im Frontend fehlt jedoch einiges. Ist euch das schon untergekommen und könnt mir sagen, woran das liegt?
    Viele Grüße aus Osnabrück

    Antworten
    • Elbnetz Redaktion

      Hallo nach Osnabrück,

      wenn Du mit „Attributen“ die Eigenschaften meinst, dann musst Du darauf achten, dass Du einen Haken bei „Sichtbar auf der Produktseite“ setzt. Sonst fehlen die Eigenschaften im Frontend.

      Sonnige Grüße aus Hamburg,
      Elbnetz-Redaktion

      Antworten
      • Sara

        Guten Morgen,
        sie fehlen nicht komplett, sondern es werden nur ein paar wenige wahllos „unterschlagen“.

        Antworten
  • Andre Hoffschröer

    Hallo zusammen,

    für alle mit dem gleichen Problem (siehe oben / viele Varianten) kurz zur Info:

    Das Problem wurde nun mit dem letzte WooCommerce update behoben. Es war wohl ein WooCommerce Bug. Nun werden alle Varianten nicht mehr mit „alle/any“ im Backend angezeigt, nachdem der automatische Lauf gestartet wurde.

    Voraussetzung hierfür natürlich:
    Erhöhung des Limits von php_max_var

    Schöne Grüße
    Andre Hoffschröer

    Antworten
    • Elbnetz Redaktion

      Hallo Andre,

      vielen Dank für den Hinweis!

      Besten Gruß,
      Elbnetz-Redaktion

      Antworten
  • Carlo

    Woocommerce: Ich habe da Artikel, mit jeweils 20 Attributen. kann ich da ein Template machen, damit ich nicht jedesmal die ganzen Attribute anlegen muss?

    Antworten
    • Elbnetz Redaktion

      Ja, Sie können ganz einfach angelegte Produkte in der Übersicht duplizieren.

      Sonnige Grüße,
      Das Elbnetz-Team

      Antworten
  • Christian

    Hallo, danke für die gute Information!

    Bei den Eigenschaften wird bei mir immer ein Tab angelegt, den ich aber garnicht haben möchte. Wie bekomme ich diesen weg?
    Danke!

    Antworten
  • Carsten

    Hi, danke für Euren tollen BLOG…

    Wenn ich einen Variantenartikel anlege, z.B.: Auto, Varianten sind wie in euren Beispiel rot, blau und schwarz… Dann kann ich diese zwar unter Eigenschaften anlegen und unter Varianten erzeugen. Im Shop erscheint dann das Auswahlfeld in den die Varianten auszuwählen sein sollten. Allerdings steht dort nur „Bitte wähle eine Ausführung“… Kennst jemand von Euch das Problem?

    Danke Euch im Voraus

    Antworten

Ein Kommentar? Gern!

Ihnen gefällt unser Blog?

Dann wird Sie unser
Buch begeistern!

Mehr erfahren

Ihnen gefällt unser Blog?