Seite kopieren

Theme und Frontend

Zuletzt geändert am 17. Oktober 2026

Grundlage ist Storefront, das offizielle Theme von WooCommerce (GPLv3). Storefront selbst bleibt unverändert, alle Anpassungen liegen im Child Theme ospo-storefront. Die Marke ist über ein eigenes Customizer-Panel austauschbar: Logo, Farben, Text der oberen Leiste, Vertrauensleiste, Adresse im Footer. Damit taugt das Theme als Grundlage für Demoshops.

Aufbau des Child Themes

Datei	Zweck
functions.php	Skripte, Styles, Theme-Supports
front-page.php	eigene Startseite
inc/customizer.php	Customizer-Panel
inc/storefront-hooks.php	alle Änderungen an Storefront-Hooks an einer Stelle
inc/germanized.php	Kassenschritte, Infobox auf der Produktseite, Hinweis im Warenkorb, EU-Gewährleistungshinweis auf Produktlisten
inc/template-tags.php	Footer, Kategorie-Kacheln, Vertrauensleiste, Newsletter
inc/filters.php	Kategorie- und Verfügbarkeitsfilter auf Archivseiten
inc/pdp.php	Abzeichen, Rabatt, Verfügbarkeit auf der Produktseite
inc/account.php	Nutzerkarte über der Kontonavigation
inc/performance.php	Ladeverhalten, siehe unten
assets/	CSS mit Design-Tokens, JavaScript, selbst gehostete Schriften

Dazu vier Template-Overrides unter woocommerce/, jeder mit Grund:

Override	Grund
content-single-product.php	eigener Wrapper nur um Galerie und Zusammenfassung, damit die übrigen Geschwisterelemente das Spaltenlayout nicht sprengen
loop/result-count.php	eigener Zählertext („1–12 von 48")
single-product/meta.php	Artikelnummer und Kategorie entfernt, beides steht schon anderswo
myaccount/orders.php	Bestellübersicht als Kacheln statt Tabelle

Dazu ein Override für Germanized: woocommerce-germanized/global/popover.php macht aus dessen Popovers barrierefreie Dialoge, für den EU-Gewährleistungshinweis und alle übrigen Popover von Germanized, siehe Rechtliches.

Hooks des Parent Themes

Das Child Theme lädt vor dem Parent Theme. WordPress lädt functions.php des Child Themes zuerst, damit es Funktionen des Parents überschreiben kann. Ein remove_action() auf oberster Ebene der Datei läuft deshalb ins Leere, weil Storefront seine Hooks erst danach registriert. Alle Hook-Änderungen gehören in eine Funktion an init:

add_action( 'init', 'ospo_register_storefront_hooks', 20 );

Prioritäten, die in Storefront 4.6 tatsächlich gelten:

• storefront_header: Container (0), Sprunglinks (5), Branding (20), Zweitnavigation (30), Produktsuche (40), Container schließen (41), Navigations-Wrapper (42), Hauptnavigation (50), Warenkorb (60), Wrapper schließen (68)
• storefront_footer: Widgets (10), Credit (20)
• Die Sidebar kommt nicht über woocommerce_sidebar, sondern über storefront_sidebar (Priorität 10), aufgerufen nachdem #primary schon geschlossen ist.

CSS-Fallstricke

• Flex-Elemente haben ein implizites min-width: auto, das sich am Inhalt orientiert und selbst flex-shrink: 0 aushebelt. Eine lange Überschrift oder ein großes Platzhalterbild sprengt dann die Spalten. Lösung: min-width: 0 auf das Flex-Element.
• order wirkt bei CSS Grid auch auf die automatische Platzierung, nicht nur auf die Malreihenfolge wie bei Flexbox.
• WooCommerce rendert vieles als Geschwister im selben Container (Sale-Abzeichen, Galerie, Zusammenfassung, Tabs, ähnliche Produkte). Ein einfaches Zwei-Spalten-Layout zerbricht daran. Sauberer als :not()-Selektoren ist ein Template-Override mit eigenem Wrapper.
• Exakt aufgehende Flex-Rechnungen kippen bei kleinsten Rundungsfehlern in den Umbruch. Ein paar Pixel Luft lassen.
• Storefronts Prozentbreiten für die Sidebar wirken weiter, auch wenn man sie neu positioniert. In einem engeren Container ergibt width: 21.7% dann eine winzige Spalte. Lösung: width: 100%; float: none im neuen Kontext.

Ladeverhalten

Erst messen, dann optimieren. Gzip war aktiv, über die Leitung gingen nur 171 KB. Der Hebel lag in der Zahl der Requests, vor allem in 17 blockierenden Stylesheets. Regel in inc/performance.php: nur entfernen, was auf der jeweiligen Seite nachweislich nichts tut.

Maßnahme	Begründung
Google Fonts von Storefront entfernt	Storefront lädt „Source Sans Pro" in neun Schnitten, das Theme nutzt die Schrift gar nicht
Emoji-Skript entfernt	betrifft praktisch keine heutige Zielgruppe
Block-Stylesheets nur bei Bedarf	nur dort, wo has_blocks() zutrifft. Warenkorb und Kasse brauchen sie, Archiv und Produktseite nicht
Formular und Captcha nur bei Bedarf	nur auf Seiten mit Formular

Ergebnis: 40 statt 46 Assets und 155 statt 171 KB über die Leitung, ohne dass eine Seite Funktion verliert.

Google Fonts sind auch ein Datenschutzthema

Beim Nachladen geht die IP-Adresse der Besuchenden ohne Einwilligung an Google. Das ist in Deutschland angreifbar (LG München I, 3 O 17493/20). Schriften selbst hosten.