WooCommerce Snippets und Shortcodes
Willkommen zu meiner umfassenden Anleitung zur Optimierung der Produktpräsentation in deinem WooCommerce Shop! Als Webdesigner, der sich vorwiegend mit WordPress und WooCommerce beschäftigt, kennst du sicherlich die Bedeutung einer ansprechenden und funktionalen Produktdarstellung. Diese Anleitung führt dich durch die effektive Nutzung von WooCommerce Snippets und Shortcodes, um das Potenzial deiner Produktseiten voll auszuschöpfen.
Warum ist eine optimierte Produktpräsentation wichtig?
In der digitalen Ära ist der erste Eindruck entscheidend. Deine Produktseiten sind die Schaufenster deines Online-Shops, und es ist entscheidend, dass sie nicht nur ästhetisch ansprechend, sondern auch benutzerfreundlich und informativ sind. Eine optimierte Produktpräsentation trägt nicht nur zur Steigerung der Benutzerfreundlichkeit bei, sondern kann auch die Conversion-Raten erhöhen und die Sichtbarkeit deiner Produkte in Suchmaschinen verbessern.
Mein Leitfaden im Überblick
- Produktinformationen im Fokus:
Entdecke, wie du mit Shortcodes wie[product_title],[product_price]und[product_description]den Fokus auf entscheidende Produktdetails legen kannst. Diese Shortcodes bieten nicht nur eine klare Übersicht über Produktmerkmale, sondern steigern auch das Vertrauen deiner Kunden. - Interaktive Elemente für höhere Konversion:
Lerne, wie du mit Shortcodes wie[add_to_cart_button],[quantity_and_add_to_cart]und[wishlist_button]die Interaktion deiner Kunden verbessern kannst. Ein reibungsloser Bestellprozess und die Möglichkeit, Produkte zur Wunschliste hinzuzufügen, können die Konversionsraten erheblich steigern. - Produktattribute und -kategorien gekonnt präsentieren:
Verwende Shortcodes wie[product_tags],[product_categories],[product_sku]und[product_id], um wichtige Informationen wie Tags, Kategorien, SKU und Produkt-IDs zu betonen. Dies ermöglicht nicht nur eine klare Struktur, sondern auch eine verbesserte Auffindbarkeit in Suchergebnissen. - Bewertungen und Vergleiche integrieren:
Entdecke, wie du mit[product_reviews],[compare_button]und[share_button]das Kundenvertrauen stärkst und die Sichtbarkeit deiner Produkte durch Kundenbewertungen und die Integration von Vergleichs- und Teilen-Funktionen steigerst. - Zusätzliche Elemente für ein umfassendes Einkaufserlebnis:
Ergänze deine Produktseiten mit Shortcodes wie[product_attributes],[product_data],[product_variations]und[upsell_products]. Diese bieten tiefergehende Einblicke in Produkteigenschaften, Datenblätter, Variationen und Upsell-Empfehlungen.
Diese Anleitung bietet nicht nur einen Überblick über die vielfältigen Shortcodes, sondern auch eine detaillierte Anleitung zur Integration in deine WooCommerce-Produktseiten. Nutze diese Tipps, um nicht nur die Benutzererfahrung zu verbessern, sondern auch die Sichtbarkeit deiner Produkte in den Weiten des Internets zu maximieren.
Bereit, deine WooCommerce-Produktseiten auf das nächste Level zu heben? Lass uns gemeinsam durchstarten und deine Produkte im besten Licht präsentieren!
1. Produktinformationen anzeigen
[product_title]
Erklärung:
Dieser Shortcode zeigt den Produkttitel als HTML-Überschrift zweiten Grades (<h2>) an. Der entsprechende PHP-Code verwendet die Funktion get_the_title(), um den Titel des aktuellen Produkts abzurufen.
function product_title_shortcode() {
return '<h2>' . get_the_title() . '</h2>';
}
add_shortcode('product_title', 'product_title_shortcode');[product_price]
Erklärung:
Dieser Shortcode zeigt den Produktpreis als HTML-Paragraph (<p>) an. Der PHP-Code verwendet die Funktionen global $product und $product->get_price_html(), um den Preis des aktuellen Produkts abzurufen.
function product_price_shortcode() {
global $product;
return '<p>Price: ' . $product->get_price_html() . '</p>';
}
add_shortcode('product_price', 'product_price_shortcode');[product_description]
Erklärung:
Dieser Shortcode zeigt die Produktbeschreibung in einem individuell gestalteten HTML-Container an. Der PHP-Code verwendet $product->get_description() und wpautop(), um die Produktbeschreibung abzurufen und sie dann mit Absätzen zu formatieren.
function product_description_shortcode() {
global $product;
return '<div class="product-description">' . wpautop($product->get_description()) . '</div>';
}
add_shortcode('product_description', 'product_description_shortcode');[product_gallery]
Erklärung:
Dieser Shortcode zeigt die Produktgalerie an, indem er das Template für das Produktbild aufruft. Der PHP-Code verwendet wc_get_template_part().
function product_gallery_shortcode() {
global $product;
ob_start();
wc_get_template_part('single-product/product-image');
return ob_get_clean();
}
add_shortcode('product_gallery', 'product_gallery_shortcode');[product_additional_info]
Erklärung:
Dieser Shortcode zeigt zusätzliche Produktinformationen wie die SKU in einem individuell gestalteten HTML-Container an. Der PHP-Code verwendet wc_get_template_part().
function product_additional_info_shortcode() {
global $product;
ob_start();
wc_get_template_part('single-product/product-attributes');
return ob_get_clean();
}
add_shortcode('product_additional_info', 'product_additional_info_shortcode');2. Interaktive Elemente hinzufügen
[add_to_cart_button]
Erklärung:
Dieser Shortcode zeigt den „In den Warenkorb“-Button an und ermöglicht dem Kunden das einfache Hinzufügen des Produkts zum Warenkorb. Der PHP-Code verwendet verschiedene Funktionen wie $product->add_to_cart_url() und esc_html().
function add_to_cart_button_shortcode() {
global $product;
return apply_filters('woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button %s product_type_%s">%s</a>',
esc_url($product->add_to_cart_url()),
esc_attr($product->get_id()),
esc_attr($product->get_sku()),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
esc_attr($product->product_type),
esc_html($product->add_to_cart_text())
), $product);
}
add_shortcode('add_to_cart_button', 'add_to_cart_button_shortcode');[quantity_and_add_to_cart]
Erklärung:
Dieser Shortcode zeigt ein Eingabefeld für die Produktmenge und den „In den Warenkorb“-Button an. Der PHP-Code kombiniert woocommerce_quantity_input() mit dem zuvor erstellten [add_to_cart_button]-Shortcode.
function quantity_and_add_to_cart_shortcode() {
global $product;
ob_start();
woocommerce_quantity_input();
echo do_shortcode('[add_to_cart_button]');
return ob_get_clean();
}
add_shortcode('quantity_and_add_to_cart', 'quantity_and_add_to_cart_shortcode');[wishlist_button]
Erklärung:
Dieser Shortcode zeigt einen Button zum Hinzufügen des Produkts zur Wunschliste an. Der PHP-Code verwendet do_shortcode('[yith_wcwl_add_to_wishlist]').
function wishlist_button_shortcode() {
global $product;
ob_start();
echo do_shortcode('[yith_wcwl_add_to_wishlist]');
return ob_get_clean();
}
add_shortcode('wishlist_button', 'wishlist_button_shortcode');3. Produktattribute und -kategorien anzeigen
[product_tags]
Erklärung:
Dieser Shortcode zeigt die Produkt-Tags an. Der PHP-Code verwendet wc_get_product_tag_list().
function product_tags_shortcode() {
global $product;
$tags = wc_get_product_tag_list($product->get_id(), ', ', '<span class="tagged_as">' . _n('Tag:', 'Tags:', count($product->get_tag_ids()), 'woocommerce') . ' ', '</span>');
return '<div class="product-tags">' . $tags . '</div>';
}
add
_shortcode('product_tags', 'product_tags_shortcode');[product_categories]
Erklärung:
Dieser Shortcode zeigt die Produkt-Kategorien an. Der PHP-Code verwendet wc_get_product_category_list().
function product_categories_shortcode() {
global $product;
$categories = wc_get_product_category_list($product->get_id(), ', ', '<span class="posted_in">' . _n('Category:', 'Categories:', count($product->get_category_ids()), 'woocommerce') . ' ', '</span>');
return '<div class="product-categories">' . $categories . '</div>';
}
add_shortcode('product_categories', 'product_categories_shortcode');[product_sku]
Erklärung:
Dieser Shortcode zeigt die Produkt-SKU an. Der PHP-Code verwendet $product->get_sku().
function product_sku_shortcode() {
global $product;
return '<div class="product-sku">' . __('SKU:', 'woocommerce') . ' ' . $product->get_sku() . '</div>';
}
add_shortcode('product_sku', 'product_sku_shortcode');[product_id]
Erklärung:
Dieser Shortcode zeigt die Produktnummer an. Der PHP-Code verwendet $product->get_id().
function product_id_shortcode() {
global $product;
return '<div class="product-id">' . __('Product ID:', 'woocommerce') . ' ' . $product->get_id() . '</div>';
}
add_shortcode('product_id', 'product_id_shortcode');4. Bewertungen und Vergleiche
[product_reviews]
Erklärung:
Dieser Shortcode zeigt die Produktbewertungen an. Der PHP-Code verwendet wc_get_template_html('single-product/review.php').
function product_reviews_shortcode() {
global $product;
return '<div class="product-reviews">' . wc_get_template_html('single-product/review.php') . '</div>';
}
add_shortcode('product_reviews', 'product_reviews_shortcode');[compare_button]
Erklärung:
Dieser Shortcode zeigt einen Button zum Hinzufügen des Produkts zu einer Vergleichsliste an. Der PHP-Code verwendet do_shortcode('[yith_compare_button]').
function compare_button_shortcode() {
global $product;
ob_start();
echo do_shortcode('[yith_compare_button]');
return ob_get_clean();
}
add_shortcode('compare_button', 'compare_button_shortcode');[share_button]
Erklärung:
Dieser Shortcode zeigt einen Button zum Teilen des Produkts auf sozialen Medien und per E-Mail an. Der PHP-Code verwendet do_shortcode('[addtoany]').
function share_button_shortcode() {
ob_start();
echo do_shortcode('[addtoany]');
return ob_get_clean();
}
add_shortcode('share_button', 'share_button_shortcode');5. Weitere Elemente hinzufügen
[product_attributes]
Erklärung:
Dieser Shortcode zeigt die Produktattribute an, wenn solche vorhanden sind. Der PHP-Code überprüft, ob das Produkt Attribute hat, und iteriert dann durch diese Attribute, um sie formatiert anzuzeigen.
function product_attributes_shortcode() {
global $product;
// Überprüfe, ob es Produktattribute gibt
if ($product->has_attributes()) {
ob_start();
// Hole die Produktattribute
$attributes = $product->get_attributes();
// Iteriere durch die Attribute
foreach ($attributes as $attribute) {
// Hole den Attributnamen
$attribute_name = wc_attribute_label($attribute->get_name());
// Hole den Attributwert
$attribute_value = $product->get_attribute($attribute->get_name());
// Zeige das Attribut an
echo '<div class="product-attribute">';
echo '<span class="attribute-name">' . esc_html($attribute_name) . ':</span> ';
echo '<span class="attribute-value">' . wp_kses_post($attribute_value) . '</span>';
echo '</div>';
}
return ob_get_clean();
}
return ''; // Wenn es keine Attribute gibt, gib einen leeren String zurück
}
add_shortcode('product_attributes', 'product_attributes_shortcode');[product_data]
Erklärung:
Dieser Shortcode zeigt die Produktdaten wie Gewicht und Abmessungen an, indem er das entsprechende Template aufruft. Der PHP-Code verwendet wc_get_template_part().
function product_data_shortcode() {
global $product;
ob_start();
wc_get_template_part('single-product/product-data');
return ob_get_clean();
}
add_shortcode('product_data', 'product_data_shortcode');[product_variations]
Erklärung:
Dieser Shortcode zeigt Produktvariationen und das Dropdown-Menü zur Auswahl an, wenn das Produkt Variable ist. Der PHP-Code verwendet woocommerce_variable_add_to_cart().
function product_variations_shortcode() {
global $product;
// Überprüfe, ob es Produktvariationen gibt
if ($product->is_type('variable')) {
ob_start();
woocommerce_variable_add_to_cart();
return ob_get_clean();
}
return ''; // Wenn es keine Variationen gibt, gib einen leeren String zurück
}
add_shortcode('product_variations', 'product_variations_shortcode');[upsell_products]
Erklärung:
Dieser Shortcode zeigt Produkte an, die als Upsells empfohlen werden. Der PHP-Code verwendet woocommerce_upsell_display().
function upsell_products_shortcode() {
global $product;
ob_start();
woocommerce_upsell_display();
return ob_get_clean();
}
add_shortcode('upsell_products', 'upsell_products_shortcode');[product_reviews]
Erklärung:
Dieser Shortcode zeigt die Produktbewertungen an. Der PHP-Code verwendet wc_get_template_html('single-product/review.php').
function product_reviews_shortcode() {
global $product;
return '<div class="product-reviews">' . wc_get_template_html('single-product/review.php') . '</div>';
}
add_shortcode('product_reviews', 'product_reviews_shortcode');Einfache Wege zum Hinzufügen von Snippets und Shortcodes in WordPress
Die Anpassung deiner WordPress-Website wird oft durch die Integration von Snippets und Shortcodes vereinfacht. Diese kleinen Code-Schnipsel ermöglichen es, Funktionen und Inhalte nahtlos in deine Website zu integrieren. In dieser Anleitung werden wir besprechen, wie du mühelos Snippets in WordPress einfügst, um die Funktionalität deiner Website zu erweitern.
Warum Snippets und Shortcodes?
Snippets: Kleine Code-Schnipsel, die spezifische Funktionen hinzufügen. Diese können für individuelle Anpassungen und Funktionen in deinem Theme oder deiner Website verwendet werden.
Shortcodes: Benutzerdefinierte Codes, die in den Inhalt deiner Seiten und Beiträge eingefügt werden können. Sie ermöglichen es, komplexe Funktionen und Inhalte mit nur einem einfachen Codeaufruf einzufügen.
Die verschiedenen Wege:
Theme-Funktionen.php-Datei:
Die functions.php-Datei deines Themes ist der Ort, um PHP-Snippets hinzuzufügen. Dies ist ideal für kleinere Anpassungen oder Funktionen.
Custom Code Plugin:
Installiere ein „Custom Code“ Plugin, um Snippets ohne direkte Änderungen am Theme hinzuzufügen. Ideal, wenn du mehr Kontrolle über deine Codeschnipsel wünschst.
Code Snippets Plugin:
Ein spezielles Plugin, das dir erlaubt, Snippets einfach zu verwalten und zu aktivieren/deaktivieren. Perfekt für eine saubere Organisation.
Child Theme:
Wenn du größere Anpassungen am Theme vornimmst, ist die Verwendung eines Child Themes ratsam. Füge Snippets in die functions.php deines Child Themes ein.
Gutenberg-Editor:
Nutze den Gutenberg-Editor, um Code-Blöcke in deine Seiten und Beiträge einzufügen. Dies ist besonders nützlich für kurzfristige Änderungen oder Tests.
Wichtige Schritte vor dem Hinzufügen von Snippets:
- Backup: Sichere immer deine Website, bevor du Änderungen vornimmst, um mögliche Probleme zu vermeiden.
- Sicherheit: Achte darauf, dass die verwendeten Snippets sicher sind und keine unsicheren Praktiken enthalten.
- Syntaxprüfung: Überprüfe, ob dein Code korrekt ist und keine Syntaxfehler enthält.
Abschluss
Die Verwendung dieser Shortcodes bietet eine umfassende Möglichkeit, die Darstellung deiner WooCommerce-Produktseiten anzupassen. Nutze diese Anleitung, um die Shortcodes effektiv in deine Website zu integrieren und ein ansprechendes Einkaufserlebnis für deine Kunden zu schaffen.
Indem du die vorgestellten Shortcodes geschickt einsetzt, verleihst du deinen Produktseiten eine einzigartige Note. Deine Produkte sind nicht mehr nur einfache Listings, sondern erzählen eine Geschichte, betonen ihre Einzigartigkeit und machen den Einkauf zu einem individuellen Erlebnis für deine Kunden.
Die betonten Produktmerkmale, interaktiven Elemente und übersichtlichen Informationen tragen nicht nur dazu bei, die Sichtbarkeit deiner Produkte in Suchmaschinen zu verbessern, sondern ermöglichen auch eine einfachere Navigation für deine Kunden. Der optimierte Bestellprozess, die klare Darstellung von Produktbewertungen und die Integration von Vergleichs- und Teilen-Funktionen wirken sich positiv auf deine Konversionsraten aus.
Diese Anleitung ist jedoch nur der Anfang. Der E-Commerce ist ein sich ständig wandelndes Umfeld, und es ist wichtig, stets auf dem neuesten Stand zu bleiben. Beobachte das Nutzerverhalten, analysiere die Daten und sei bereit, weitere Anpassungen vorzunehmen, um deine Produkte kontinuierlich zu optimieren.
Letztendlich liegt der Schlüssel zum Erfolg in deinen Händen. Indem du die erlernten Techniken und Strategien in deinem WooCommerce-Shop implementierst, gestaltest du nicht nur eine ansprechende Website, sondern baust auch eine Verbindung zu deinen Kunden auf. Jeder Klick, jede Bewertung und jeder geteilte Beitrag sind Schritte auf dem Weg zu deinem ultimativen Erfolg.
Ich bin hier, um zu unterstützen
Falls du weitere Fragen hast, zusätzliche Anpassungen benötigst oder dich weitergehend informieren möchtest, stehe ich dir gerne zur Verfügung. Dein Erfolg ist mein Erfolg, und ich freue mich darauf, Teil deiner Reise im E-Commerce zu sein.
In diesem Sinne: Möge jede Bestellung, jede Bewertung und jeder geteilte Beitrag deinen Erfolg weiter vorantreiben. Auf eine erfolgreiche Zukunft für dich und deine einzigartigen Produkte!
Ich hoffe, diese ausführlichen Erklärungen sind hilfreich. Bei weiteren Fragen oder Anpassungswünschen stehe ich zur Verfügung!
