WooCommerce
Diese Anleitung zeigt, wie Sie SiteCockpit mit WooCommerce integrieren können. Sie haben mehrere Möglichkeiten zur Integration – per Plugin, per Widget oder direkt über ein Child-Theme. Ziel ist es, den Embed-Code von SiteCockpit korrekt in Ihre Seite einzubinden.
SiteCockpit-Plugin
SiteCockpit-Plugin installieren
Suchen Sie im WordPress-Plugin-Verzeichnis nach „SiteCockpit“.
Laden Sie das Plugin herunter und installieren Sie es anschließend über die Plugin-Verwaltung.
Plugin aktivieren
Nach erfolgreicher Installation aktivieren Sie das Plugin über die Plugin-Übersicht.
Integration Key einfügen
Gehen Sie in den WordPress-Einstellungen zum Bereich „SiteCockpit Key“.
Fügen Sie dort Ihren persönlichen Integration Key ein, den Sie im SiteCockpit-Dashboard finden.
Die Integration ist damit abgeschlossen.
SiteCockpit über WooCommerce-Widgets integrieren
Voraussetzung
Die Widget-Integration setzt ein Storefront-kompatibles Theme voraus.
Widget-Position wählen
Navigieren Sie in WordPress zu Design → Widgets.
Wählen Sie eine Position für Ihr Widget, z. B. den Footer.
Widget hinzufügen
Klicken Sie auf das „+“, um ein neues Widget hinzuzufügen.
Suchen Sie nach dem Block „Einbettung“.
Embed-Code einfügen
Wählen Sie den Block „Einbettung“ aus und fügen Sie dort Ihren Embed-Code aus dem SiteCockpit-Dashboard ein.
Das Widget ist jetzt integriert.
Integration via Child-Theme
Wenn Sie ohne Plugin arbeiten möchten, können Sie das SiteCockpit-Script auch direkt über ein Child-Theme einbinden.
Child-Theme vorbereiten
Öffnen Sie in WordPress den Bereich Design → Themes.
Stellen Sie sicher, dass Ihr gewünschtes Haupt-Theme aktiv ist.
Erstellen Sie lokal einen neuen Ordner mit den Dateien:
style.cssfunctions.php
style.css
Sie können folgenden Code in Ihre style.css einfügen:
/*
Theme Name: Spike Business Child
Template: spike-business
Version: 1.0
Description: Child Theme for Spike Business
Author: Your Name
*/
Ihr Theme und Template entsprechen nicht unbedingt dem gezeigten Beispiel! Achten Sie auf eine korrekte Beschriftung!
functions.php
Ergänzen Sie die Datei functions.php mit:
<?php
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
});
add_action('wp_footer', function() {
echo '<script type="module" src="https://cdn.sitecockpit.com/cdn/app.js" data-easy-vision-key="cxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx9"></script>';
});
Ersetzen Sie den Key durch Ihren eigenen aus dem SiteCockpit-Dashboard.
Theme hochladen
Packen Sie den Ordner als .zip-Datei.
Laden Sie das Theme über „Design → Theme hinzufügen“ hoch.
Theme aktivieren
Nach der Installation aktivieren Sie Ihr Child-Theme.
Überprüfen Sie in der Theme-Übersicht, ob es korrekt aktiv ist.
Die Integration ist nun abgeschlossen.