Zu Content springen
Deutsch
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

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.

image-20250730-115625.pngimage-20250730-130038.png

Plugin aktivieren

Nach erfolgreicher Installation aktivieren Sie das Plugin über die Plugin-Übersicht.

image-20250730-130942.png

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.

image-20250730-133519.pngimage-20250730-133636.png

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.

image-20250730-123543.pngimage-20250730-123627.png

Widget hinzufügen

Klicken Sie auf das „+“, um ein neues Widget hinzuzufügen.
Suchen Sie nach dem Block „Einbettung“.

image-20250730-123641.pngimage-20250730-125821.png

Embed-Code einfügen

Wählen Sie den Block „Einbettung“ aus und fügen Sie dort Ihren Embed-Code aus dem SiteCockpit-Dashboard ein.

image-20250730-125757.pngimage-20250730-125933.png

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.

image-20250515-112019.pngimage-20250515-112152.png

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.

Theme hochladen

Packen Sie den Ordner als .zip-Datei.
Laden Sie das Theme über „Design → Theme hinzufügen“ hoch.

image-20250515-112726.pngimage-20250515-112919.pngimage-20250515-113015.png

Theme aktivieren

Nach der Installation aktivieren Sie Ihr Child-Theme.
Überprüfen Sie in der Theme-Übersicht, ob es korrekt aktiv ist.

image-20250515-110706.pngimage-20250515-113116.png

Die Integration ist nun abgeschlossen.