Darstellung der Shopseiten

Unter wpShopGermany → Konfiguration → Einstellungen → Darstellung legen Sie mit Darstellung der Shopseiten fest, wie Produktseiten, Warenkorb, Kasse und Kundenkonto im Frontend aussehen:

• An das Theme angepasst: Farben, Schrift und Knöpfe kommen aus Ihrem Theme. Produktseite und Kasse haben einen eigenen, aufgeräumten Aufbau.
• Klassisch: ein eigener Aufbau mit festen Farben und Abständen des Shops, unabhängig vom Theme.

Die Einstellung gibt es seit Version 4.6.1. Neue Installationen beginnen mit „An das Theme angepasst“. Bestehende Shops bleiben nach dem Update bei „Klassisch“, bis Sie umschalten. In einem Multisite-Netzwerk gilt die Einstellung je Website: Websites, die nach der Installation von wpShopGermany hinzukommen, beginnen mit „Klassisch“; dort schalten Sie selbst um. Zurückschalten geht jederzeit; Ihre Produkte, Seiten und Einstellungen bleiben dabei, wie sie sind.

Umschalten

1. Öffnen Sie wpShopGermany → Konfiguration → Einstellungen → Darstellung.
2. Wählen Sie bei Darstellung der Shopseiten „An das Theme angepasst“ oder „Klassisch“.
3. Speichern Sie mit Einstellungen speichern und sehen Sie sich Produktseite, Warenkorb und Kasse an.

Haben Sie eigene Stildateien des Shops angelegt, etwa eine eigene frontend.css im Theme oder unter wp-content/uploads/wpsg/user_views/, nennt die Seite deren Fundort. In der Darstellung „An das Theme angepasst“ werden sie nicht mehr geladen. Umgeschaltet wird erst, wenn Sie Verstanden, eigene Stildateien nicht mehr laden ankreuzen; sonst bleibt „Klassisch“ stehen und die übrigen Einstellungen werden gespeichert.

Was sich in „An das Theme angepasst“ ändert

Überall

• Schrift, Farben, Eingabefelder und Knöpfe folgen dem Theme, auch in dunklen Farbschemen.
• Jede Seite des Shops hat genau eine Hauptüberschrift: den Seitentitel. Zeigt die Seitenvorlage selbst keinen Titel (etwa „Seite ohne Titel“), setzt der Shop ihn über den Inhalt.
• Seiten mit reinem Text, die der Shop neu anlegt (Rechtstexte, Bestätigungen, Ergebnis der Zahlung), bekommen die Seitenvorlage des Themes mit Titel. Seiten, die bereits bestehen, behalten ihre Vorlage.

Produktseite

An das Theme angepasstKlassisch

• Die Produktseite nutzt die breite Spalte des Themes: Bild links mit einer Bildleiste der Vorschaubilder darunter, die Angaben rechts. Auf dem Handy steht beides untereinander.
• Über dem Titel stehen Brotkrumen mit Startseite, Kategorie und Produkt. Als Kategorie erscheint die, aus der der Besucher kam, sonst die erste Kategorie des Produkts (Modul ProduktArtikel).
• Der Preis steht mit „inkl. … % MwSt., zzgl. Versandkosten“ und dem Grundpreis in einer Zeile, darunter die Lieferzeit.
• Die Variantenauswahl steht über der Menge, Menge und Knopf „In den Warenkorb“ nebeneinander.
• Eine Liste nennt die Artikelnummer (wenn Artikelnummer im Produkttemplate anzeigen eingeschaltet ist) und den Hersteller, darunter folgt der Abschnitt „Beschreibung“.
• Etiketten zeigen „Neu“ (Schalter Als neu kennzeichnen am Produkt) und „Angebot“ (wenn ein Alter Preis über dem Preis liegt). Dieselben Etiketten stehen in der Produktliste auf dem Bild.
• Der Knopf „Vertrag widerrufen“ des Widerrufsformulars steht in einer eigenen Zeile unter Menge und Knopf.
• Zubehörprodukte erscheinen als Kacheln mit Bild, Name, Preis und Etikett.
• Mit dem Modul Produktbewertungen stehen unter dem Namen die Sterne mit Schnitt und Anzahl; ganz unten folgt der Abschnitt „Bewertungen“.

Produkte mit den mitgelieferten Produkttemplates standard.phtml, standard2.phtml und standard3.phtml zeigen in dieser Darstellung den neuen Aufbau. Eigene Produkttemplates und eigene Kopien der mitgelieferten bleiben, wie sie sind.

Warenkorb und Kasse

An das Theme angepasstKlassisch

• Die Schritte der Kasse stehen als nummerierte Liste über dem Formular.
• Neben dem Formular steht „Ihre Bestellung“ mit den Posten, Versand- und Zahlungsart und den Summen wie im Warenkorb. Auf dem Handy folgt sie unter dem Formular.
• Vorname und Name sowie PLZ und Ort stehen nebeneinander.
• „Zurück zum Warenkorb“ ist ein Link, „Weiter“ ein Knopf.

Seitenvorlage „Checkout“: Bietet Ihr Theme eine Seitenvorlage „Checkout“, bekommt eine neu angelegte Warenkorbseite sie automatisch; wie sie aussieht, bestimmt das Theme. Eine bestehende Warenkorbseite stellt der Shop nicht um. Möchten Sie die Vorlage nutzen, wählen Sie sie selbst:

1. Öffnen Sie die Warenkorbseite unter Seiten im Editor.
2. Wählen Sie rechts im Bereich Seite bei Template die Vorlage „Checkout“.
3. Speichern Sie die Seite.

Shop in einem Block-Theme

In einem Block-Theme (z. B. Twenty Twenty-Five) bringt der Shop in der Darstellung „An das Theme angepasst“ eigene Seitenvorlagen mit. Die Vorlagen für Produktartikel und Produktkategorien sowie eine Seite „Sortiment“ brauchen das Modul ProduktArtikel, ein Kaufmodul nur in Pro und Enterprise. Sie erscheinen im Website-Editor unter Design → Editor → Templates:

Vorlage	Zeigt
Produktartikel (Modul ProduktArtikel)	die Produktseite eines Produktartikels mit Kopf- und Fußbereich des Themes
Produktkategorie (Modul ProduktArtikel)	Titel und Beschreibung der Kategorie, darunter die Produkte als Kacheln mit Seitenzahlen und, mit dem Modul Produktansichten, dem Produktfilter
Produktdetailseite	die Produktdetailseite ohne zusätzlichen Seitentitel

Die Kacheln der Kategorien gleichen denen des Blocks Produktliste: Bild mit Etikett, Name, Sterne (Modul Produktbewertungen), Preis mit Grundpreis und MwSt.-Hinweis, Lieferzeit und „Zum Produkt“. Breit stehen vier Kacheln nebeneinander, auf dem Handy zwei. Wie viele Produkte eine Seite zeigt, richtet sich nach Einstellungen → Lesen → Anzahl der neuesten Beiträge auf Archivseiten.

Passen Sie eine Vorlage im Website-Editor an, gilt Ihre Fassung. Bringt das Theme selbst eine Vorlage gleichen Namens mit, geht die des Themes vor. In klassischen Themes und in der Darstellung „Klassisch“ bleiben die Seiten, wie sie das Theme ausgibt.

Eine Übersicht aller Produktartikel, etwa eine Seite „Sortiment“, bauen Sie mit dem Block Produktkacheln.

Das Block-Theme Ahoi ist auf wpShopGermany abgestimmt. Wie beide zusammenarbeiten, steht im Handbuch von Ahoi.

Eigene Vorlagen

Unter der Darstellung zeigt der Kasten Eigene Vorlagen, welche Templates der Shop aus dem Theme, dem Child-Theme oder wp-content/uploads/wpsg/user_views/ statt aus dem Plugin lädt: mit Fundort, der Version Ihrer Fassung und der Version im Plugin. Ohne eigene Vorlagen steht dort „Der Shop nutzt nur die Vorlagen des Plugins.“

Jedes Template des Plugins trägt eine Versionsnummer. Sie steigt nur, wenn Ihre Kopie nachgezogen werden sollte, etwa wegen einer neuen Klasse, eines neuen Felds oder einer Sicherheitskorrektur. Kopien, die vor dieser Kennzeichnung entstanden sind, stehen als „Version unbekannt“ da.

Auch der Website-Zustand von WordPress (Werkzeuge → Website-Zustand) prüft die eigenen Vorlagen. Er empfiehlt eine Aktualisierung, wenn eine Kopie ausdrücklich älter ist oder wenn in der Darstellung „An das Theme angepasst“ eine Kopie ohne Version vorliegt; dort fehlen alten Kopien die Klassen, mit denen Knöpfe den Stil des Themes übernehmen. Wie Sie Unterschiede finden, steht unter Unterschiede von Templates erkennen.

Feinheiten anpassen

Farben, Abstände und Ecken des Shops lassen sich in der Darstellung „An das Theme angepasst“ mit wenigen Zeilen eigenem CSS ändern, etwa unter Design → Editor → Stile → Zusätzliches CSS oder im Customizer:

:root {
    --wpsg-label-background: #b00020;
    --wpsg-radius: 0;
}

Alle Werte stehen unter Für Theme-Entwickler. Farben, Schrift und Abstände des Shops sind schwach gesetzt; eigenes CSS mit einem einfachen Selektor überschreibt sie. Für Regeln zum Aufbau, etwa zum Ein- und Ausblenden, braucht eigenes CSS einen genaueren Selektor.