Behobene WooCommerce-Probleme & Verbesserungen

1. WooCommerce-Verbesserungen im Frontend

Breadcrumbs (Navigationspfad)

Der „Home“-Link in der WooCommerce-Brotkrümelnavigation (Wenn Aktiviert zeigt nicht mehr zur Startseite, sondern direkt zum /shop/. Das ist für Kunden praktischer, weil sie so mit einem Klick zurück ins Sortiment gelangen.

englischer Wörter oder kleine Texte korrigiert

Samtliche englischer Wörter oder kleine Texte, der in manchen Bereichen auftauchten, und nicht in der Deutsche sprachdatei anwezend sind wurden via die Templates in saubere deutsch übersetzt.

Lagerstatus „Nicht vorrätig“

Auf der Produktseite wird der Lagerstatus zusätzlich als kleines rotes Badge mit weißem Text angezeigt, ähnlich wie ein Aktions-Anhänger.

„Gebraucht“-Badge

Eine besonders wichtige Funktion ist die visuelle Kennzeichnung von Gebrauchtwaren.

Das „Gebraucht“-Badge wird prominent angezeigt

• Shop-Übersicht (Badge)
• Produktdetailseite (Badge)
• Warenkorb & Checkout (Badge)
• Dankeseite (Text)
• Bestellübersicht/mein Konto (Text)
• E-Mails (Text)
• Bestellungen/admin (Text)

Mobile First

Die Bestellübersichtstabelle wird auf Smartphones komplett umgebaut für Handy:

• Warenkorb
• Checkout
• Dankeseite
• Bestellübersicht/mein Konto
• E-Mails 

Kenzeichnung MwSt.

die MwSt. Satz wird jetzt pro artikel gezeigt in Warenkorb, Checkout, E-mail

Versandklassen

wenn versandklassen in versand angewendet werden, z.B. Sperrige artikel wo ein Versandzuschläg angerechnet wird, zeigt Woocommerce dies nirgendwo. Der Kunde sieht nirgendwo, dass ein Produkt einer speziellen Versandklasse (z. B. „Sperrgut“ oder „Schwere Artikel“) angehört. Es gibt keinen Hinweis wie Versandzuschlag: Sperrgut.ist

3. Mein Konto-Bereich

Der Mein-Konto-Bereich ist jetzt klassisch zweispaltig aufgebaut:

• • • Links (25 %): Das Navigationsmenü mit den Bereichen „Bestellungen“, „Adressen“, „Kontodetails“ usw., auf grauem Hintergrund.
    • Rechts (75 %): Der eigentliche Inhaltsbereich.

Das Padding wird korrekt in die Breite eingerechnet, sodass nichts überläuft. Auf Mobilgeräten stapeln sich Navigation und Inhalt automatisch untereinander.

4. Mobile Optimierung – komplett überarbeitet

Checkout auf dem Handy

Die Bestellübersichtstabelle wird auf Tablets und Smartphones komplett umgebaut:

• • • Auf Tablets erscheint sie als Kartenansicht: Jedes Produkt ist ein eigener Block mit Produktname, Preis, Menge, Steuer und Zwischensumme übersichtlich untereinander.
    • Auf dem Handy wird die Tabelle noch kompakter: Preis, Menge, Steuer und Zwischensumme stehen in einer einzigen Zeile nebeneinander, damit der Kunde alles auf einen Blick sieht, ohne endlos scrollen zu müssen.

Warenkorb auf dem Handy

Auch hier gibt es zwei getrennte Tabellen – eine für den Desktop und eine speziell fürs Handy. Die mobile Version zeigt jedes Produkt als Karte mit:

• • 1. Entfernen-Button + Produktname
    2. Preis, Steuer, Mengeneingabe
    3. Zwischensumme

Die normale Desktop-Tabelle wird auf dem Handy komplett ausgeblendet, damit nichts doppelt erscheint.

Dankeseite auf dem Handy

Die Bestelldetails auf der Dankeseite werden auf dem Handy gezwungen, zweispaltig zu bleiben (Produktname links, Preis rechts). Die Gesamtsumme am Ende wird mit blauem Hintergrund und weißer Schrift hervorgehoben – der Kunde sieht sofort, was er bezahlt hat.

Weitere Handy-Anpassungen

• • • Das mobile Menü wird an bestimmten Stellen ausgeblendet, wo es stört.
    • Die Produkt-Sortierung („Sortierung nach …“) wird auf dem Handy ausgeblendet, um Platz zu sparen.
    • Header und Content-Bereiche bekommen auf dem Handy keine Schatten mehr, was die Ladezeit und Darstellung auf kleinen Bildschirmen verbessert.

5. Bewertungssystem – streng und fair

Das Bewertungssystem wurde so angepasst, dass es deutlich hochwertigere und vertrauenswürdigere Bewertungen liefert:

• • • Nur Käufer dürfen bewerten: Wer eingeloggt ist, das Produkt aber nicht gekauft hat, sieht statt des Formulars den Hinweis „Nur Käufer können dieses Produkt bewerten.“
    • Nur eine Bewertung pro Produkt: Hat ein Kunde ein Produkt bereits bewertet, wird das Bewertungsformular durch den Hinweis „Du hast dieses Produkt bereits bewertet.“ ersetzt. Die bestehende Bewertung bleibt sichtbar.
    • Gäste müssen sich anmelden: Nicht eingeloggte Besucher sehen „Bitte melde dich an, um eine Bewertung abzugeben.“

Das verhindert Bewertungs-Spam und stellt sicher, dass nur echte Käufer ihre Meinung äußern.

6. Produkt-Tags und Kategoriebeschreibungen

Produkt-Tags sind jetzt hierarchisch

Produkt-Tags verhalten sich jetzt wie Kategorien: Sie können über- und untergeordnet sein. Das ist besonders nützlich, wenn du z. B. ein Tag „Elektronik“ hast und darunter „Smartphones“ und „Laptops“ als Unter-Tags anlegen möchtest.

HTML in Kategoriebeschreibungen erlaubt

Normalerweise filtert WordPress beim Speichern von Kategorie- und Produktkategoriebeschreibungen fast alle HTML-Tags heraus. Das ist jetzt geändert: Du kannst in Beschreibungen jetzt Absätze, Listen, fette/kursive Texte, Überschriften, Bilder und Links verwenden. Die erlaubten Tags sind sicher gehalten (kein JavaScript, kein iframe), sodass nichts kaputtgehen kann.

7. Das „Gebraucht“-Badge

Für gebrauchte Produkte wurde ein komplett eigenes Badge-System gebaut, das an allen wichtigen Stellen im Shop auftaucht:

• • 1. Produktseite: Ein orangefarbenes Badge „Gebraucht“ erscheint direkt unter dem Produkttitel.
    2. Shop-Übersicht (Kategorie/Archiv): Das Badge liegt oben rechts über dem Produktbild.
    3. Warenkorb: Direkt unter dem Produktnamen erscheint das Badge.
    4. Kasse (Checkout): Das Badge steht in einer eigenen Zeile unter dem Produktnamen, ohne den Rest der Tabelle zu verzerren.
    5. Bestellung & E-Mails: In der Bestellbestätigung, auf der Dankeseite, im „Mein Konto“-Bereich und in allen WooCommerce-E-Mails wird der Zustand „Gebraucht“ als Meta-Daten zum Produkt hinzugefügt. Der Kunde sieht also überall schwarz auf weiß, dass es sich um Gebrauchtware handelt.

Im Admin-Bereich (beim Anlegen/Bearbeiten von Produkten) werden alle Germanized-Checkboxen (gebraucht, defekt, Service, Differenzbesteuerung usw.) in einer einzigen Zeile nebeneinander angezeigt, statt untereinander.

8. Preis- und Einheitendarstellung (Decimal Product Quantity)

Preis und Einheit auf der Produktseite

Der Hook des Plugins „Decimal Product Quantity“, der normalerweise vor dem „In den Warenkorb“-Button sitzt, wurde entfernt, damit er das Layout nicht stört. Stattdessen wird die Preis-Einheit (z. B. „€/kg“, „€/m“) direkt hinter dem Preis der Produktvariation angezeigt.

Preis und Einheit in Bestellung, Dankeseite und E-Mails

In allen Bestellübersichten (Warenkorb, Kasse, Dankeseite, Mein Konto, E-Mails) wird der Produktpreis zusammen mit der Einheit direkt unter dem Produktnamen angezeigt. Der Kunde sieht also nicht nur „Apfel“, sondern „Apfel – 2,50 € / kg“. Das ist besonders bei Produkten mit Maßeinheiten wichtig, weil so Missverständnisse vermieden werden.

9. Theme Trevia Einstellungen im Customizer

Im WordPress-Customizer wurde eine komplett neue, eigene Sektion ganz nach oben gelegt: „Theme Trevia Einstellungen“. Dort kannst du ohne Codekenntnisse vier Bereiche visuell anpassen:

1. Farbe der Sidebar-Widgets

Du kannst die Hintergrundfarbe aller Widgets in der Sidebar frei wählen und zusätzlich die Transparenz von 0 (durchsichtig) bis 1 (voll deckend) einstellen.

2. Farbe des Inhaltsbereichs

Dasselbe für den Hauptinhaltsbereich der Seite (.site-main) – Farbe und Transparenz frei wählbar.

3. Farbe der Container („Glasplatte“)

Die großen Container (.ast-container), in denen der eigentliche Seiteninhalt liegt, können mit eigener Farbe und Transparenz belegt werden. Standard ist hier eine leichte Transparenz (0,3), was einen schönen Glasplatten-Effekt erzeugt.

4. Body-Hintergrund (Bild + Farbe)

Mit einem Haken kannst du die Standard-Customizer-Einstellungen für den Body-Hintergrund überschreiben. Dann stehen dir zur Verfügung:

• • • Ein Hintergrundbild aus der Mediathek
    • Eine Layer-Farbe, die über das Bild gelegt wird
    • Die Transparenz dieses Layers

So kannst du z. B. ein Foto als Hintergrund nehmen und mit einer halbweißen Farbschicht dafür sorgen, dass der Text darauf immer gut lesbar bleibt.

Alle Werte werden automatisch in RGBA umgerechnet, sodass die Transparenz technisch sauber funktioniert.

10. Weitere kleine Verbesserungen

• • • Gutenberg-Widget-Editor deaktiviert: Der neue Block-Editor für Widgets ist abgeschaltet, sodass du weiterhin das klassische, bewährte Widget-System nutzt. Das ist stabiler und mit vielen Plugins kompatibler.
    • Einträge-Metadaten ausgeblendet: Die Anzeige von Autor, Datum usw. unter Blogbeiträgen wird nicht mehr angezeigt, was die Seiten aufgeräumter wirken lässt.
    • Listen-Pfeile: Aufzählungszeichen (Markers) in nummerierten Listen werden fetter und schwarz dargestellt, was die Lesbarkeit verbessert.
    • Überschriften-Abstände: h2, h3 und h4 haben weniger Abstand nach unten, was kompaktere und ruhigere Seiten erzeugt.
    • Berocket AJAX Filter: Die Überschriften der Filtergruppen bekommen eine klarere Größe und Abstände.
    • Produkt-Karussell auf der Startseite: Der „Sale“-Badge (Angebote-Anhänger) wird rot mit Schatten dargestellt, und der Rabatt-Prozentsatz wird größer angezeigt.

Zusammenfassung

Dein Child Theme ist weit mehr als nur ein optischer Anstrich. Es bringt ein eigenes Bewertungssystem mit Kaufpflicht, eine vollständige „Gebraucht“-Kennzeichnung über den gesamten Bestellprozess hinweg, eine saubere Preis-Einheit-Darstellung, hierarchische Produkt-Tags, HTML-fähige Kategoriebeschreibungen und einen komplett eigenen Customizer-Bereich für Farben und Hintergründe mit sich. Besonders die mobilen Bereiche (Warenkorb, Kasse, Dankeseite) wurden von Grund auf neu strukturiert, damit Kunden auf dem Handy genauso komfortabel einkaufen können wie am Desktop.