In diesem Tutorial finden Sie:<\/p>\n
- \n
- Eine Definition von WooCommerce-Attributen<\/li>\n
- So f\u00fcgen Sie Ihrem Shop Attribute hinzu<\/li>\n
- So geben Sie Produktattributen<\/li>\n
- So lassen Sie Attribute auf Produktseiten anzeigen<\/li>\n
- So zeigen Sie Farbfelder anstelle von Dropdown-Men\u00fcs an<\/li>\n<\/ul>\n
Beginnen wir mit einem \u00dcberblick \u00fcber die Produktattribute.<\/p>\n
Was sind WooCommerce-Produktattribute?<\/h2>\n
Mit WooCommerce-Attributen k\u00f6nnen Sie Produkten zus\u00e4tzliche Daten hinzuf\u00fcgen, damit Sie Produktvariationen erstellen k\u00f6nnen.<\/p>\n
Wenn Sie beispielsweise einen Hut in Gr\u00fcn und Gelb zum Verkauf anbieten, m\u00f6chten Sie die Farben nicht als zwei separate Produkte verkaufen. Da es sich um das gleiche Hutdesign, aber in verschiedenen Farben handelt, w\u00fcrden Sie stattdessen ein Attribut verwenden. Sie w\u00fcrden ein neues \u201eFarb“-Attribut hinzuf\u00fcgen und dann Ihrem Hut sowohl \u201egr\u00fcne“ als auch \u201egelbe“ Farbvariationen hinzuf\u00fcgen.<\/p>\n
Lassen Sie uns mit einigen Screenshots und echten Beispielen Hand anlegen.<\/p>\n
So f\u00fcgen Sie neue Produktattribute hinzu<\/h2>\n
Attribute k\u00f6nnen \u00fcber das Men\u00fc Attribute hinzugef\u00fcgt werden, das unter dem Men\u00fc Produkte aufgef\u00fchrt ist.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ea4c51b.png\")
<\/a><\/p>\nWenn Sie den WooCommerce-Setup-Assistenten ausgef\u00fchrt haben, sehen Sie bereits erstellte Farb- und Gr\u00f6\u00dfenattribute.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ecd59c2.png\")
<\/a><\/p>\nSie k\u00f6nnen bereits "Begriffe" f\u00fcr die Farb- und Gr\u00f6\u00dfenattribute hinzugef\u00fcgt sehen<\/p>\n
Um ein neues Attribut hinzuzuf\u00fcgen, m\u00fcssen Sie lediglich einen Namen und einen Slug eingeben und auf Attribut hinzuf\u00fcgen klicken.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ef5db4d.png\")
<\/a><\/p>\nEin Slug ist ein Name, der ausschlie\u00dflich in Kleinbuchstaben f\u00fcr URLs verwendet wird. Ersetzen Sie alle Leerzeichen durch Bindestriche im Slug.<\/p>\n
Nachdem Sie Ihr neues Attribut erstellt haben, klicken Sie auf den Link Begriffe konfigurieren, um dem Attribut Optionen hinzuzuf\u00fcgen.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f15d5c2.png\")
<\/a><\/p>\n\u201eBegriffe“ ist ein vages Wort, aber es ist das Wort, das WooCommerce f\u00fcr Optionen innerhalb Ihres Attributs verwendet. \u201eFarbe“ ist beispielsweise ein Attribut, und \u201eblau“, \u201egrau“ und \u201egr\u00fcn“ sind einige seiner Begriffe.<\/p>\n
In meinem Beispiel habe ich ein Attribut namens "Material" erstellt, also f\u00fcge ich einige neue Materialien wie "Glas" und "Kunststoff" hinzu.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f3cebf1.png\")
<\/a><\/p>\nSie k\u00f6nnen beliebig viele Attribute mit beliebig vielen Begriffen hinzuf\u00fcgen.<\/p>\n
Sie k\u00f6nnen zwar Attribute erstellen, die f\u00fcr einzelne Produkte spezifisch sind, aber am besten f\u00fcgen Sie sie wie folgt \u00fcber das Men\u00fc "Attribute" hinzu. Dies h\u00e4lt sie f\u00fcr alle Produkte verf\u00fcgbar und erleichtert die Verwaltung erheblich. Das Hinzuf\u00fcgen von Attributen zu einzelnen Produkten wird schnell un\u00fcbersichtlich und unhandlich.<\/p>\n
Nachdem Sie nun Ihr eigenes benutzerdefiniertes Attribut erstellt haben, k\u00f6nnen Sie es einem Produkt wie folgt hinzuf\u00fcgen.<\/p>\n
So f\u00fcgen Sie einem Produkt Attribute hinzu<\/h2>\n
Nachdem Sie Ihre Attribute erstellt haben, k\u00f6nnen Sie sie Ihren Produkten zuweisen.<\/p>\n
Besuchen Sie zun\u00e4chst eines Ihrer Produkte im Admin-Dashboard. Suchen Sie dann den Abschnitt Produktdaten und klicken Sie auf den Pfeil rechts, um ihn zu erweitern.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f5dbe8e.png\")
<\/a><\/p>\nKlicken Sie nach dem Erweitern auf den Abschnitt Attribute in der linken Seitenleiste.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f7b6e44.png\")
<\/a><\/p>\nIn meinem Beispiel hat das Produkt bereits ein Attribut, Farbe, das hier aufgef\u00fchrt ist:<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f9a85b2.png\")
<\/a><\/p>\nWenn Sie auf ein Attribut klicken, wird es erweitert, sodass Sie verschiedene Werte\/Begriffe hinzuf\u00fcgen und entfernen k\u00f6nnen.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8fb9e1f7.png\")
<\/a><\/p>\n\u00dcber die Schaltfl\u00e4che Neu hinzuf\u00fcgen k\u00f6nnen Sie ganz neue Begriffe hinzuf\u00fcgen, die dann f\u00fcr alle Produkte verf\u00fcgbar sind.<\/p>\n
Sie k\u00f6nnen in den Abschnitt Wert(e) klicken, um vorhandene Begriffe auszuw\u00e4hlen, die dem Produkt hinzugef\u00fcgt werden sollen.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8fd6df65.png\")
<\/a><\/p>\nDiese Begriffe stammen aus dem Men\u00fc Produkt > Attribute<\/strong><\/p>\n
Mit dieser Dropdown-Option k\u00f6nnen Sie dem Produkt weitere Attribute hinzuf\u00fcgen:<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ff8fb6d.png\")
<\/a><\/p>\nWenn Sie sich fragen, wie das funktionieren w\u00fcrde, w\u00e4re ein Beispiel ein T-Shirt, das sowohl Farb- als auch Gr\u00f6\u00dfenoptionen ben\u00f6tigt. Sie w\u00fcrden sowohl ein Farbattribut als auch ein Gr\u00f6\u00dfenattribut hinzuf\u00fcgen.<\/p>\n
Wie bereits erw\u00e4hnt, empfehle ich nicht, benutzerdefinierte Produktattribute zu erstellen, aber Sie k\u00f6nnen bereits vorhandene Attribute mit der oben gezeigten Dropdown-Auswahl ausw\u00e4hlen.<\/p>\n
Sie werden vielleicht nicht erwarten, dass Ihre Attribute nach dem Hinzuf\u00fcgen nicht automatisch auf der Produktseite angezeigt werden.<\/p>\n
So zeigen Sie Ihre Attribute auf der Produktseite an<\/h2>\n
Es ist ein verwirrender Teil von WooCommerce, Ihre Attribute auf den Produktseiten anzuzeigen.<\/p>\n
Wenn Sie einem Produkt Attribute hinzuf\u00fcgen, werden die Variationen auch dann nicht auf Ihrer Website angezeigt, wenn Sie das Kontrollk\u00e4stchen "Auf Produktseite sichtbar" aktivieren.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9017a0fe.png\")
<\/a><\/p>\nDas Aktivieren dieses Kontrollk\u00e4stchens ist nur ein Schritt im Prozess<\/p>\n
Der einzige Unterschied auf der Produktseite sind standardm\u00e4\u00dfig die Attribute und ihre Werte, die im Abschnitt Zus\u00e4tzliche Informationen aufgef\u00fchrt sind.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9037fb94.png\")
<\/a><\/p>\nUm die Dropdown-Liste f\u00fcr Ihre Attribute hinzuzuf\u00fcgen, m\u00fcssen Sie Ihr Produkt zun\u00e4chst mit dieser Dropdown-Liste von einem \u201eEinfachen Produkt“ zu einem \u201eVariablen Produkt“ umstellen:<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9056b83e.png\")
<\/a><\/p>\nDann m\u00fcssen Sie den Abschnitt Attribute \u00f6ffnen und das Kontrollk\u00e4stchen "F\u00fcr Variationen verwendet" f\u00fcr jedes Attribut aktivieren.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9079e16c.png\")
<\/a><\/p>\nStellen Sie sicher, dass Sie das Kontrollk\u00e4stchen f\u00fcr alle Attribute aktivieren, die Sie verwenden m\u00f6chten<\/p>\n
Wenn Sie fertig sind, klicken Sie auf die Schaltfl\u00e4che Attribute speichern.<\/p>\n
Klicken Sie anschlie\u00dfend auf den Abschnitt Variationen. Sie k\u00f6nnen das Dropdown-Men\u00fc verwenden, um jeweils eine Variation hinzuzuf\u00fcgen, aber es geht schneller, wenn Sie die Option "Variationen aus allen Attributen erstellen" verwenden.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c909c73c5.png\")
<\/a><\/p>\nSobald Sie auf Go klicken, erstellt WooCommerce alle verschiedenen m\u00f6glichen Produktvarianten.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c90c2f36c.png\")
<\/a><\/p>\nMein Produkt hat zwei Variationen aufgrund der hinzugef\u00fcgten grauen und roten Farbbezeichnungen<\/p>\n
Der letzte Schritt, bevor Ihre Variationen auf der Produktseite angezeigt werden, besteht darin, jeder einzelnen einen Preis zuzuweisen.<\/p>\n
Sie sollten alle Felder ausf\u00fcllen, aber in meinem Beispiel f\u00fcge ich nur Preise hinzu.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c90e83994.png\")
<\/a><\/p>\nWenn Sie alle Ihre Variationen mit Preisen versehen haben, klicken Sie auf die Schaltfl\u00e4che \u00c4nderungen speichern.<\/p>\n
Sie sehen nun ein Dropdown-Men\u00fc, in dem K\u00e4ufer Ihre Variationen ausw\u00e4hlen k\u00f6nnen.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9111378f.png\")
<\/a><\/p>\nIn meinem Beispiel wird nur ein Attribut verwendet, aber Sie k\u00f6nnen so viele hinzuf\u00fcgen, wie Sie m\u00f6chten. Jedes Attribut erh\u00e4lt eine eigene Dropdown-Liste mit den verf\u00fcgbaren Begriffen.<\/p>\n
Dies funktioniert zwar einwandfrei, die Dropdown-Auswahl sorgt jedoch nicht f\u00fcr das beste Einkaufserlebnis.<\/p>\n
So zeigen Sie Farbfelder an<\/h2>\n
Das Standard-Dropdown-Men\u00fc f\u00fcr Produktvariationen schafft keine gute Benutzererfahrung<\/a>.<\/p>\n
Stellen Sie sich vor, Sie haben ein T-Shirt in f\u00fcnf Farben. Mit einem Dropdown-Men\u00fc k\u00f6nnen K\u00e4ufer nicht sehen, wie viele Farben verf\u00fcgbar sind, bis sie darauf klicken, und sie sehen nicht die tats\u00e4chlichen Farbt\u00f6ne. Sie sehen beispielsweise nur das Wort \u201eBlau“ anstelle des Blautons, den Ihr Produkt verwendet.<\/p>\n
Die M\u00f6glichkeit, den Besuchern Farbmuster zur Auswahl zu geben, sorgt f\u00fcr ein viel besseres Einkaufserlebnis.<\/p>\n
![\"Was](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9131f1dc.png\")
<\/a><\/p>\nObwohl diese Option in WooCommerce nicht verf\u00fcgbar ist, gibt es viele gro\u00dfartige Plugins, die diese Funktion zu Ihrer Website hinzuf\u00fcgen k\u00f6nnen:<\/p>\n
Diese 6 Produktvariations-Plugins f\u00fcr WooCommerce machen Ihre Website einfacher zu bedienen<\/a><\/p>\n
Die in dieser Sammlung aufgef\u00fchrten Plugins k\u00f6nnen das Dropdown-Men\u00fc f\u00fcr Farb-, Gr\u00f6\u00dfen- und Stiloptionen ersetzen, neue Galeriebilder pro Variation hinzuf\u00fcgen und vieles mehr.<\/p>\n
Beherrschung von WooCommerce-Attributen<\/h2>\n
Jetzt wissen Sie, was WooCommerce-Produktattribute sind und wie Sie sie zu Ihrer Website hinzuf\u00fcgen k\u00f6nnen.<\/p>\n
Die Verwendung von Attributen ist ein wichtiger Bestandteil beim Betrieb Ihres Shops und beim Verkauf von Produktvariationen.<\/p>\n
Wenn Sie ein hervorragendes neues Design f\u00fcr Ihr Gesch\u00e4ft w\u00fcnschen, habe ich in diesem Tutorial das Design Modern Store verwendet<\/a>. Es ist vollst\u00e4ndig reaktionsschnell, anpassbar und wird schnell geladen.<\/p>\n