Produkte
Klare Kategorien, Varianten, Attribute und Produktinformationen.
Onlineshops
Ich entwickle WooCommerce-Shops, die zu deinen Produkten und deinen echten Abläufen passen. Sortiment, Bestellung, Zahlung, Versand und Pflege werden so aufgebaut, dass der Shop im Alltag verständlich und erweiterbar bleibt.
Kurz erklärt
WooCommerce ist sinnvoll, wenn Produkte, Inhalte und Shop in WordPress gemeinsam gepflegt werden sollen und die Abläufe zu Zahlung, Versand, Bestellungen und Pflege klar definiert sind. Entscheidend ist nicht die Zahl der Funktionen, sondern ein Shop, der im Tagesgeschäft beherrschbar bleibt.
Shoplogik
Bevor das Design entsteht, klären wir Sortiment, Kategorien, Produktdaten, Zahlarten, Versand und die Abläufe dahinter. So bleibt WooCommerce nachvollziehbar und später erweiterbar.
Klare Kategorien, Varianten, Attribute und Produktinformationen.
Ein nachvollziehbarer Weg vom Produkt bis zum Checkout.
Technische Anbindung geeigneter Zahlungs- und Versandlösungen nach Bedarf.
Updates, Backups, Sicherheit und technische Weiterentwicklung nach dem Start.
Technische Basis
Ein Shop wird schnell komplex, wenn für jede Kleinigkeit ein Plugin dazukommt. Ich prüfe deshalb zuerst, was WooCommerce bereits kann und welche Erweiterung wirklich gebraucht wird.
Wichtig
Ich richte die technische Shopfunktion ein. Rechtstexte, steuerliche Vorgaben und individuelle rechtliche Bewertungen müssen von dafür qualifizierten Stellen kommen.
Die technische Einbindung externer Rechtstexte kann ich übernehmen.
Ablauf
So lassen sich spätere Umbauten vermeiden und der Aufwand realistischer einschätzen.
Welche Produkte, Varianten und Kategorien gibt es?
Wie laufen Zahlung, Versand, E-Mails und Bestellungen?
Shop, Inhalte und technische Integrationen werden eingerichtet.
Bestellstrecke, Mobilansicht und wichtige Sonderfälle werden geprüft.
Häufige Fragen
Kurze Antworten auf Fragen, die bei Websites, Shops, SEO und Betreuung immer wieder auftauchen.
WooCommerce passt gut, wenn Produkte, Inhalte und Verkauf eng mit einer WordPress-Website verbunden werden sollen. Vor dem Start prüfe ich Anforderungen, Prozesse und notwendige Schnittstellen.
Ja. Struktur, Technik, Darstellung und Abläufe können geprüft und schrittweise verbessert werden. Ein kompletter Neubau ist nicht automatisch nötig.
Ja. Gerade bei Shops sind Updates, Backups und technische Kontrolle wichtig und können in die laufende Betreuung aufgenommen werden.
Nein. Rechtliche Inhalte gehören zu spezialisierten Rechtsdienstleistern. Ich kann bereitgestellte Rechtstexte technisch in den Shop integrieren.
Shop-Projekt
Beschreibe Sortiment und aktuelle Situation. Dann lässt sich der Aufwand realistisch einordnen.
Bricks Designsystem · Section-Zuordnung
Die Reihenfolge entspricht der sichtbaren Seite von oben nach unten. Grundregel: Section-Farbklasse + optionaler Größenmodifikator → Container-Klasse → Layout-/Komponentenklasse. Einzelwerte nur dort, wo das Layout wirklich seitenbezogen ist.
.page-herosection-standard section-grosscontainer-standard--section-innen-vertikal-gross; --container-breite; --container-innen-horizontal; --abstand-spaltenVerbindliche Hero-Komponente: `hero-layout` auf dem inneren Layout-Wrapper, `hero-inhalt` auf der linken Inhaltsspalte und `hero-grafik` auf der rechten Grafikspalte. Eyebrow: `text-eyebrow`; Lead/Subheadline: `text-subheadline`; Buttons: `button-gruppe`. Tablet Hochformat (≤991 px) bleibt zweispaltig; erst Mobile Landscape (≤767 px) wird einspaltig gestapelt; bei Mobile Portrait (≤478 px) stehen die Buttons untereinander. Vorhandene individuelle Breakpoint-Werte für Spaltenbreite oder Textausrichtung in Bricks entfernen.
.answer-bandsection-standard section-kompaktcontainer-standard--section-innen-vertikal-kompakt; --container-breite; --container-innen-horizontal; --abstand-spalten; --farbe-rahmenKompakter Antwortblock. Für die asymmetrische 0,72/1,28-Aufteilung das bestehende Answer-Grid als eigene Komponentenklasse beibehalten. Eyebrow: Klasse `text-eyebrow`.
.service-contextsection-standardcontainer-standard--farbe-weiss; --farbe-rahmen; --container-breite; --container-innen-horizontal; --abstand-elemente; --abstand-inhaltsgruppeKompakte Leistungsnavigation. Standard-Section-Padding nicht verwenden; eigenes Komponentenlayout auf Basis der Design-Tokens.
.trust-stripsection-dezentcontainer-standard--farbe-grau-hell; --farbe-rahmen; --container-breite; --container-innen-horizontal; --abstand-elemente; --abstand-inhaltsgruppeKompakte Komponentenleiste. Standard-Section-Padding nicht verwenden; die Leiste erhält ihr eigenes kompaktes Innenlayout.
.sectionsection-standardcontainer-standard--section-innen-vertikal; --farbe-weiss; --farbe-text; --container-breite; --container-innen-horizontal; --abstand-spaltenNormale Inhaltssektion auf weißer Fläche. Eyebrow: Klasse `text-eyebrow`.
.section.section-darksection-dunkelcontainer-standard--section-innen-vertikal; --farbe-dunkel; --farbe-text-invers; --container-breite; --container-innen-horizontal; --abstand-spaltenDunkle Section. Überschriften und Links erben die inverse Textlogik aus dem Designsystem. Eyebrow: Klasse `text-eyebrow`.
.section.section-warmsection-warmcontainer-standard--section-innen-vertikal; --farbe-warnung-hell; --farbe-text; --container-breite; --container-innen-horizontal; --abstand-spaltenWarme Hinweisfläche; kein Warnstatus, sondern ruhige Akzentfläche. Eyebrow: Klasse `text-eyebrow`.
.sectionsection-standardcontainer-standard--section-innen-vertikal; --farbe-weiss; --farbe-text; --container-breite; --container-innen-horizontal; --abstand-inhaltsgruppeNormale Inhaltssektion auf weißer Fläche. Eyebrow: Klasse `text-eyebrow`.
.section.faq-sectionsection-standardcontainer-standard--section-innen-vertikal; --farbe-weiss; --farbe-text; --container-breite; --container-innen-horizontal; --abstand-inhaltsgruppeNormale Inhaltssektion auf weißer Fläche. Eyebrow: Klasse `text-eyebrow`.
.section.section-softsection-dezentcontainer-standard--section-innen-vertikal; --farbe-grau-hell; --farbe-text; --container-breite; --container-innen-horizontal; --abstand-elemente; --radius-grossDezente Flächenabwechslung für ruhige Inhalts- oder CTA-Bereiche. Eyebrow: Klasse `text-eyebrow`.
Nur für die Umsetzung
Diese Angaben gehören in SEOPress bzw. in die redaktionelle/technische Umsetzung. Den gesamten grünen Arbeitsbereich auf der Live-Website nicht als sichtbaren Inhalt übernehmen.
Global: SEOPress Knowledge Graph auf „Person“ mit echten, konsistenten Kontaktdaten und nur tatsächlich vorhandenen Profilen (sameAs) pflegen. XML-Sitemap und Open Graph aktivieren. FAQ-Inhalte sichtbar lassen, aber FAQ-Schema nicht als Rich-Result-Strategie einplanen.
Die Seite nativ in Bricks aufbauen. Zusätzlich zu Layout und Breakpoints gelten verbindlich die Kapitel Barrierefreiheit, Datenschutz und KI-Suche. Öffentliche Texte nennen weiterhin nur WordPress und WooCommerce, nicht den Pagebuilder.
Bricks-Anweisung für diese Seite öffnen →