WooCommerce

SiteCockpit-Plugin
SiteCockpit über WooCommerce-Widgets integrieren
Integration via Child-Theme

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.

Sollte Ihre WooCommerce-Instanz eine zu niedrige PHP-Version haben, um das Plugin installieren zu können, so können Sie ein beliebiges Plugin verwenden, welches die Integration von JavaScript ermöglicht. Bitte prüfen Sie dieses jedoch vor der Nutzung.

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.

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.css
functions.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.