Snippets & Custom CSS mit WP Pilot AI

Überblick: Wann Snippet, wann Custom CSS?

Beide Bereiche verändern deine Website, aber sie tun das auf unterschiedliche Weise.

• Snippets sind für Funktionen, Logik und Verhalten gedacht. Sie greifen in WordPress über PHP ein, zum Beispiel über add_action(), add_filter() oder add_shortcode().
• Custom CSS ist für Design, Styling und visuelle Anpassungen gedacht. Es verändert das Aussehen von Elementen, ohne die Geschäftslogik der Website umzubauen.

Typische Faustregel:

• Wenn etwas funktionieren, berechnen, filtern, erweitern oder automatisiert ausführen soll, ist es meistens ein Snippet.
• Wenn etwas anders aussehen, anders platziert oder gezielt ein- bzw. ausgeblendet werden soll, ist es meistens Custom CSS.

Beispiele:

• „Füge ein neues Checkout-Feld hinzu“ → Snippet
• „Mach den In-den-Warenkorb-Button größer und roter“ → Custom CSS
• „Erstelle einen Shortcode für eine Benefits-Liste“ → Snippet
• „Blende die SKU auf Produktseiten aus“ → Custom CSS

Snippets: Möglichkeiten und Einsatzbereiche

Mit dem Snippet-Bereich kann WP Pilot AI echten PHP-Code für WordPress erstellen und verwalten. Snippets sind kein Spielzeug und keine Sandbox, sondern ein Power-Feature für gezielte Erweiterungen deiner Website.

Was mit Snippets gemacht werden kann

• eigene Shortcodes erstellen
• WordPress-Hooks wie add_action() und add_filter() nutzen
• WooCommerce-Verhalten erweitern oder anpassen
• Checkout, Produktseiten oder E-Mails funktional erweitern
• eigene Ausgaben im Frontend erzeugen
• Texte, Labels, Felder oder Validierungen verändern
• kleine Automatik-Funktionen für deinen Shop oder deine Website ergänzen
• bestehende Snippets korrigieren oder erweitern

Typische Anwendungsfälle

• Zusätzliche Hinweise auf Produkt- oder Warenkorbseiten
• Shortcode für FAQ, Trust-Elemente, Hinweise oder Preisboxen
• Checkout-Feld für USt-ID, Wunschtext oder Lieferhinweise
• Textänderungen in WooCommerce, z. B. Button-Beschriftungen
• Filterlogik für Inhalte, Preise oder Metadaten
• kleine Hilfsfunktionen für Redakteure oder Administratoren

Wichtige Besonderheit

Ein Snippet wird nicht einfach blind live geschaltet. Der Flow ist bewusst in mehrere Schritte aufgeteilt: Vorschau → Speichern → Aktivieren. So kannst du Code erst prüfen, dann inaktiv speichern und erst danach bewusst aktivieren.

Snippets erstellen, prüfen, speichern, aktivieren und ändern

1. Neues Snippet anfordern

Du kannst WP Pilot AI direkt im Chat beschreiben, welche Funktion du brauchst. Die KI erstellt zunächst eine Vorschau des Codes und erklärt in kurzen Worten, was das Snippet macht.

2. Vorschau prüfen

Vor dem Speichern wird der Code validiert. Das Plugin prüft unter anderem die Struktur und blockiert bestimmte riskante Konstrukte. Dadurch werden viele typische Fehler oder problematische Funktionen schon vorab abgefangen.

3. Snippet speichern

Gespeicherte Snippets landen standardmäßig inaktiv im Snippet-Bereich. Du kannst sie dort später ansehen, exportieren, importieren, löschen oder aktivieren.

4. Snippet aktivieren

Erst beim Aktivieren wirkt das Snippet auf deine Website. Vor der Aktivierung wird der Code erneut geprüft.

5. Bestehende Snippets ändern

Bestehende Snippets können geladen, geprüft und aktualisiert werden. Das ist besonders hilfreich für Bugfixes, kleine Funktions-Erweiterungen oder Optimierungen.

6. Snippets deaktivieren oder löschen

Wenn ein Snippet nicht mehr benötigt wird oder Probleme verursacht, kannst du es deaktivieren oder ganz löschen. Deaktivieren ist sinnvoll, wenn du etwas nur vorübergehend ausschalten möchtest.

7. Snippet-Bibliothek, Export und Import

Je nach Lizenzumfang stehen dir zusätzlich eine mitgeführte Snippet-Bibliothek sowie Import- und Export-Funktionen zur Verfügung. Damit kannst du Snippets schneller übernehmen, zwischen Projekten übertragen oder als eigene Sammlung organisieren.

Mitgeführte Snippet-Bibliothek

Die Bibliothek ist dafür gedacht, wiederverwendbare Snippets schneller verfügbar zu machen. Statt jede Funktion neu erzeugen zu lassen, kannst du auf vorbereitete oder bereits gesammelte Bausteine zurückgreifen und sie bei Bedarf weiter anpassen.

• bestehende Snippets schneller übernehmen statt neu beginnen
• bewährte Funktionsbausteine als Ausgangspunkt verwenden
• interne Standards oder wiederkehrende Shop-Funktionen zentral sammeln
• Bibliotheks-Snippets als Vorlage laden und danach auf den konkreten Fall anpassen

Export

Über den Export kannst du Snippets sichern, in andere Projekte übernehmen oder als eigene Sammlung archivieren. Das ist besonders hilfreich, wenn du wiederkehrende Lösungen projektübergreifend nutzen möchtest.

Import

Über den Import lassen sich vorhandene Snippets wieder einspielen. So kannst du vorbereitete Bibliotheken, eigene Standards oder gesicherte Snippets schnell in ein anderes Projekt übernehmen.

Typische Anwendungsfälle für Bibliothek, Export und Import

• du möchtest ein bewährtes WooCommerce-Snippet in mehreren Shops verwenden
• du baust dir eine eigene interne Sammlung für Trust-Elemente, Shortcodes oder Checkout-Erweiterungen auf
• du willst ein funktionierendes Snippet zuerst aus der Bibliothek übernehmen und dann von der KI anpassen lassen
• du möchtest Snippets vor größeren Änderungen zusätzlich extern sichern

Was du gezielt bearbeiten oder verändern lassen kannst

• Titel und Beschreibung eines Snippets
• bestehende Funktionalität eines Snippets
• Hook-Prioritäten und Ausgabestellen
• Texte, Labels, Shortcodes und Parameter
• WooCommerce-Funktionen wie Hinweise, Felder oder Darstellungen
• Fehlerbehebungen in bestehendem Code
• Umwandlung einer Idee in einen sauber integrierten WordPress-Hook

Was Snippets bewusst nicht sind

Snippets sind nicht dafür gedacht, wahllos ganze Dateien zu ersetzen oder komplexe Plugin-Projekte komplett ohne Prüfung live zu deployen. Für größere strukturelle Änderungen sind andere Bereiche wie File Operations oder ein eigenes Plugin sinnvoller.

Beispiel-Prompts für Snippets

Allgemeine WordPress-Funktionen

• „Erstelle mir ein Snippet, das über jedem Blogbeitrag einen Hinweistext ausgibt.“
• „Baue ein Snippet, das einen Shortcode für eine zweispaltige Vorteils-Liste anlegt.“
• „Erstelle ein Snippet, das im Footer das aktuelle Jahr automatisch ausgibt.“

WooCommerce und Shop

• „Erstelle ein Snippet, das auf Produktseiten unter dem Preis einen individuellen Vertrauenstext anzeigt.“
• „Baue ein Snippet, das im Checkout ein Pflichtfeld für die USt-ID ergänzt.“
• „Erstelle ein Snippet, das den Text des Kaufen-Buttons bei ausverkauften Produkten ändert.“

Änderungen an bestehenden Snippets

• „Öffne das bestehende Snippet für die Checkout-Hinweise und ergänze dort eine zweite Zeile für Lieferzeiten.“
• „Korrigiere das bestehende Snippet, das einen Fatal Error verursacht.“
• „Passe das Snippet für den Produkt-Hinweis so an, dass es nur in Kategorie X angezeigt wird.“

Shortcodes und Content-Ausgaben

• „Erstelle einen Shortcode für eine Liste mit drei Garantie-Vorteilen inklusive Icons.“
• „Baue einen Shortcode für ein Testimonial-Element mit Name, Text und Sternenbewertung.“
• „Erstelle einen Shortcode, mit dem ich einen Rabatt-Hinweis flexibel in Seiten einfügen kann.“

Tipps & Tricks für Snippets

Beschreibe immer Funktion und Ort

Gute Snippet-Prompts nennen nicht nur die gewünschte Funktion, sondern auch den Ort der Ausgabe oder Einbindung. Statt „Mach einen Hinweistext“ besser: „Zeige unter dem Produktpreis auf Produktseiten einen grünen Hinweistext“.

Nenne Bedingungen explizit

Wenn ein Snippet nur unter bestimmten Bedingungen laufen soll, schreibe das direkt in den Prompt. Zum Beispiel: nur für bestimmte Kategorien, nur im Checkout, nur für eingeloggte Nutzer oder nur bei Bestellwert über X Euro.

Bei Änderungen immer das Ziel beschreiben

Wenn du ein bestehendes Snippet anpassen willst, formuliere nicht nur „ändere das“, sondern erkläre genau, was nach der Änderung anders sein soll.

Bei Fehlern deutlich sagen, was kaputt ist

Gute Korrektur-Prompts enthalten klare Hinweise wie „Fatal Error“, „leere Seite“, „Shortcode zeigt nichts an“ oder „Funktion läuft doppelt“. Dadurch kann die KI gezielter korrigieren.

Snippets lieber klein und klar halten

Mehrere kleine, eindeutig benannte Snippets sind oft besser als ein einziges großes Sammel-Snippet. Das erleichtert Wartung, Fehlersuche und spätere Änderungen.

Custom CSS: Möglichkeiten und Einsatzbereiche

Der Bereich Custom CSS ist für alle visuellen Anpassungen gedacht, die du ohne Theme-Dateien oder Page-Builder-Code vornehmen möchtest. WP Pilot AI kann dafür CSS-Regeln erzeugen, als Code-Vorschlag bzw. Regel-Vorschau vorbereiten, speichern, aktivieren, deaktivieren und später wieder ändern.

Was mit Custom CSS gemacht werden kann

• Buttons, Headlines, Container und Karten neu gestalten
• Farben, Abstände, Rahmen, Schatten und Größen ändern
• einzelne Elemente gezielt ausblenden
• Header, Footer oder Produktbereiche visuell anpassen
• Hover-Effekte und Zustände verbessern
• störende visuelle Details entfernen oder abschwächen
• gezielte Layout-Korrekturen für einzelne Bereiche umsetzen

Typische Anwendungsfälle

• Call-to-Action-Buttons stärker hervorheben
• SKU, Meta-Infos oder Nebenelemente ausblenden
• Produktboxen oder Preisbereiche moderner gestalten
• Header oder Navigationsbereich farblich anpassen
• Abstände zwischen Formularfeldern oder Content-Blöcken verbessern

Sicherheitsgrenzen im CSS-Bereich

Das Plugin blockiert bestimmte problematische CSS-Inhalte, darunter zum Beispiel @import, expression(), Script-Inhalte und externe url()-Muster. Dadurch bleibt der Bereich auf echte Styling-Aufgaben fokussiert.

CSS-Regeln erstellen, ändern, aktivieren und deaktivieren

1. Neue CSS-Regel anfordern

Du kannst im Chat eine gewünschte visuelle Änderung beschreiben. WP Pilot AI erzeugt dafür zunächst einen CSS-Code-Vorschlag bzw. eine Regel-Vorschau.

2. Vorschau prüfen

In dieser Vorschau prüfst du vor allem den erzeugten CSS-Code und die beabsichtigte Richtung der Änderung. Eine echte visuelle Live-Vorschau der Seite wird dabei nicht automatisch erzeugt. So lässt sich vermeiden, dass zu früh eine falsche Regel gespeichert wird.

Praktisch bedeutet das: Du siehst vor allem, welche CSS-Regel erstellt werden soll. Danach entscheidest du, ob du sie speichern und aktivieren möchtest. Für die tatsächliche Wirkung auf der Website ist das Aktivieren der Regel entscheidend.

3. Regel speichern

Gespeicherte CSS-Regeln erhalten einen Namen, optional eine Beschreibung und eine eindeutige Regel-ID. Sie werden im Custom-CSS-Bereich übersichtlich gelistet.

4. Aktivieren und deaktivieren

Regeln können einzeln aktiviert oder deaktiviert werden. Das ist ideal, wenn du Varianten testen, saisonale Aktionen schalten oder problematische Regeln vorübergehend aussetzen möchtest.

5. Vorhandene Regeln aktualisieren

Bestehende Regeln können erweitert oder angepasst werden, ohne komplett neu anzufangen. So kannst du z. B. nur Farben ändern, die Abstände erhöhen oder Hover-Effekte ergänzen.

6. Regeln löschen

Nicht mehr benötigte Regeln lassen sich löschen. Wenn du dir unsicher bist, ist deaktivieren oft der bessere erste Schritt.

Was konkret verändert werden kann

• Farben von Buttons, Links, Texten und Hintergründen
• Abstände wie Margin und Padding
• Größen von Buttons, Icons, Bildern und Überschriften
• Ecken, Rahmen, Schatten und Hover-Zustände
• Anzeige einzelner Elemente, z. B. über display
• Responsive Feinjustierungen für sichtbare Layout-Probleme

Arbeiten mit Selektoren und Element-Auswahl

Einer der stärksten Teile im CSS-Bereich ist die gezielte Arbeit mit Selektoren. WP Pilot AI kann nicht nur globales CSS erzeugen, sondern auch auf Basis eines ausgewählten Elements arbeiten.

Was das in der Praxis bedeutet

• Du wählst im Frontend oder im Auswahlmodus ein Element aus.
• Der Selektor wird in den Arbeitskontext übernommen.
• Danach kannst du kurze Folgeanweisungen geben, ohne das Ziel jedes Mal neu zu erklären.

Beispiele für gute Folgeanweisungen

• „Mach das moderner.“
• „Gib dem Element mehr Innenabstand.“
• „Mach den Button auffälliger.“
• „Bitte mit stärkerem Hover-Effekt.“

Warum das hilfreich ist

Dadurch musst du nicht jedes Mal selbst nach einer CSS-Klasse suchen oder den technischen Selektor eintippen. Das ist besonders nützlich bei Buttons, Formularen, Produktboxen oder einzelnen Inhaltsblöcken.

Wichtiger Hinweis

Das Custom-CSS-Modul ist für globales oder selektorbezogenes Styling gedacht. Funnel-spezifisches Styling in einer Sales-Page oder Landingpage wird separat im Funnel-Bereich verwaltet.

CSS Picker: Elemente gezielt auswählen und bearbeiten

Der CSS Picker ist der schnellste Weg, um nicht allgemein „irgendetwas am Design“ zu ändern, sondern ein ganz bestimmtes Element oder einen bestimmten Bereich direkt anzusprechen. Statt einen Selektor selbst herauszusuchen, wählst du das Ziel visuell aus und arbeitest anschließend kontextbezogen weiter.

Was der CSS Picker macht

• du startest den Auswahlmodus
• du klickst das gewünschte Element oder den gewünschten Bereich an
• der passende Selektor wird in den Arbeitskontext übernommen
• du kannst danach direkt Styling-Anweisungen für genau dieses Element geben

Wann der CSS Picker besonders sinnvoll ist

• bei Buttons, Formularfeldern, Preisboxen, Produktkarten oder Navigations-Elementen
• wenn du die technische Klasse oder ID nicht kennst
• wenn ein Bereich schnell visuell angepasst werden soll
• wenn du Folgeanweisungen für genau denselben Bereich geben möchtest

Typischer Ablauf

1. Öffne den Custom-CSS-Bereich und aktiviere den Picker bzw. Auswahlmodus.
2. Klicke im Frontend auf das Element, das du bearbeiten möchtest.
3. Übernimm die Auswahl in den CSS-Arbeitskontext.
4. Formuliere anschließend deine Styling-Anweisung gezielt für dieses Element.
5. Prüfe den erzeugten CSS-Code und speichere die Regel erst, wenn die Richtung stimmt.

Gute Prompts nach der Auswahl mit dem CSS Picker

• „Mach diesen Button größer, runder und kontrastreicher.“
• „Gib diesem Kasten mehr Innenabstand und einen dezenten Schatten.“
• „Bitte moderner, weniger hart, mit mehr Weißraum.“
• „Blende dieses Element auf Mobilgeräten aus, aber nicht auf Desktop.“
• „Mach diesen Preisbereich auffälliger, aber seriös.“

Was nach der Auswahl bearbeitet werden kann

• Farben, Hintergründe und Texte
• Abstände, Größen und Ausrichtung
• Rahmen, Schatten, Hover-Effekte und Übergänge
• Sichtbarkeit einzelner Elemente
• responsive Anpassungen für ausgewählte Bereiche

Tipps für den CSS Picker

• Wähle möglichst das Element, das wirklich geändert werden soll, nicht nur den großen Eltern-Container.
• Arbeite nach der Auswahl mit kurzen Folgeanweisungen statt mit kompletten Neuformulierungen.
• Wenn mehrere ähnliche Elemente existieren, beschreibe im Prompt zusätzlich den Kontext, z. B. „im Produktbereich“ oder „im Header“.
• Nutze den Picker besonders dann, wenn du keine CSS-Klassen selbst suchen möchtest.

Beispiel-Prompts für Custom CSS

Buttons und Call-to-Action

• „Mach den In-den-Warenkorb-Button größer, runder und deutlich auffälliger.“
• „Gib den CTA-Buttons eine kräftige Hintergrundfarbe und weißen Text.“
• „Erzeuge einen modernen Hover-Effekt für alle Hauptbuttons.“

Produktseiten und Shop-Elemente

• „Blende die SKU auf Produktseiten aus.“
• „Mach die Preisbox auf Produktseiten größer und prominenter.“
• „Reduziere den Abstand zwischen Preis und Warenkorb-Button.“

Header, Navigation und allgemeines Design

• „Ändere den Header-Hintergrund in ein dunkles Blau mit leichtem Schatten.“
• „Mach die Navigation eleganter und gib den Menüpunkten mehr Abstand.“
• „Sorge dafür, dass Überschriften im Content-Bereich mehr Luft nach oben und unten bekommen.“

Arbeit mit aktiv ausgewähltem Element

• „Mach das hier moderner und hochwertiger.“
• „Bitte dezenter, weniger Schatten, mehr Weißraum.“
• „Gib dem ausgewählten Bereich einen Premium-Look mit feiner Linie und Hover-Effekt.“

Tipps & Tricks für Custom CSS

Nicht nur „mach schöner“, sondern Richtung nennen

Gute CSS-Prompts beschreiben Stil und Ziel. Zum Beispiel: modern, minimalistisch, luxuriös, freundlich, technisch, weich oder kontraststark.

Nutze konkrete Gestaltungsziele

Statt allgemein „ändere das Design“ besser: „Mehr Weißraum, weniger Schatten, stärkere CTA-Farbe und größere Buttons“.

Arbeite iterativ

Bei CSS sind zwei oder drei kleine Schritte oft besser als eine riesige Komplettanweisung. So lässt sich das Ergebnis präziser steuern.

Deaktivieren statt sofort löschen

Wenn du unsicher bist, ob eine Regel später noch gebraucht wird, schalte sie lieber zunächst aus. So kannst du schneller vergleichen und zurückwechseln.

Namensgebung sauber halten

Vergib klare Namen wie „Produktbutton rot“, „Header dunkel“, „Checkout-Abstände“ oder „Mobile Preisbox“. Das macht die Verwaltung später deutlich einfacher.

Häufige Fragen

Kann ich Snippets direkt live aktivieren lassen?

Das Plugin arbeitet bewusst mit Vorschau, Speichern und Aktivieren. So kannst du neuen PHP-Code erst prüfen, bevor er tatsächlich ausgeführt wird.

Kann ich bestehende Snippets später überarbeiten lassen?

Ja. Bestehende Snippets können geladen, analysiert, korrigiert und aktualisiert werden.

Kann ich mit Custom CSS einzelne Elemente gezielt stylen?

Ja. Genau dafür gibt es den Selektor- und Auswahl-Flow sowie den CSS Picker, mit dem du einzelne Bereiche oder Elemente visuell auswählst und anschließend gezielt bearbeiten lässt.

Gibt es im CSS-Bereich eine echte Live-Vorschau der Seite?

Nicht im Sinne einer automatischen visuellen Seitenvorschau. Im CSS-Bereich wird vor allem der erzeugte CSS-Code bzw. die geplante Regel vorbereitet. Du prüfst also in erster Linie den Code-Vorschlag und aktivierst die Regel danach bewusst.

Was ist besser für Design-Anpassungen: Snippet oder CSS?

Für visuelle Änderungen fast immer Custom CSS. Snippets brauchst du vor allem dann, wenn zusätzlich Funktionalität, Logik oder WordPress-/WooCommerce-Verhalten geändert werden soll.

Kann ich Snippets und CSS kombinieren?

Ja. Das ist sogar sehr sinnvoll. Ein Snippet kann eine neue Ausgabe, einen Shortcode oder eine Funktion bereitstellen, und Custom CSS sorgt anschließend für das passende Design.