How to Display WooCommerce Product Details in a Divi Blurb Module Using Shortcodes
If you’re using WooCommerce and Divi for your WordPress site, you might want to display specific product details dynamically in Divi modules. This tutorial will guide you through creating a shortcode to display WooCommerce product details, such as price, image, SKU, description, and more, within a Divi Blurb module.
Why Use Shortcodes for WooCommerce Product Details?
Shortcodes offer a flexible way to embed dynamic content in your WordPress site. By using shortcodes, you can easily display up-to-date product information without manually updating content every time a product detail changes.
Step-by-Step Guide to Creating a WooCommerce Product Details Shortcode
1. Add Shortcode Function to Your Theme
First, you need to add a custom function to your theme’s functions.php file or create a custom plugin. This function will generate the shortcode that retrieves and displays the product details.
php
// Shortcode for product details
function custom_product_details_shortcode($atts) {
// Get attributes from the shortcode
$atts = shortcode_atts(
array(
‘id’ => ”, // Product ID must be specified
‘detail’ => ‘price’ // Default detail is ‘price’
),
$atts,
‘product_detail’
);
if (!$atts[‘id’]) {
return ”;
}
// Get the product
$product = wc_get_product($atts[‘id’]);
if (!$product) {
return ”;
}
// Retrieve the requested product detail
switch($atts[‘detail’]) {
case ‘price’:
$output = $product->get_price_html();
break;
case ‘image’:
$output = wp_get_attachment_image($product->get_image_id(), ‘full’);
break;
case ‘sku’:
$output = $product->get_sku();
break;
case ‘description’:
$output = $product->get_description();
break;
case ‘short_description’:
$output = $product->get_short_description();
break;
// Add more cases as needed for other product details
default:
$output = ”;
break;
}
return $output;
}
add_shortcode(‘product_detail’, ‘custom_product_details_shortcode’);
This code defines a shortcode [product_detail] that takes two attributes: id (the product ID) and detail (the specific detail you want to display).
2. Use the Shortcode in a Divi Blurb Module
Now that your shortcode is ready, you can use it within a Divi Blurb module.
- Open the Divi Builder and add a new Blurb module.
- In the content area of the Blurb module, insert your shortcode. For example:
- To display the product price:
[product_detail id="123" detail="price"] - To display the product image:
[product_detail id="123" detail="image"] - To display the product SKU:
[product_detail id="123" detail="sku"] - To display the product description:
[product_detail id="123" detail="description"] - To display the product short description:
[product_detail id="123" detail="short_description"]
- To display the product price:
Replace 123 with the actual product ID.
3. Save and Preview Your Changes
After adding the shortcode to your Blurb module, save your changes and preview your page. The specific product detail should now appear dynamically within the Blurb module.
Benefits of Using This Method
- Dynamic Content: Automatically updates product details without manual intervention.
- Flexibility: Easily extendable to include more product details as needed.
- Consistency: Ensures that product information is consistent across your site.
Conclusion
Using shortcodes to display WooCommerce product details in Divi modules enhances the dynamic nature of your WordPress site. It provides a seamless way to keep product information up-to-date, saving you time and effort in the long run. By following this guide, you can create a flexible and dynamic e-commerce experience for your users.
English 
Deutsch