21 Tipps für das WooCommerce-Website-Design

Die Gestaltung Ihrer WooCommerce-Website trägt zur Kundengewinnung bei. Bedenken Sie, dass Menschen auf Ihrer Website unterschiedlich einkaufen. Sie haben nur wenig Zeit, Besucher davon zu überzeugen, Ihrer Marke zu vertrauen und bei ihr zu kaufen. In diesem Beitrag geben wir Ihnen Tipps, wie Sie die entscheidenden Sekunden optimal nutzen, um Ihre Kunden zu überzeugen – mit diesen 21 Tipps für das WooCommerce-Website-Design.

Tipps zum WooCommerce-Website-Design

1) Benutzerdefiniertes WooCommerce-Suchfeld

Sorgen Sie dafür, dass die Suchleiste immer verfügbar ist. Ihre Besucher möchten schnell und einfach finden, wonach sie suchen, ohne lange suchen zu müssen. Sorgen Sie dafür, dass die Suchfunktion überall gut sichtbar angezeigt wird.

• Don't forget about mobile:Den meisten Menschen ist nicht bewusst, dass die meisten Suchseiten mittlerweile mobil sind. Machen Sie es mobilfreundlich
• Filter the results:Sorgen Sie für eine intelligente Suche. Wenn Benutzer beispielsweise „Holz“ eingeben, werden alle Produkte mit dem Tag „Holzböden“ angezeigt.
• Tools:Wir empfehlen die Verwendung der Product Finder-Erweiterung von WooCommerce:https://woocommerce.com/products/product-finder/
• Be prominent:Sorgen Sie dafür, dass Ihre Suchleiste hervorsticht. Gestalten Sie sie so, dass sie für das Layout und/oder die Schaltfläche eine andere Akzentfarbe haben kann.

To Enhance your WooCommerce Search, try this plugin: https://docs.woocommerce.com/document/woocommerce-product-search/

2) Organisierte Navigation

Online shoppers come to your site looking for speed and convenience of shopping. Make navigation as simple but detailed as possible to get them where they need to be. Always place your navigation bars where visitors expect to see them. The standard positions are vertically down the left of the page and horizontally at the top. It’s even better if you can make the horizontal navigation bar remain at the top of the screen as you scroll down the page. You will also need to ensure that your navigation menus will work with any screen size or device. With users shopping from phones, tablets, desktops and a number of other devices, you want the site to react the same and provide the same easy navigation across all platforms.

Bewährte Methoden für die Navigation

• Categorization is key:Achten Sie bei der Navigation darauf, dass die Kategorisierung für die angebotenen Produkte oder Dienstleistungen verständlich ist. Verwenden Sie spezielle Namen, deren Bedeutung für neue Benutzer nicht verständlich ist. Das kann für sie frustrierend sein, da Sie nur wenige Sekunden Zeit haben, um sie zu einer Reaktion zu bewegen und den Kaufprozess fortzusetzen. Eine klare und hierarchische Struktur ist wichtig.
• Make things sticky:Wir möchten die Hauptnavigation fixieren, damit beim Scrollen die Hauptlinks immer sichtbar sind. Wenn Sie viele Produkte haben, versuchen Sie es mit einer Mega-Navigation mit fixer Navigation.
• It ok to have several types of navigation:Die horizontale Hauptnavigation funktioniert in den meisten Fällen. Je nach Informationsmenge ist sie jedoch manchmal auch sinnvoller. Beachten Sie, dass Sie je nach Bereich der Website verschiedene Navigationsarten verwenden können. Beispielsweise kann eine obere Leiste über dem Logo eher Links und Symbole zu Kundenservice und Shopping enthalten, die Hauptnavigation kann die wichtigsten Dienste und/oder Bereiche der Website darstellen und die Fußzeile kann all dies enthalten.

Navigationsfehler:

• Non-standard style navigation:Das Design mag cool wirken, aber für einen erfahrenen, geschulten Benutzer ist es wichtig, die gleichen Muster in der Benutzeroberfläche zu sehen, da er Ihr Produkt kaufen und kennenlernen möchte und nicht davon beeindruckt sein möchte, wie gut Ihr Design ist. Wenn Sie Zweifel haben und etwas anderes ausprobieren möchten, testen und messen Sie mit verschiedenen Stilen.
• Using generic links:Wenn Sie auf Ihrer Website Produkte verkaufen und in der Hauptnavigation nur „Produkte“ angezeigt wird, verkaufen Sie sich selbst unter Wert, da der Benutzer finden muss, was Sie verkaufen. Versuchen Sie es mit einer kleinen oberen Navigation über dem Logo und dann mit der Hauptnavigation, die entweder Produktkategorien oder die Produkte selbst enthält.
• Don't miss the breadcrumb:Eines der einfachsten und effektivsten Tools für Benutzerfreundlichkeit und SEO sind ausgelassene Sites.

3) Verwandte Produkte, Up-Sells und Cross-Sells

Durch die Personalisierung des Besuchererlebnisses vermitteln Sie Ihren Besuchern das Gefühl, dass Sie auf ihre Bedürfnisse und Wünsche eingehen. Ähnliche Produkte werden auf der Produktseite angezeigt. Sie können Ihren Besuchern auch zeigen, welche Produkte andere im Zusammenhang mit den von ihnen angesehenen Artikeln gekauft haben.

Up-sells: This could be a large quantity, better version, or the same product bundled with another which is displayed in the buying experience to push a higher sale.

Related Products: You can have products appear in the product info page, but they are products that are meant to be purchased in addition to the one that the customer is viewing.

Cross-sell: You can have items appear on the product page and in the shopping cart to help encourage an impulse to buy.

Check out built in features of WooCommerce: https://docs.woocommerce.com/document/woocommerce-widgets/

Here is a great extension for Upselling and Cross Selling: https://docs.woocommerce.com/document/related-products-up-sells-and-cross-sells/

Sie können auch kostenpflichtige Plugins verwenden, um bestimmte Funktionen wie YITH zu erreichen

https://yithemes.com/themes/plugins/yith-woocommerce-recently-viewed-products/

4) Machen Sie Einkaufswagen dauerhaft

Speichern des Warenkorbs:

Richten Sie beim Einkaufen Ihrer Besucher ein Langzeit-Cookie ein, damit sie später wiederkommen und dort weitermachen können, wo sie aufgehört haben. Das Leben ist voller Unterbrechungen, und Sie möchten keinen Verkauf verlieren, nur weil Besucher beim letzten Besuch vergessen haben, was in ihrem Einkaufswagen war. Sie können direkt zur Kasse gehen, um die Bestellung abzuschließen, oder mit einer praktischen Suchleiste und Bildern anderer potenzieller Interessenten entscheiden sie sich vielleicht, noch etwas länger zu bleiben und einzukaufen.

Checkout: https://codecanyon.net/item/save-share-cart-for-woocommerce/5568059

WooCommerce Cookies

WooCommerce erstellt drei verschiedene Arten von Cookies und hat diese bereits integriert. Die ersten beiden Cookies enthalten Informationen über den gesamten Warenkorb und helfen WooCommerce zu erkennen, wann sich die Warenkorbdaten ändern. Das letzte Cookie (wp_woocommerce_session_) enthält einen eindeutigen Code für jeden Kunden, sodass WooCommerce weiß, wo die Warenkorbdaten in der Datenbank für jeden Kunden zu finden sind.

• woocommerce_cart_hash
• woocommerce_items_in_cart
• wp_woocommerce_session_

Wish Lists:

Sie können auch Wunschlisten zum Menü hinzufügen. Wunschlisten speichern einen Artikel für den Käufer, ohne ihn aus dem Bestand Ihrer Website zu entfernen. Die Verwendung des Warenkorbs als langfristige Wunschliste kann zu Problemen mit Ihrem Bestand führen. Die Bereitstellung einer Alternative kann einige dieser Probleme lindern.

Try the WooCommerce Wishlists Plugin: https://woocommerce.com/products/woocommerce-wishlists/

5) Zeigen Sie Ihre Kundenservice-Links und Telefonnummer deutlich an

Alle Online-Käufer möchten sich auf Ihrer Website sicher und geborgen fühlen. Ihre Referenzen mögen überzeugend sein, doch ein Käufer, der Ihre Website zum ersten Mal besucht, sucht nach Anzeichen dafür, dass Sie tatsächlich glaubwürdig sind. Der beste Weg, sich neuen Kunden vorzustellen, ist die Transparenz Ihrer Kontaktinformationen. Die Anzeige Ihrer Telefonnummer und Kundenservice-Links an prominenter Stelle auf der Website trägt dazu bei, dass sich Ihre Kunden wohlfühlen und die Gewissheit haben, dass ihre Kreditkarteninformationen bei Ihnen sicher sind.

6) Nennen Sie prominente Partner und Mitarbeiter

In establishing your credibility nothing is off limits. If you have partners or associates that your guests will recognize, drop those names. If you can show that you are associated with well established and successful companies they are more likely to feel safe shopping on your site. Wir sind zertifizierte WooCommerce-Experten und stolz darauf!

7) Rotierende Karussells sind out

Carousels have their positive points but they are not SEO friendly. They do help you to show more products and promotions, but they slow your site down and users find them annoying. They move too fast for any real chance to process what is in them. If you must use a carousel, incorporate one that will stop the autorotation when the cursor hovers over it. This gives the customer the opportunity to see the item without actually going to the page with a full description. The best practice is just using static images. Your visitors aren’t interested in bells and whistles. They want great products at the best possible price.

8) Machen Sie Ihren Verkaufsbereich zum Hingucker

Make them feel hungry. The majority of online shoppers will not buy a product until it goes on sale. Prominently display a link to your discounted products so these shoppers will have a direct route to the items they seek. Use a different color for the link or use lettering that draws attention. Bargain shoppers are a great audience to target because they like to tell others what they found at an amazing price. That is free advertising after the sale.

Spezieller Bereich in der Hauptnavigation:

Site Wide Sale:

On Product Lists:

9) Kostenloser Versand

Announcing your free shipping in a prominent place on the homepage will help to cut way down on the number of abandoned shopping carts you encounter.Many shoppers will fill their cart only to leave it when they see the insanely high shipping charges. Some will look for your shipping policy before ordering, so make sure you have it in a good position on your page. You will want to offer other shipping options for those customers wanting faster delivery as well.

Retail study: 9 out of 10 consumers say free shipping No. 1 incentive to shop online.

10) Bringen Sie Sparmöglichkeiten auf einer Verkaufsseite zusammen

Verlinken Sie von Ihrer Homepage zu einem Bereich, der sich dem Sparen widmet. Hier finden Sie Informationen zu kostenlosem Versand, Gutscheincodes, Treuepunkten, Rabatten und weiteren Werbegeschenken. Möglicherweise ist dies der meistbesuchte Bereich Ihrer Website. Die Schnäppchenjäger werden Sie wahrscheinlich schon allein deshalb als Lesezeichen speichern.

Add a dedicated sales page: Popular ideas could be the deal of the month/week/day or just creating a page for a one-time holiday special.

11) Verwenden Sie eine Modalbox

Avoid clutter on your WooCommerce homepage by using a modal window. Showcase a message of importance without making it a part of the homepage. This frees up space on your storefront for more products. These boxes are only helpful if used properly. They have a bad reputation for containing advertising that was nothing more than annoying. Ensure that you do not overuse them and make the button to close the box readily available. Make sure you have a cookie in place so that a user will not see more than one box per visit and they will not see a box at every visit.

12) Live-Chat-Support

Live chat is a great way to immediately address questions, concerns or general doubt that a customer may be having on your WooCommerce store. Very few shoppers will actually call a customer support line and many will leave in frustration. Live chat software is a worthwhile investment to stop buyers doubt in its tracks. Customers get the feeling of a personal touch. Live chat can provide efficient customer service and prevent lost sales.

13) Übermäßige Vertrauensabzeichen werfen rote Fahnen

Vertrauensabzeichen sind eine gute Sache, aber übermäßiger Einsatz kann ein falsches Sicherheitsgefühl hervorrufen. Begrenzen Sie die Anzahl der Abzeichen und stellen Sie sicher, dass sie weithin anerkannt sind. Ein übermäßiger Einsatz kann das Vertrauen, das sie vermitteln sollen, untergraben.

14) Testen Sie Ihre WooCommerce-Produkt- und Kategorieseite

A/B-Tests sind eine hervorragende Möglichkeit, die effektivste Art der Produktpräsentation zu ermitteln. So erhalten Sie zwei verschiedene Darstellungsformen für Ihre Kunden und erhalten im Laufe der Zeit Statistiken darüber, welche für Ihre Website am besten geeignet ist. Experimente mit A/B-Tests können das Besuchererlebnis und Ihr Geschäftsergebnis deutlich verbessern.

A couple tools we use with our clients: Visueller Web-Optimierer and Heißes Glas.

See some case studies here: https://vwo.com/blog/10-kickass-ab-testing-case-studies/

15) Besucher durch Knappheit fesseln

Displaying messages that convey urgency is one way to hook visitors into a sale. If you show them that there are only limited quantities of an item left or make them feel as though their size may disappear soon, they are more likely to go ahead and purchase the item before it’s too late. The trick is to make these messages subtle so they feel like you are doing them a favor when you are ultimately urging them to buy now rather than later or not at all.

Here is a free plugin to try out: https://wordpress.org/plugins/woo-custom-stock-status/

16) Scrollen ist ok

Clients sometimes mention about wanting items above the fold. We respond by asking "Which fold are you referring too?". With so many different size monitors scrolling has become irrelevant. Mobile has also completely changed this game by dominating the statistics making desktops a very small percentage when trying to target a fold. Tony Haile from Chartbeat has posted numerous amounts of data to back this up. Do not sell yourself short, give your visitors more on the homepage to support SEO, usability, and merchandising of your products

Check out more statistics here at Time.com: http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/

17) Ermutigen Sie sie zum Teilen

Geben Sie Käufern zahlreiche Möglichkeiten, Ihre Produkte mit Freunden und Familie zu teilen. Stellen Sie Teilen-Buttons zur Verfügung und bitten Sie sie direkt zum Teilen. So wird nicht nur Ihr Produkt mehr Menschen präsentiert, sondern auch Ihre Marke und ein Link zu Ihrer Website. Durch die Bereitstellung von Teilen-Möglichkeiten steigern Sie den Traffic und die Conversions Ihrer Website erheblich.

18) Installieren Sie eine Heatmap auf Ihrer WooCommerce-Homepage

Don't take our word for things. Analyze your homepage before making any change to understand where your click saturation, visitor scrolling, and interest is per channel (Bing, Google, Facebook, Etc.). Keep in mind your best-converting channel can be entirely different than your least. You want to make sure you understand first what is going on with your site prior to doing any changes.

19) Häufig gestellte Fragen

Es gibt eingefleischte FAQ-Nutzer, die nach Ihren häufig gestellten Fragen suchen. Geben Sie einen Link an und beantworten Sie die Fragen, als würden Sie sie einem Fünfjährigen erklären. Informationen zu Versand, Garantie und Rücksendungen sollten enthalten sein. Fügen Sie außerdem regelmäßig gestellte Fragen und Antworten hinzu, um Ihre FAQs aktuell zu halten. So müssen Sie nicht immer wieder dieselben Fragen beantworten.

A great example is at Weber: https://consumer-care.weber.com/hc/en-us/categories/360001489471-FAQs

20) Kündigen Sie Ihre Presseberichterstattung an

If you’ve been mentioned in the news or have press releases available, include them on the site. Display the logos of the media outlets to be readily recognized by visitors. Most will never read the press release but having it there lends credibility that will foster trust in your site. If you do have media attention, link the logos to any articles about your company.

Check out the FLYTE homepage: https://flyte.se/

21) Integrieren Sie Benutzerfeedback

Nutzerfeedback kann ein nützliches Instrument sein, um die Glaubwürdigkeit Ihrer Kunden zu stärken. Produktbewertungen, kurze Zitate, Dankesschreiben oder Bilder von Kunden mit Ihrem Produkt können Ihren Umsatz deutlich steigern. Sie können diese Feedbacks in Ihre Produktbeschreibungen oder in Seitenleisten auf der gesamten Website einfügen.

So zeigen Sie Bewertungen zu Ihrem Unternehmen an:

We like using rich plugins for business listings - https://richplugins.com

To get reviews:

We Recommend trying out: WooCommerce Product Review Pro

Using these WooCommerce Web Design tips for your homepage will go a long way toward improving the user experience of your customers while solidifying your credibility and landing more sales. Placing all the vital information where it belongs and displaying the right products can dramatically increase your conversions. Social media shares and good product reviews will improve SEO and drive traffic. Bright Vessel is a certified WooCommerce-Experte which can help you build, promote, and improve your storefront. Kontaktieren Sie uns noch heute.