Entwicklung einer WooCommerce-E-Commerce-Website: Bauen Sie Ihren Online-Shop von Grund auf auf.

Vorbereitungsarbeiten und Umgebungseinstellungen

Bevor Sie Ihren WooCommerce-Shop offiziell starten, ist eine gründliche Vorbereitung die Grundlage für den Erfolg. Dazu gehören die Einrichtung der Kernumgebung, die Installation der notwendigen Software sowie eine erste Planung des Webseitenaufbaus.

Aufbau einer lokalen Entwicklungsumgebung

Um die Risiken sowie den möglichen Datenverlust durch direkte Operationen auf Online-Servern zu vermeiden, wird dringend empfohlen, eine Entwicklungsumgebung auf dem lokalen Computer einzurichten. Für die Entwicklung mit WooCommerce ist in der Regel die Installation eines Pakets erforderlich, das Apache/Nginx, PHP und MySQL integriert.
1. Auswahl der Integrationsumgebung: Windows-Nutzer können zwischen WAMP und XAMPP wählen, macOS-Nutzer werden mit MAMP oder Laravel Valet empfohlen, während Linux-Nutzer die LAMP- oder LEMP-Umgebung direkt konfigurieren können.
2. Installation von WordPress: Nachdem die lokale Umgebung bereit ist, laden Sie die neueste Version von WordPress herunter und entpacken Sie sie im Wurzelverzeichnis Ihrer lokalen Website (z. B. /www/).htdocsoderwwwErstellen Sie eine neue MySQL-Datenbank, richten Sie eine neue Verzeichnisstruktur ein, und führen Sie den “Fünf-Minuten”-Installationsprozess für WordPress über den Browser aus, um die lokale Website zu konfigurieren.
3. Debugging-Tool-Konfiguration: Aktivieren Sie den Debugging-Modus von WordPress.wp-config.phpEinstellungen im FileWP_DEBUGFürtrueDies hilft dabei, potenzielle Probleme in der Entwicklungsphase zu erkennen und zu beheben.

Planung der Ladenstruktur und der Produktarten

Bevor Sie ein Plugin installieren, ist eine klare Geschäftsplanung von entscheidender Bedeutung. Sie müssen folgende Fragen berücksichtigen:
Produktkatalog: Wie werden die Produkte klassifiziert? Werden einfache Kategorien verwendet, oder ist ein komplexeres Attributsystem erforderlich, z. B. nach Farbe und Größe?
Produktarten: WooCommerce unterstützt verschiedene Produktarten, darunter einfache Produkte, variable Produkte (z. B. T-Shirts in verschiedenen Größen), Gruppenprodukte, externe Produkte usw. Sie müssen die Art der verkauften Waren berücksichtigen, um die richtige Produktart auszuwählen.
– Zahlung und Logistik: Wo befindet sich die Zielkundengruppe? Welche Zahlungsmethoden verwenden sie gewöhnlich (z. B. Alipay, WeChat Pay, PayPal)? Wie werden der Logistikversandbereich und die Kosten berechnet?
Erweiterungsanforderungen: Ist ein Mitgliedssystem, ein Abonnementmodus, die Unterstützung mehrerer Sprachen oder die Integration mit einem bestimmten ERP-System erforderlich? Die Aufstellung dieser Anforderungen hilft bei der Auswahl der passenden Plugins.

Empfohlene Lektüre WooCommerce von Anfänger bis Experte: Das ultimative Handbuch zum Aufbau einer professionellen E-Commerce-Website。

Kerninstallation und Grundkonfiguration

Nach Abschluss der Planung kann mit der Installation und Konfiguration von WooCommerce begonnen werden, um es von einem einfachen Blogsystem in eine leistungsstarke E-Commerce-Plattform umzuwandeln.

UltaHost – WordPress-Hosting-Anbieter

30-tägige Geld-zurück-Garantie, unbegrenztes Bandbreiten- und Datenbankvolumen, kostenlose DDoS-Schutzmaßnahmen sowie ein Rabatt von 501 auf 4 Terabyte bei einer Kaufdauer von 3 Jahren.

Zugangsseite

Die Installation und Aktivierung des WooCommerce-Plugins

Im Backend eines lokalen oder online betriebenen WordPress-Websites navigieren Sie zu “Plugins” -> “Plugins installieren”. Geben Sie in das Suchfeld “WooCommerce” ein, um das offizielle Plugin von Automattic zu finden. Klicken Sie auf “Sofort installieren” und anschließend auf “Aktivieren”. Nach der Aktivierung wird der Setup-Assistent für WooCommerce automatisch gestartet.

Ausführen des Assistenten für die ersten Einstellungen

Der Setup-Assistent führt Sie durch die wichtigsten Schritte. Bitte stellen Sie sicher, dass Sie alle Angaben gemäß Ihrer vorherigen Planung eintragen.
1. Ladenadresse und Währung: Geben Sie Ihr Land/Region, Ihre Stadt, Ihre Postleitzahl sowie die Hauptzahlungswährung des Ladens an (z. B. Chinesische Yuan CNY) ein.
2. Produkte und Zahlungen: Wählen Sie den Typ der Produkte aus, die Sie verkaufen möchten (z. B. physische Waren oder digitale Produkte), und verbinden Sie sich mit einem Zahlungsgateway. WooCommerce ist standardmäßig mit PayPal und Stripe integriert. Sie können diese Schritte auch überspringen und später spezielle Zahlungs-Erweiterungen installieren (z. B. den Alipay-Plugin).
3. Versandkosten konfigurieren: Sie können eine einfache, einheitliche Versandkostenrate festlegen, Versandkosten basierend auf dem Gewicht oder der Adresse berechnen – oder die Konfiguration vorerst auslassen.
4. Empfohlene Plugins: Der Assistent kann einige Erweiterungen empfehlen, wie zum Beispiel Jetpack für Website-Statistiken und Sicherheit. Sie können diese nach Ihren Bedürfnissen installieren.

Startseite und Shop-Einstellungen

Nach Abschluss des Assistentenprozesses erstellt WooCommerce automatisch einige Kernseiten: Warenkorb, Kasse, Mein Konto und die Hauptseite des Shops. Sie müssen überprüfen, ob diese Seiten korrekt veröffentlicht wurden.
Weitere Backend-Einstellungen finden Sie unter… WooCommerce -> 设置 Hier befinden sich mehrere Tabellenblätter mit den Bezeichnungen “Allgemein”, “Produkte”, “Lieferung”, “Steuern” und “Zahlungen”. Du musst insbesondere die folgenden Einstellungen vornehmen:
– Standardeinstellungen: Beispielsweise die Aktivierung/Deaktivierung von Gutscheinen sowie die Entscheidung, ob Gästen das Bezahlen ohne Registrierung eines Accounts erlaubt ist.
– Produktpräsentation: Festlegen der Standardanzahl an Produkten pro Seite sowie der Anordnung der Produkte im Shop.
– Lieferbereich: Fügen Sie für die von Ihnen gewünschten Liefergebiete (z. B. “Chinesisches Festland”, “Hongkong, China”) konkrete Liefermethoden (z. B. “Express”, “Post”) sowie die entsprechenden Gebühren hinzu.

Erweiterte Funktionen und maßgeschneiderte Entwicklungen

Sobald der grundlegende Shop in Betrieb genommen wird, könnten Sie komplexere Geschäftslogiken oder einzigartige Benutzeroberflächen erforderlich haben – dies erfordert eine detaillierte, maßgeschneiderte Entwicklung.

Empfohlene Lektüre Mastering WooCommerce Custom Fields: ein Leitfaden für fortgeschrittene Entwickler von der Erstellung bis zur Anzeige。

Benutzerdefinierte Produktfelder und Daten

Die Produktdaten von WooCommerce werden in benutzerdefinierten Datenbanktabellen gespeichert, aber Sie können mithilfe von Hooks ganz einfach zusätzliche, benutzerdefinierte Felder hinzufügen. Zum Beispiel können Sie ein Feld für das “Jahr” zu Weinprodukten hinzufügen.
Zunächst verwenden Siewoocommerce_product_options_general_product_dataDie Aktionshookel fügen auf der Backend-Seite zur Produktbearbeitung Felder hinzu:

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_product_field' );
function add_custom_product_field() {
    woocommerce_wp_text_input( array(
        'id' => '_vintage_year',
        'label' => __( '年份', 'your-textdomain' ),
        'desc_tip' => 'true',
        'description' => __( '请输入该葡萄酒的生产年份。', 'your-textdomain' ),
    ) );
}

Und dann wird es verwendet.woocommerce_process_product_metaDie Aktionshook-Function speichert den Wert dieses Feldes.

add_action( 'woocommerce_process_product_meta', 'save_custom_product_field' );
function save_custom_product_field( $post_id ) {
    $custom_field_value = isset( $_POST['_vintage_year'] ) ? sanitize_text_field( $_POST['_vintage_year'] ) : '';
    update_post_meta( $post_id, '_vintage_year', $custom_field_value );
}

Themenvorlagen überschreiben sowie Styles anpassen

Um die Styles und Strukturen von WooCommerce-Elementen (wie dem “Zur Warenkorb hinzufügen”-Button, der Produktdetailsseite oder der Kasseseite) zu ändern, müssen Sie die Funktion “Template-Überwrite” verwenden. Die Template-Dateien von WooCommerce befinden sich im Verzeichnis der Plugins./templates/Im Ordner.
Der Anpassungsprozess ist wie folgt: Erstellen Sie in Ihrem Unterordner für Aktivitäts-Themen ein Verzeichnis mit dem Namen „customizations“.woocommerceÖffnen Sie den entsprechenden Ordner, kopieren Sie die Plugin-Vorlagen-Dateien, die Sie ändern möchten, in den relativen Pfad dieses Ordners und führen Sie anschließend die notwendigen Änderungen durch.
Zum Beispiel, um die Preisanzeige auf einer einzelnen Produktseite zu ändern, kann man zunächst damit beginnen,wp-content/plugins/woocommerce/templates/single-product/price.phpKopieren Sie diese Datei in Ihr Untertema:wp-content/themes/your-child-theme/woocommerce/single-product/price.phpDanach bearbeiten Sie diese Kopie der Datei.

hosting.com Shared Hosting

Hohe Leistung mit AMD EPYC-CPUs, NVMe-SSD-Speicher und LiteSpeed, fachkundiger Inhouse-Support rund um die Uhr, erweiterte Sicherheitsmaßnahmen einschließlich SSL, Brute-Force-, Malware- und DDoS-Schutz, Einsparungen von bis zu 73%

Zugangsseite

Leistungsoptimierung und sichere Bereitstellung

Vor der Veröffentlichung einer Website sind Leistungsverbesserungen und die Stärkung der Sicherheit unverzichtbare Abschlussmaßnahmen, da sie direkt die Benutzererfahrung sowie den stabilen Betrieb des Shops beeinflussen.

Die Ladezeit der Website verbessern

Die Geschwindigkeit von E-Commerce-Webseiten ist von entscheidender Bedeutung und beeinflusst direkt die Konvertierungsrate.
1. Hochleistungs-Hosting auswählen: Wählen Sie einen Hosting-Dienst, der auf WooCommerce optimiert ist. Diese Dienste bieten in der Regel eine schnellere PHP-Ausführungsumgebung, Objektcaching (z. B. Redis) sowie die Integration von CDN-Systemen.
2. Verwendung von Caching-Plugins: Installieren Sie Caching-Plugins wie W3 Total Cache oder WP Rocket. Diese erstellen statische HTML-Seiten und komprimieren CSS/JS-Dateien, wodurch die Belastung auf dem Server sowie die Ladezeit der Seiten erheblich reduziert wird.
3. Optimierung von Bildern und der Datenbank: Alle Produktbilder sollten vor dem Hochladen mit Tools wie TinyPNG komprimiert werden. Regelmäßig sollten mit Plugins überflüssige Revisionen, Entwürfe und redundante Daten in der WordPress-Datenbank entfernt und optimiert werden.
4. Code-Optimierung: Stellen Sie sicher, dass Ihr benutzerdefinierter Code effizient ist und vermeiden Sie unnötige Verzögerungen oder Ressourcenverbrauch im Rahmen der Themen-Implementierung.functions.phpUnnötige Skripte werden während des Ladevorgangs geladen. Für benutzerdefiniertes CSS und JS sollte man versuchen, diese zu kombinieren und zu minimieren.

Die Sicherheit der Website stärken

Online-Shops verarbeiten Gelder sowie sensible Informationen der Kunden – daher ist Sicherheit von größter Bedeutung.
1. Verwendung eines SSL-Zertifikats: Deinstallieren Sie das vorhandene SSL-Zertifikat und installieren Sie ein neues für Ihren Domainnamen (HTTPS). Aktivieren Sie außerdem die Verwendung von HTTPS in den WooCommerce-Einstellungen. Dadurch wird sichergestellt, dass die Daten der Nutzer während des Transfers verschlüsselt werden.
2. Regelmäßige Aktualisierungen und Backups: Stellen Sie sicher, dass das WordPress-Core, die WooCommerce-Plugins, das Theme sowie alle weiteren Erweiterungen stets auf den neuesten Versionen sind. Verwenden Sie ein zuverlässiges Backup-Plugin (z. B. UpdraftPlus), um regelmäßig und automatisch vollständige Backups der Website an einem externen Ort (z. B. in der Cloud) zu erstellen.
3. Sicherheits-Add-ons und Zugriffskontrolle: Installieren Sie Sicherheits-Add-ons wie Wordfence oder Sucuri, die bösartigen Datenverkehr überwachen, Angriffe durch Brute-Force-Methoden verhindern und eine Firewall-Funktion bieten. Beschränken Sie die Berechtigungen von Administratoren im Hintergrund streng, verwenden Sie starke Passwörter und die Zwei-Faktor-Authentifizierung.

Empfohlene Lektüre Die ultimative Anleitung zur Beschleunigung von WooCommerce-Websites: Umfassende Optimierungsstrategien von Servern bis hin zum Code。

Zusammenfassungen

Die Erstellung eines WooCommerce-Onlineshops ist ein systematisches Projekt, das von der anfänglichen Vorbereitung der Umgebung und der Geschäftsplanung über die Installation von Kern-Plugins und die Grundkonfiguration bis hin zur individuellen Anpassung, um spezifische Anforderungen zu erfüllen, sowie schließlich der Optimierung der Leistung und der Stärkung der Sicherheit reicht. Jeder Schritt ist von entscheidender Bedeutung. Die Stärke von WooCommerce liegt in seiner hohen Erweiterbarkeit und Flexibilität: Egal ob durch die große Auswahl an offiziellen und Drittanbieter-Erweiterungen oder durch die tiefgreifende Entwicklung mithilfe der standardmäßigen WordPress-Hooks und Templates, es kann E-Commerce-Anwendungen von einfachen bis hin zu extrem komplexen Ausprägungen unterstützen. Indem Entwickler die in diesem Artikel beschriebenen Schritte befolgen, können sie einen professionellen Online-Shop erstellen, der sowohl den Geschäftsanforderungen entspricht als auch stabil, sicher und effizient ist.

FAQ Häufig gestellte Fragen

Eignet sich WooCommerce für den Verkauf digitaler Produkte oder Dienstleistungen?
Vollkommen geeignet. WooCommerce unterstützt nicht nur physische Waren, sondern auch digitale Produkte, die heruntergeladen werden können (z. B. Software, E-Books, Musik), sowie virtuelle Produkte/Dienste (z. B. Online-Kursanmeldungen, Beratungsdienste). Beim Hinzufügen eines Produkts musst du im Produktdatenfeld einfach die Optionen “Virtuell” und/oder “Herunterladbar” auswählen und die entsprechenden Dateien hochladen oder den Dienstlink einstellen.

InterServer Shared Hosting

Shared Hosting $2.50 USD pro Monat, erster Monat $0.1 USD Promo-Code tryinterserver, 461 Cloud-Apps Skripte, ein Klick installieren.

Zugangsseite

Wie kann man bestehende Produktdaten in großem Umfang in WooCommerce importieren?

WooCommerce bietet offiziell leistungsstarke Tools zur CSV-Import- und -Export-Verarbeitung von Produktdaten. Du kannst das “WooCommerce Product CSV Import Kit” über “Tools” -> “Import” ausführen. Zuerst exportiere eine Beispiel-CSV-Datei, um die Datenstruktur zu verstehen. Anschließend ordne deine Produktdaten entsprechend dieser Struktur an (enthält Spalten wie SKU, Name, Beschreibung, Preis, Kategorie, Bildurl usw.) und importiere sie anschließend mit diesem Tool in deinen WooCommerce-Shop. Für komplexere Datenmigrationen kannst du auch spezielle Import-Plugins wie WP All Import in Betracht ziehen.

Kann man die Felder und den Ablauf der Kasse-Seite ändern?

Ja, das ist möglich – und es handelt sich dabei um eine häufige Anforderung bei der Anpassung von Funktionen. Sie können mithilfe von Code-Hooks ganz einfach die Reihenfolge der Bezahlungsfelder oder die Validierungsregeln hinzufügen, entfernen oder ändern. Zum Beispiel können Sie dazu spezielle Funktionen nutzen…woocommerce_checkout_fieldsEs gibt Filter, mit denen Sie auf Felder einwirken können. Darüber hinaus gibt es zahlreiche spezielle Plugins (z. B. den „Checkout Field Editor“ für WooCommerce), die es Ihnen ermöglichen, diese Aktionen über eine visuelle Benutzeroberfläche durchzuführen, ohne Code schreiben zu müssen. Für umfassendere Anpassungen des Prozesses – beispielsweise die Implementierung eines mehrstufigen Bezahlsverlaufs – sind jedoch tiefgreifendere Entwicklungsarbeiten oder die Nutzung spezialisierter Plugins erforderlich.

Wie konfiguriere ich Alipay oder WeChat Pay für einen WooCommerce-Shop?

Die direkteste Methode besteht darin, offizielle oder von Drittanbietern zertifizierte Zahlungsgateway-Plugins zu verwenden. Du kannst in dem offiziellen WooCommerce-Extension-Shop oder in chinesischen WordPress-Plugin-Märkten nach “Alipay” oder “WeChat Pay” suchen. In der Regel musst du solche Plugins kaufen oder installieren, sie anschließend in den “Zahlung”-Einstellungen von WooCommerce aktivieren und Parameter wie den Händler-ID sowie die Anwendungsschlüssel, die du von den Plattformen von Alipay oder WeChat Pay erhalten hast, konfigurieren. Nach Abschluss der Konfiguration werden die entsprechenden Zahlungsoptionen auf der Kasse-Seite des Frontends angezeigt.