Videos in WooCommerce Einbinden – Einfach und Ohne Plugin
Wenn es darum geht, Videos in WooCommerce einzubinden, greifen viele Nutzer sofort zu einem Plugin. Plugins sind zwar eine bequeme Lösung, bringen jedoch oft unnötige Last auf die Website und schränken die Flexibilität ein. Glücklicherweise gibt es eine einfache Möglichkeit, Videos ohne zusätzliches Plugin in deine WooCommerce-Produkte zu integrieren. Dies kann mit Advanced Custom Fields (ACF) und einer kleinen Anpassung deiner functions.php
-Datei erreicht werden.
Warum Plugins vermeiden?
Plugins können die Website verlangsamen, Sicherheitsrisiken bergen und sind oft auf spezifische Funktionen begrenzt. Indem du eigene Lösungen einsetzt, behältst du die volle Kontrolle über deine Website und stellst sicher, dass nur der Code läuft, den du wirklich brauchst.
Schritt-für-Schritt Anleitung: Videos mit ACF und functions.php
einbinden
1. Advanced Custom Fields installieren und einrichten
ACF ist ein vielseitiges Tool, mit dem du benutzerdefinierte Felder in WordPress hinzufügen kannst. Für unser Vorhaben benötigst du ACF, um ein Video-Feld in dein Produkt einzufügen.
Installiere und aktiviere das ACF-Plugin, falls es noch nicht installiert ist.

1.Nun findest du auf der Seite einen Reiter der ACF heisst. Klicke drauf

2.Gehe zu Feldgruppen und klicke Neues Feld hinzufügen.

3. Erstelle eine neue Feldgruppe und nenne sie z.B. „Produktvideo“.

4.Füge ein neues Feld hinzu:
- Feld Typ: Wähle „Textbereich“ aus um später Videos einzubetten.
- Feld Beschriftung: Product Video Url (Jetzt sollte im Feld Name folgendes von selbst erscheinen:
product_video_url
) - Ist das Feld Name nicht automatisch ausgefüllt trage folgendes ein: Setze den Feldnamen auf
product_video_url
- So sollte es am schluss aussehen:

5.Scrolle nun weiter runter und du kommst zu den einstellungen.
- Unter „Regeln für Position“ wählst du als Regel „Inhaltstyp“ ist gleich „Produkt“ aus.
- Speichere die Feldgruppe. Oben rechts findest du einen Button zum Speichern: Änderungen speichern.
- So sollte es aussehen.

So das gröbste ist nun erledigt jetzt müssen wir nur noch den Code zuweisen.
Wichtig, wenn du kein Child Theme hast musst du ein Plugin runterladen, ansonsten wird beim nächsten Update dein Code gelöscht.
2. Funktion in der functions.php
hinzufügen (Nur wen du ein Child Theme hast)
Um das Video im Produkt-Template anzuzeigen, musst du eine Funktion in deiner functions.php
-Datei hinterlegen. Gehe wie folgt vor:

1.Klicke bei WordPress auf der linken Seite auf Design und dann auf Theme-Datei-Editor

2. Öffne die functions.php
-Datei deines Child-Themes.
3. Scrolle ganz nach unten.
Füge den folgenden Code ein:
function display_product_video() {
if (is_product()) {
$video_iframe = get_field(‚product_video_url‘);
if ($video_iframe) {
return ‚<div class=“product-video“>‘ . $video_iframe . ‚</div>‘;
}
}
return “;
}
add_shortcode(‚product_video‘, ‚display_product_video‘);
Wichtig: Achte darauf, dass du zu underst nach “?>“ auf der functions.php Datei keine abstände ausversehen einfügst dies kann deine Webseite zum Absturz bringen.
Jetzt sollte folgendes passiert sein. Gehe auf ein Produkt bei WooCommerce und scrolle nach unten, jetzt findest du einen Feld welches Produktvideo heisst.
3. Nutzung eines Snippet-Tools als Alternative
Falls du keinen direkten Zugriff auf die functions.php
-Datei hast oder Änderungen an dieser Datei vermeiden möchtest, kannst du das gleiche Ergebnis auch mit einem Snippet-Tool wie „Code Snippets“ erreichen:
- Installiere und aktiviere das Plugin „Code Snippets“.
- Gehe zu Snippets > Add New.
- Erstelle ein neues Snippet und kopiere den oben genannten Code in das Feld.
- Gib dem Snippet einen Namen (z.B. „Produktvideo anzeigen“) und aktiviere es.
Der Vorteil dieser Methode ist, dass du den Code zentral verwalten und bei Bedarf schnell deaktivieren kannst, ohne die functions.php
zu bearbeiten.
Fazit
Mit ACF und einer einfachen Anpassung deiner functions.php
-Datei kannst du Videos problemlos in WooCommerce-Produkte einbinden – ganz ohne Plugin. Dies spart Ressourcen und gibt dir gleichzeitig die Freiheit, das Design und die Funktionalität deiner Website vollständig zu kontrollieren. Wenn du es noch einfacher möchtest, kannst du den Code auch über ein Snippet-Tool integrieren. Auf diese Weise behältst du maximale Flexibilität und verhinderst unnötige Belastungen auf deiner Website.
Falls du noch mehr über WooCommerce wissen möchtest, kannst du unseren Beitrag: Shopify vs WooCommerce lesen.
Du willst das nicht selber machen und es Profis überlassen? Kontaktiere uns