Installieren und Einrichten eines neuen WordPress-WooCommerce-Designs

WooCommerce ist die beliebteste und „anpassungsfähigste E-Commerce-Plattform für den Aufbau Ihres Online-Geschäfts“. Sie können WooCommerce kostenlos herunterladen, aber Sie werden erst richtig in Erscheinung treten, wenn Sie WordPress WooCommerce-Plugins und -Themen verwenden.

Müssen Sie wirklich ein WooCommerce-Design verwenden??

Obwohl es nicht erforderlich ist, kann ich es wärmstens empfehlen.

WooCommerce-Designs sind nicht nur auf E-Commerce ausgerichtet, sondern das gesamte Thema ist auf WooCommerce-Stile ausgerichtet. Das CSS, das WooCommerce verwendet, um zu definieren, wie Produkte angezeigt werden, wird dann vom WordPress WooCommerce-Design verwendet, um wirklich alles für ein paar der am schönsten gestalteten E-Commerce-Geschäfte zu vereinen.

Ganz zu schweigen davon, dass das Installieren und Einrichten eines neuen WordPress WooCommerce-Designs nicht schwieriger ist als das Einrichten eines anderen WordPress-Themes.

Lass mich dir zeigen, wie es geht.

Installieren und Einrichten eines neuen WordPress-WooCommerce-Designs

Wenn Sie bereits WooCommerce installiert haben, ist das großartig! Wenn nicht, empfehle ich Rachel McCollins Beginner's Guide zur Verwendung von WooCommerce. Dies führt Sie in WooCommerce ein und führt Sie durch alle Schritte, die erforderlich sind, um Ihre Online-Storefront in Betrieb zu nehmen.

Beginnen wir nun mit der Installation und Einrichtung eines neuen WordPress-WooCommerce-Designs.

Schritt 1: Dummy-Daten installieren

Wenn Sie Ihre Produkte bereits zu WooCommerce hinzugefügt haben, empfehle ich, diesen Schritt zu überspringen und mit Schritt 2 zu beginnen.

Durch die Installation von Dummy-Daten werden Ihrem Geschäft fiktive Produkte hinzugefügt, um Sie bei der Visualisierung Ihres Geschäfts mit Produkten zu unterstützen. Nachdem Sie die Installation abgeschlossen und Ihr neues WordPress WooCommerce-Design eingerichtet haben, möchten Sie es löschen alles die Dummy-Daten, bevor Sie Ihre Produkte hinzufügen. Andernfalls besteht die Gefahr, dass Sie versehentlich Ihre eigenen Produktdaten löschen.

Die Dummy-Daten sind in Ihrem WooCommerce-Plugin enthalten. Wenn Sie WooCommerce in WordPress Admin installiert haben, laden Sie das Plugin aus dem WordPress Plugin-Verzeichnis auf Ihren Computer herunter. Dies ist einfacher, als sich bei Ihrem FTP-Server anzumelden, in Ihr Plugin-Verzeichnis zu gehen und die Dummy-Daten von dort herunterzuladen.

Wenn der Download abgeschlossen ist, entpacken Sie die Datei, damit Sie Ihre Dummy-data.xml-Datei importieren können.

Gehen Sie zu Ihrem Werkzeuge und klicken Sie auf Einführen:

Lassen Sie sich nicht durch die "WooCommerce-Steuersätze (CSV)" verwirren. Wenn Sie möchten, können Sie dies später tun. Für die WooCommerce Dummy-Daten sollten Sie auswählen WordPress.

Es ist sehr wahrscheinlich, dass Sie das WordPress Importer-Plugin nicht installiert haben Jetzt installieren.

Einmal installiert, fahren Sie fort und Aktivieren Sie den Plugin & Run Importer.

Wissen Sie noch, wo Sie das WooCommerce-Plugin heruntergeladen und entpackt haben? Großartig! Nun müssen Sie klicken Datei wählen und mach deinen Weg dorthin.

Ihre Dummy-Daten sollten sich in Ihrem entpackten Ordner befinden: (woocommerce.version.number)> woocommerce> Dummy-Daten.

Öffnen Sie den Dummy-Datenordner und wählen Sie dummy-data.xml, und Sie können die Datei hochladen und importieren.

Dies ist das letzte, was Sie tun müssen, bevor Sie alle Dummy-Daten importieren.

Einige davon sind persönliche Vorlieben, aber ich mache es (Screenshot weiter unten):

Importieren Sie den Standardautor "wooteam", anstatt einen neuen Autor zu erstellen oder einen bereits vorhandenen Autor zu verwenden. Auf diese Weise wissen Sie, welcher Inhalt basierend auf dem Namen des Autors importiert / erstellt wurde (ich empfehle, den Autor zu löschen, wenn Sie die Dummy-Daten entfernen, nachdem Sie Ihr neues WordPress WooCommerce-Design installiert und eingerichtet haben.).

Ich empfehle dir auch Laden Sie Anhänge herunter und importieren Sie sie Damit haben Sie Bilder mit jedem Produkt verknüpft (auch hier sollten Sie sicherstellen, dass das Medium entfernt wird, wenn Sie mit den Dummy-Daten fertig sind)..

Wenn Sie diese Auswahl getroffen haben, reichen Sie Folgendes ein:

Besuchen Sie yourwebsite.com/shop/ und Sie sollten einen vollständig importierten Test-Store sehen:

Ja! Du hast es geschafft!

Es ist nicht sehr gut gestaltet, oder? Gut, dass wir ein toll aussehendes WordPress WooCommerce-Theme wie Savoy installieren werden.

(HINWEIS: Vergessen Sie nicht, die Produkte und Bilder nach dem Installieren und Einrichten des Designs aus dem Dummy-Datenimport zu löschen Vor Sie fangen an, Ihre eigenen Produkte hinzuzufügen.)

Schritt 2: Installieren Sie ein WordPress-WooCommerce-Design

Nun schauen wir uns an, wie man das WooCommerce-Theme installiert. Wenn Sie Ihr WordPress Commerce-Design noch nicht heruntergeladen haben, laden Sie es auf Ihren Computer herunter (stellen Sie sicher, dass Sie wissen, wo Sie es herunterladen, damit Sie darauf zugreifen können)..

Sie können Ihr Design auf zwei verschiedene Arten installieren:

  1. Greifen Sie mit FTP auf Ihre Website zu
  2. Aus dem WordPress Admin

FTP dein Theme

Wenn Sie sich mit FTP auskennen, stellen Sie eine Verbindung zu Ihrem Server her und gehen Sie auf den wp-content> themen Verzeichnis. Hier möchten Sie Ihr Design senden. Stellen Sie jedoch sicher, dass Sie Ihr Design senden, bevor Sie den entpackten Ordner an Ihren Server senden. Schauen wir uns unser Beispiel für ein WordPress-Theme von ThemeForest genauer an.

Nachdem Sie den Download entpackt haben, werden Sie verschiedene Ordner sehen:


Nicht jedes Design, das Sie herunterladen, wird so verpackt. Manchmal ist der gezippte Ordner, den Sie herunterladen, der eigentliche Designordner. Es ist immer eine gute Idee, dies zu überprüfen, da dies von Ort zu Ort unterschiedlich ist.

Das Savoy - Minimalist AJAX WooCommerce Theme enthält einige Extras wie Dokumentation, Assets usw. Wenn Sie im Ordner "Theme Files" nach Savoy suchen, finden Sie Ihr Theme (savoy.zip)..

Wenn Sie die Installation über FTP durchführen, laden Sie den entpackten Themenordner (z. B. „savoy“) in das Verzeichnis Themes hoch. Wenn Sie sich nicht sicher sind, ob Sie FTP verwenden oder die Installation lieber über WordPress Admin durchführen möchten, ist das in Ordnung. Ich bevorzuge auch die Verwendung des WordPress-Admin.

Aus dem WordPress Admin

Um ein WordPress-Theme aus dem Admin zu installieren, muss der Theme-Ordner gepackt werden (themefolder.zip). Wie bereits erwähnt, sollten Sie sicherstellen, dass Sie mit dem arbeiten tatsächlich Theme-Ordner und nicht der Ordner, in dem sich Ihr Theme befindet.

Aus dem WordPress Admin unter Aussehen, klicken Themes:

Neues Thema hinzufügen:

Thema hochladen:

Erinnern Sie sich, wo sich die Zip-Datei des Themas befindet?

(Unser Beispielthema heißt: savoy.zip)

Klicken Datei wählen und mach deinen Weg dorthin:

Einmal installiert, können Sie besuchen Aussehen> Themen in Ihrem WordPress Admin, um zu sehen, ob es installiert ist, oder klicken Sie, um es sofort zu aktivieren.

Wie Sie (unten) sehen können, wurde das Savoy-Design erfolgreich installiert aktivieren Sie:

Nachdem Ihr WordPress WooCommerce-Design erfolgreich installiert und aktiviert wurde, können Sie es einrichten.

Schritt 3: Richten Sie ein WordPress WooCommerce-Theme ein

Nicht jedes Thema ist genau gleich. Wie ein Thema entworfen und entwickelt wird, ist ein großer Faktor. Daher kann es einige Unterschiede zwischen diesem Tutorial und dem, mit dem Sie konfrontiert werden, geben. Im Allgemeinen sollte dies jedoch dazu beitragen, dass das WordPress WooCommerce-Design eingerichtet wird - unabhängig davon, welches WooCommerce-Design Sie von ThemeForest oder anderswo verwenden.

Empfohlene / erforderliche Plugins

Nach der Installation und Aktivierung des Savoy-Designs werden Sie über empfohlene Plugins informiert:

Manchmal informiert Sie Ihr Theme über empfohlene Plugins, während andere Empfehlungen in die Dokumentation aufnehmen. Es können Design-Funktionen für das Design vorhanden sein (z. B. optionale Schieberegler), die nicht im Theme codiert sind, aber dafür vorgesehen sind.

Klicke auf Beginnen Sie mit der Installation von Plugins Klicken Sie im Savoy-Design auf die Liste der empfohlenen Plugins:

Dies ist wiederum von Thema zu Thema unterschiedlich. In diesem Fall können Sie jedoch möglicherweise nicht alle installieren.

Während Savoy beispielsweise das Kontaktformular 7 empfiehlt und dessen Formatierung einschließt, möchten Sie dieses Plugin möglicherweise nicht für Ihr Kontaktformular verwenden. Vielleicht möchten Sie etwas wie Gravity Forms oder Ninja Forms verwenden.

Ein Plugin wie Regenerate Thumbnails ist ein hervorragendes Plugin für alle, die bereits einen Store eingerichtet und ihre Bilder für ein vorheriges Thema konfiguriert haben. Dieses Plugin durchläuft Ihre WordPress-Medienbibliothek und ändert die Größe aller Bilder, um mit Ihrem neuen Thema zu arbeiten. Möglicherweise möchten Sie dies nicht mit den Dummy-Daten tun, und Sie möchten dieses Plugin möglicherweise ganz auslassen (ich empfehle es jedoch trotzdem, damit alle Medien zu Testzwecken die richtige Größe haben)..

Ein Plugin wie das Envato Toolkit ist jedoch für Designs, die über ThemeForest erworben wurden, sehr wichtig, um sicherzustellen, dass Sie über Theme-Updates informiert werden.

Ich würde empfehlen, alle empfohlenen Plugins zu installieren, wenn Sie loslegen. Sie können ein Plugin später jederzeit entfernen, wenn Sie es nicht benötigen. Wenn Sie jedoch kein Plugin installieren, das benötigt wird, können Sie frustriert werden, weil das Thema nicht funktioniert oder etwas tut, das Ihnen in der Demo gefallen hat.

Wenn Sie alle, einige oder keines der empfohlenen und / oder erforderlichen Plugins installiert haben, vergessen Sie nicht, sie zu aktivieren:

Wenn Sie ein von ThemeForest erworbenes Design verwenden, z. B. unser Beispielthema Savoy, vergessen Sie nicht, Ihren Marketplace-Benutzernamen und Ihren geheimen API-Schlüssel in das Envato WordPress Toolkit einzugeben, um sicherzustellen, dass das Design korrekt aktualisiert wird.

Anpassen

Dies ist der Teil der Installation und Einrichtung Ihres WordPress WooCommerce-Designs, wenn es wirklich Spaß macht und Sie Ihre Website zum Leben erwecken.

Sie können auf den WordPress-Customizer über das Menü in WordPress zugreifen: Aussehen> Anpassen. Oder gehen Sie zur Themes-Seite unter Aussehen> Themen und klicken Sie dann auf Anpassen Taste:

Willkommen beim WordPress-Customizer:

Hier werden wir ein paar Verbesserungen vornehmen, bevor wir in eine tiefere Konfiguration gehen.

Das erste, was Sie sehen werden, ist Standortidentität. Hier können Sie den Site-Titel und die Tagline ändern.

Manchmal können Sie hier auch ein benutzerdefiniertes Header-Bild und / oder ein Site-Symbol hinzufügen (dies variiert je nach Thema)..

Als nächstes konfigurieren Sie Ihre Menüs:

Wenn dies ein neues WooCommerce-Setup ist oder Sie keine Seiten erstellt haben, müssen Sie noch nicht viel "anpassen". Wenn WooCommerce installiert ist, wurden jedoch automatisch einige Seiten hinzugefügt, die Sie sicher sofort in Ihr Menü aufnehmen möchten.

Sie können leicht ein neues Menü hinzufügen und erstellen:

Nachdem Sie ein Menü (oder mehrere) hinzugefügt haben, können Sie auswählen, wo das Menü angezeigt werden soll, sowie die verschiedenen Menüelemente (z. B. benutzerdefinierte Links, Beiträge, Seiten, Produkte usw.)..

Dies gibt Ihnen viel Flexibilität bei der Wahl Ihrer WooCommerce-Site. Haben Sie keine Angst davor zu spielen oder es später zu ändern.

Bevor wir den WordPress-Customizer verlassen, sollten Sie WordPress anweisen, die Startseite zu Ihrem Geschäft zu machen:

Kennzeichen Vorderseite wird angezeigt wie Eine statische Seite und wähle das aus Titelseite um dein zu sein Geschäft Seite. Die Shop-Seite wurde automatisch erstellt, als Sie das WooCommerce-Plugin installiert haben.

Wie für die Beiträge Dies hängt davon ab, wo Sie ein Blog auf Ihrer WooCommerce-Site haben möchten oder nicht. In diesem Fall müssen Sie eine Blogseite erstellen und diese auf dieser Seite des WordPress-Customizers oder in der auswählen WordPress Admin-Einstellungen> Lesen.

Die Ergebnisse

Mit einer Grundkonfiguration können Sie sehen, wie gut Ihr Online-Shop mit einem WordPress-WooCommerce-Design aussehen kann:

Die einzelnen Produktseiten sehen toll aus:

Es umfasst sogar verwandte Produkte:

Das Savoy - Minimalist AJAX WooCommerce Theme ermöglicht Ihnen die einfache Feinabstimmung vieler Elemente auf Ihrer Website weit Hinter allem, was ich in diesem Tutorial behandelt habe (lesen Sie unbedingt die Dokumentation Ihres Themas, um mehr über Ihr Thema zu erfahren). Ich habe Ihnen nur Änderungen gezeigt, die im WordPress-Customizer vorgenommen werden können. In der Regel können Sie nur ein beliebiges Thema verwenden, das Sie verwenden.

Fazit

Sie können deutlich sehen, wie einfach diese ersten ersten Schritte bei der Konfiguration Ihres neuen WordPress WooCommerce-Designs sein können und wie gut es aussieht - einfach durch Verwendung eines WordPress-Designs, das speziell für WooCommerce entwickelt wurde.

Es gibt viele nützliche WordPress WooCommerce-Plugins für CodeCanyon und einige wunderschön gestaltete und effektive WordPress WooCommerce-Designs für ThemeForest.

Ein Blick auf einige der meistverkauften ThemeForest WooCommerce-Motive könnte ein guter Anfang sein (Savoy ist immer noch mein Favorit). Ich bin sicher, Sie werden etwas finden, das perfekt zu Ihrem E-Commerce-Shop passt. Oder stöbern Sie in unserem Showcase, um genau das Richtige für Ihren Shop zu finden: 

Was verwenden Sie WooCommerce, um zu verkaufen??