So zeigen Sie WooCommerce-Produktdetails mithilfe von Shortcodes in einem Divi-Blurb-Modul an
Wenn Sie WooCommerce und Divi für Ihre WordPress-Site verwenden, möchten Sie möglicherweise bestimmte Produktdetails dynamisch in Divi-Modulen anzeigen. Dieses Tutorial führt Sie durch die Erstellung eines Shortcodes zur Anzeige von WooCommerce-Produktdetails wie Preis, Bild, SKU, Beschreibung und mehr in einem Divi-Blurb-Modul.
Warum Shortcodes für WooCommerce-Produktdetails verwenden?
Shortcodes bieten eine flexible Möglichkeit, dynamische Inhalte in Ihre WordPress-Site einzubetten. Durch die Verwendung von Shortcodes können Sie ganz einfach aktuelle Produktinformationen anzeigen, ohne den Inhalt bei jeder Änderung eines Produktdetails manuell aktualisieren zu müssen.
Schritt-für-Schritt-Anleitung zum Erstellen eines WooCommerce-Shortcodes für Produktdetails
1. Fügen Sie Ihrem Theme eine Shortcode-Funktion hinzu
Zuerst müssen Sie Ihrem Theme eine benutzerdefinierte Funktion hinzufügen. funktionen.php Datei oder erstellen Sie ein benutzerdefiniertes Plugin. Diese Funktion generiert den Shortcode, der die Produktdetails abruft und anzeigt.
php
// Shortcode für Produktdetails
Funktion custom_product_details_shortcode($atts) {
// Attribute aus dem Shortcode abrufen
$atts = Kurzcode_atts(
Array(
'id' => ”, // Produkt-ID muss angegeben werden
„Detail“ => „Preis“ // Das Standarddetail ist „Preis“
),
$atts,
'Produktdetail'
);
wenn (!$atts['id']) {
zurückkehren ";
}
// Zum Produkt
$product = wc_get_product($atts['id']);
wenn (!$produkt) {
zurückkehren ";
}
// Rufen Sie die gewünschten Produktdetails ab
Schalter($atts['detail']) {
Fall 'Preis':
$output = $Produkt->get_price_html();
brechen;
Fall 'Bild':
$output = wp_get_attachment_image($product->get_image_id(), 'vollständig');
brechen;
Fall 'SKU':
$output = $product->get_sku();
brechen;
Fall 'Beschreibung':
$output = $Produkt->get_description();
brechen;
Fall 'Kurzbeschreibung':
$output = $Produkt->Kurzbeschreibung_abrufen();
brechen;
// Fügen Sie bei Bedarf weitere Fälle für andere Produktdetails hinzu
Standard:
$output = ”;
brechen;
}
gibt $output zurück;
}
add_shortcode('Produktdetail', 'Kurzcode für benutzerdefinierte Produktdetails');
Dieser Code definiert einen Shortcode [Produktdetail] das zwei Attribute erfordert: Ausweis (die Produkt-ID) und Detail (das spezifische Detail, das Sie anzeigen möchten).
2. Verwenden Sie den Shortcode in einem Divi-Blurb-Modul
Jetzt, da Ihr Shortcode fertig ist, können Sie ihn in einem Divi Blurb-Modul verwenden.
- Öffnen Sie die Divi-Ersteller und fügen Sie ein neues Blurb-Modul hinzu.
- Fügen Sie im Inhaltsbereich des Blurb-Moduls Ihren Shortcode ein. Beispiel:
- So zeigen Sie den Produktpreis an:
[product_detail id="123" detail="Preis"] - So zeigen Sie das Produktbild an:
[product_detail id="123" detail="bild"] - So zeigen Sie die Produkt-SKU an:
[Produktdetail-ID = "123" Detail = "SKU"] - So zeigen Sie die Produktbeschreibung an:
[product_detail id="123" detail="Beschreibung"] - So zeigen Sie die Kurzbeschreibung des Produkts an:
[Produktdetail-ID = "123" Detail = "Kurzbeschreibung"]
- So zeigen Sie den Produktpreis an:
Ersetzen 123 durch die tatsächliche Produkt-ID.
3. Speichern und Vorschau Ihrer Änderungen
Nachdem Sie den Shortcode zu Ihrem Blurb-Modul hinzugefügt haben, speichern Sie Ihre Änderungen und sehen Sie sich eine Vorschau Ihrer Seite an. Die spezifischen Produktdetails sollten jetzt dynamisch im Blurb-Modul angezeigt werden.
Vorteile der Verwendung dieser Methode
- Dynamischer Inhalt: Aktualisiert Produktdetails automatisch ohne manuelles Eingreifen.
- Flexibilität: Bei Bedarf leicht erweiterbar, um weitere Produktdetails aufzunehmen.
- Konsistenz: Stellt sicher, dass die Produktinformationen auf Ihrer gesamten Site konsistent sind.
Abschluss
Die Verwendung von Shortcodes zur Anzeige von WooCommerce-Produktdetails in Divi-Modulen verbessert die Dynamik Ihrer WordPress-Site. Es bietet eine nahtlose Möglichkeit, Produktinformationen auf dem neuesten Stand zu halten, was Ihnen auf lange Sicht Zeit und Mühe spart. Wenn Sie dieser Anleitung folgen, können Sie Ihren Benutzern ein flexibles und dynamisches E-Commerce-Erlebnis bieten.
Deutsch 
English