TehnoVek — WooCommerce-Shop für Elektro- und Motorfahrzeuge
Skalierbarer WooCommerce-Shop als erste Ausbaustufe eines zukünftigen vollwertigen Onlineshops
Rolle: Struktur, Design, WordPress-Entwicklung · Jahr: 2026 · Stack: WordPress / Astra Pro / Elementor / WooCommerce
TehnoVek — skalierbarer WooCommerce-Shop für Elektromobilität und Motorfahrzeuge
Jahr: 2026
Projekttyp: WooCommerce-Shop-Entwicklung
Plattform: WordPress
Stack: Astra Pro / Elementor / Ultimate Addons for Elementor / WooCommerce
Zusätzliche Tools: SureForms / Variation Swatches for WooCommerce / Modal Window / WPCode
Geschäftsmodell: Ladengeschäft + Online-Produktkatalog mit geplanter E-Commerce-Erweiterung
Produktschwerpunkt: Elektroroller / Elektro-Dreiräder / E-Bikes / Motorräder / ATVs / Ersatzteile und Zubehör
{/}
Über das Projekt
TehnoVek ist ein ukrainischer Händler für Elektromobilitätsprodukte, Motorfahrzeuge, Ersatzteile und Zubehör.
Die ursprüngliche Anforderung bestand darin, die erste technische Ausbaustufe eines zukünftigen Onlineshops zu entwickeln – und nicht lediglich eine temporäre Werbewebsite.
Zum Start sollte die Website in erster Linie als Landingpage-artiger Storefront und Produktkatalog funktionieren. Gleichzeitig musste die zugrunde liegende Architektur eine spätere Erweiterung zu einem vollständigen E-Commerce-System ermöglichen, ohne das Projekt von Grund auf neu aufbauen zu müssen.
Ein fertiges Design, ein Brandbook oder eine detaillierte technische Spezifikation lagen nicht vor.
Das ursprüngliche Briefing bestand hauptsächlich aus funktionalen Anforderungen und Ideen für die zukünftige Entwicklung. Struktur, Interface-Logik und visuelle Gestaltung wurden daher direkt im Verlauf der Umsetzung entwickelt.
{?}
Architektur und Entwicklungsansatz
Anstatt zunächst eine temporäre Landingpage zu erstellen und diese später zu ersetzen, wurde das Projekt von Anfang an als echter WooCommerce-Shop entwickelt.
Die Produkt-, Kategorie-, Varianten-, Bestands- und weitere Kernfunktionen von WooCommerce bleiben im System vollständig verfügbar. Warenkorb und Checkout sind gemäß der Launch-Strategie des Kunden derzeit lediglich in der öffentlichen Benutzeroberfläche ausgeblendet.
Dadurch kann die Website in der ersten Ausbaustufe als Produktkatalog betrieben werden und behält gleichzeitig die technische Grundlage für zukünftige Zahlungs-, Liefer- und weitere E-Commerce-Integrationen.
Die Website wurde mit Astra Pro, Elementor, WooCommerce und Ultimate Addons for Elementor umgesetzt. Für spezifische Interface-Funktionen kamen mehrere zusätzliche Plugins sowie individueller Code zum Einsatz.
Die Entwicklung erfolgte zunächst in der Hosting-Umgebung des Auftragnehmers. Nach Fertigstellung wurde die Website auf das Hosting und die Produktivdomain des Kunden geklont.
Mobile · TehnoVek
{#}
Startseite und Storefront-Struktur
Die Startseite wurde von Grund auf im Landingpage-Format entwickelt, anstatt dem konventionellen Aufbau einer Onlineshop-Startseite zu folgen.
Ihre Struktur führt die Besucher über eine Abfolge eigenständiger Bereiche schrittweise durch das Produktsortiment, die Kaufmöglichkeiten, die Vorteile des Unternehmens, Serviceinformationen und Kontaktmöglichkeiten.
Der Hero-Bereich verwendet einen Hintergrundbild-Slider mit Ken-Burns-Effekt. Direkt darunter ermöglichen anklickbare Kategoriebanner einen schnellen Zugriff auf die wichtigsten Produktgruppen.
WooCommerce-Produkt-Widgets sind in mehrere Bereiche der Startseite integriert. Dadurch können Besucher ausgewählte Produkte ansehen und direkt zu den jeweiligen Produktseiten wechseln, ohne den Landingpage-artigen Seitenfluss zu verlassen.
Anklickbare Kategorie-Banner
WooCommerce-Produkt-Widgets
CTA- und Direktkontakt-Buttons
Kontaktmöglichkeiten sind über die gesamte Seite verteilt.
Primäre CTA-Buttons öffnen Kontaktformulare in modalen Fenstern, während anklickbare Telegram-, Viber-, WhatsApp- und Hotline-Elemente unmittelbare alternative Kontaktmöglichkeiten bieten.
Dieselbe Kommunikationslogik wird im Header und Footer fortgeführt.
CTA-Buttons öffnen Kontaktformulare in modalen Fenstern
Der Footer enthält zusätzlich Links zu sozialen Netzwerken, ein Newsletter-Anmeldeformular sowie eine eingebettete Google Map mit dem Standort des Ladengeschäfts des Kunden.
Transparente und reguläre Header sowie Footer
{&}
Produktkatalog und Kategoriestruktur
Der ursprüngliche Katalog wurde mit 16 realen Produkten anstelle von Demo-Inhalten befüllt. Die meisten davon wurden als variable WooCommerce-Produkte konfiguriert.
Produktkategorien wurden nicht lediglich als Archivseiten umgesetzt, sondern so angelegt, dass zusätzlicher Content ergänzt werden kann.
Dadurch können einzelne Kategorien mit wachsendem Sortiment schrittweise zu suchmaschinen- und werbeorientierten Landingpages ausgebaut werden.
TehnoVek — Produktkatalogseite
Zusätzlich wurde ein grundlegendes Produktfiltersystem implementiert.
Anstatt dauerhaft Platz im Storefront einzunehmen, werden die Filter in einem seitlich von links eingeblendeten Panel geöffnet. Dadurch bleibt die Katalogoberfläche kompakt – insbesondere auf mobilen Geräten.
Shop-Filter — Desktop-Version
Shop-Filter — Mobilversion
{%}
Anpassung der Produktseiten
Die WooCommerce-Produktseiten wurden über die standardmäßige Storefront-Funktionalität hinaus durch mehrere Interface- und Verhaltensanpassungen erweitert.
Variation Swatches for WooCommerce wurde eingesetzt, um eine visuellere Auswahl von Produktvarianten zu ermöglichen.
TehnoVek — Produktseite, Desktop-Vorschau
Für Produkte, deren Farbvarianten aus zwei oder mehr Farben bestehen, wurde das Standardverhalten des Plugins zusätzlich durch eine individuelle Lösung erweitert.
Anstatt ausschließlich einfarbige Auswahlfelder darzustellen, können einzelne Swatches mehrere Farben innerhalb derselben Variantenoption visuell abbilden.
Auch die standardmäßige WooCommerce-Verfügbarkeitsanzeige wurde an das derzeitige katalogorientierte Verkaufsmodell angepasst.
„Verfügbarkeit prüfen“, „Frage stellen“ und Möglichkeiten zur direkten Kontaktaufnahme
Anstatt lediglich „Auf Lager“ anzuzeigen, verwendet der Storefront die Aktion „Verfügbarkeit prüfen“, die direkt mit einem modalen Kontaktformular verknüpft ist.
Zusätzlich wurde auf den Produktseiten ein Button „Frage stellen“ integriert, der ein Kontaktformular in einem modalen Fenster öffnet. Das Formular wird automatisch mit dem Produktnamen und einem direkten Link zur aktuellen Produktseite vorausgefüllt, sodass bei jeder Anfrage sofort erkennbar ist, auf welchen Artikel sie sich bezieht.
Derselbe Interface-Bereich enthält direkte Messenger- und Hotline-Kontaktmöglichkeiten. Besucher können den Shop dadurch auf mehreren Wegen kontaktieren, ohne einen klassischen Checkout-Prozess durchlaufen zu müssen.
Geöffnetes Kontaktformular in einem Modalfenster – Produktseite, Desktop-Vorschau
{\}
Produktinhalte und ausklappbare Informationen
Die Produktbeschreibungen wurden in Elementor erstellt, um eine flexiblere Präsentation als mit dem standardmäßigen WooCommerce-Texteditor zu ermöglichen.
Da technische Produkte umfangreiche Informationen erfordern können, würde die direkte Darstellung sämtlicher Details auf der Seite zu übermäßig langen Produktseiten führen.
Um die Produktseiten kompakt und übersichtlich zu halten, wurden erweiterte Beschreibungsinhalte in einem individuell entwickelten ausklappbaren Bereich untergebracht, der ohne zusätzliches Plugin umgesetzt wurde.
Produktbeschreibung in einem ausklappbaren Bereich, Desktop-Vorschau
Die technischen Spezifikationen wurden separat in Akkordeon-Bereichen organisiert.
Technische Daten, gegliedert in Akkordeon-Abschnitte, Desktop-Vorschau
Diese Struktur hält die Produktseite zunächst übersichtlich und stellt gleichzeitig detaillierte Informationen bereit, sobald Besucher sie benötigen.
Dieser Ansatz eignet sich insbesondere für Produkte wie Elektroroller, E-Bikes und ATVs, deren Spezifikationen zahlreiche Parameter zu Motoren, Akkus, Bremsen, Federung, Abmessungen, Rädern, Elektronik und weiteren technischen Eigenschaften umfassen können.
{Q}
Optimierungen von Interface und Navigation
Je nach Seitenkontext wurde ein unterschiedliches Header-Verhalten umgesetzt.
Die Startseite und die wichtigsten Informationsseiten verwenden einen transparenten Header, während für den Katalog und andere interne Seiten eine Standardversion eingesetzt wird.
Der Header bleibt auf der gesamten Website sticky und wird beim Scrollen nach unten automatisch ausgeblendet. Sobald der Benutzer wieder nach oben scrollt, erscheint er erneut.
Mehrere Interface-Texte, die nicht über das standardmäßige Lokalisierungssystem von WordPress oder WooCommerce verfügbar waren, wurden außerdem durch schlanke PHP-Anpassungen lokalisiert, anstatt dafür ein weiteres Übersetzungs-Plugin einzusetzen oder WordPress-Core-Dateien zu verändern.
Diese kleinen Anpassungen trugen dazu bei, die Benutzeroberfläche konsistent zu halten, ohne unnötige Abhängigkeiten einzuführen.
{+}
Ergänzende Seiten und DSGVO-Elemente
Neben dem Storefront und der Katalogstruktur umfasste das Projekt grundlegende Informationsseiten wie „Über uns“ und „Kontakt“.
Zusätzlich wurden mehrere rechtlich relevante Seiten einschließlich ihrer Inhalte erstellt:
- Öffentliches Angebot;
- Allgemeine Geschäftsbedingungen;
- Datenschutzerklärung;
- Cookie-Richtlinie.
Es wurde eine DSGVO-orientierte Cookie-Consent-Oberfläche mit individuellen Einstellungsmöglichkeiten umgesetzt, anstatt lediglich einen einfachen Hinweisbanner einzusetzen.
Damit wurde die grundlegende rechtliche und datenschutzbezogene Struktur geschaffen, die für die weitere Entwicklung der kommerziellen Website erforderlich ist.
Oberfläche zur Einwilligung in die Verwendung von Cookies
Oberfläche zur Einwilligung in die Verwendung von Cookies mit individuellen Einstellungsmöglichkeiten, Desktop-Vorschau
{W}
Kontaktabläufe und Benachrichtigungen
Auf dem Hosting des Kunden wurden domainbasierte E-Mail-Konten eingerichtet und mit den Kontaktformularen der Website verbunden.
Eingehende Formularanfragen werden an die Domain-E-Mail-Adresse des Shops zugestellt, während Kopien automatisch an die private E-Mail-Adresse des Kunden weitergeleitet werden.
Telegram wurde zusätzlich als weiterer Benachrichtigungskanal eingerichtet.
Über die Website-Formulare gesendete Nachrichten sowie von der Website erzeugte E-Mail-Benachrichtigungen werden zusätzlich an einen Telegram-Bot übermittelt.
Dadurch hängen Kundenanfragen nicht von einem einzigen Kommunikationskanal ab und können auch dann schnell wahrgenommen werden, wenn sich der Kunde nicht in der Administrationsoberfläche der Website befindet.
{U}
Performance und technische Bereitstellung
Nach Abschluss der Entwicklung wurde die Website aus der Umgebung des Auftragnehmers auf das Hosting und die Produktivdomain des Kunden geklont.
Der Produktivserver verwendet LiteSpeed. Caching und Performance-Optimierung wurden daher nach der Bereitstellung entsprechend dem Verhalten der endgültigen Hosting-Umgebung konfiguriert.
Google-PageSpeed-Tests nach der Optimierung ergaben auf der gesamten Website mobile Werte von über 80 und Desktop-Werte von über 90, wobei viele Seiten 99–100 erreichten.
Zusätzlich wurde ein grundlegender Schutz vor Brute-Force-Anmeldeversuchen für den WordPress-Administrationsbereich eingerichtet.
Die finale Bereitstellung umfasste somit nicht nur den Storefront selbst, sondern auch die für den praktischen täglichen Betrieb erforderliche Hosting-, E-Mail-, Benachrichtigungs-, Performance- und grundlegende Sicherheitskonfiguration.
{!}
Ergebnis
Der Kunde erhielt einen funktionsfähigen WooCommerce-basierten Storefront, der als erste Ausbaustufe eines größeren E-Commerce-Projekts konzipiert wurde.
Die bereitgestellte Version umfasst:
- eine individuell entwickelte Landingpage-artige Startseite;
- WooCommerce-Produkt- und Kategoriestruktur;
- 16 reale Produkte, die meisten davon mit Varianten;
- individuell angepasste Produktseiten und Variantenauswahl;
- individuelle mehrfarbige Varianten-Swatches;
- modale Anfrage-Workflows;
- direkte Kommunikation über Messenger und Hotline;
- ausklappbare Produktbeschreibungen und akkordeonbasierte technische Spezifikationen;
- Produktfilterung über ein seitlich eingeblendetes Panel;
- Informations- und rechtlich relevante Seiten;
- DSGVO-orientierte Cookie-Einstellungen;
- Integration von Domain-E-Mail und Telegram-Benachrichtigungen;
- responsives Storefront-Verhalten;
- Caching und Performance-Optimierung auf dem Produktivserver;
- eine Architektur, die für die weitere E-Commerce-Erweiterung vorbereitet ist.
Der aktuelle öffentliche Workflow funktioniert bewusst ohne sichtbaren Warenkorb und Checkout.
Diese Komponenten können später zusammen mit Zahlungs-, Liefer- und weiteren kommerziellen Integrationen ergänzt werden, ohne die zugrunde liegende WooCommerce-Struktur ersetzen zu müssen.
{*}
Hinweise
Dieser Portfolio-Case dokumentiert die erste veröffentlichte Ausbaustufe der TehnoVek-Website.
Das Projekt wurde bewusst als skalierbares System und nicht als abgeschlossene einmalige Landingpage konzipiert.
Der Kunde plant, den Produktkatalog weiter auszubauen und möglicherweise zusätzliche Funktionen wie Zahlungs- und Ratenzahlungsdienste, erweiterte Produktfilter, Lieferintegrationen und weitere E-Commerce-Funktionen einzuführen.
Aus diesem Grund sollte die hier präsentierte Version als technische und strukturelle Grundlage des Projekts und nicht als dessen endgültiger möglicher Entwicklungsstand betrachtet werden.
Eine separate Demo-Kopie bewahrt diese ursprüngliche Umsetzung, auch wenn sich die produktive Website weiterentwickelt.
Sollte die zukünftige Entwicklung einen entsprechend großen Umfang erreichen, können spätere Ausbaustufen separat als fortlaufender WooCommerce-Entwicklungs- und Anpassungs-Case dokumentiert werden.
{!}
Nachweis der Zusammenarbeit
Das Projekt wurde über Freelancehunt umgesetzt.
Unten finden Sie eine echte Kundenbewertung, die weiterhin auf der Plattform verfügbar ist.
{*}
<Kontakt>
…Wenn Sie ein Projekt besprechen, Anforderungen klären oder eine mögliche Zusammenarbeit erkunden möchten, finden Sie alle Kontaktdaten auf der Kontaktseite.