WooCommerce Single Product Page Customization with Divi: Mastering Layouts and Category-Specific Related Products

As a WooCommerce migration expert and community analyst, it's common to encounter scenarios where store owners, like Kristin in the recent support forum topic, seek to blend the flexibility of page builders with the robust functionality of WooCommerce. Kristin's query about integrating standard WooCommerce product details and, more specifically, related products filtered by subcategory into a Divi custom single product page template highlights a frequent challenge: achieving precise layout control while retaining dynamic, relevant content.

The Divi & WooCommerce Synergy: Crafting Custom Product Pages

Kristin's goal is to leverage Divi's Theme Builder for a custom single product page template, allowing for unique formatting at the top of the page, while still displaying core WooCommerce elements like the product gallery, title, price, description, and a tailored 'Related Products' section. This approach is highly effective for branding and user experience, moving beyond WooCommerce's default templates.

The core challenge lies in how WooCommerce renders its content. Unlike simple shortcode-driven pages, single product pages are built using a series of hooks and functions. When a theme builder like Divi takes over, it provides modules to replicate or enhance these elements. However, for highly specific requirements, especially dynamic filtering like 'related products by subcategory', custom code often becomes essential.

Integrating Standard WooCommerce Product Elements in Divi

Kristin mentioned wanting the "gallery on left, Product title, price, description on right like normal." Divi's Theme Builder offers powerful tools for this. While the [product_page id="X"] shortcode displays an entire product, it's not ideal for a dynamic template. Instead, Divi provides dedicated WooCommerce modules designed for granular control:

• Woo Product Gallery: For the product images.
• Woo Product Title: To display the product name.
• Woo Product Price: For the pricing information.
• Woo Product Description: For the main product text.
• Woo Product Content: A versatile module that attempts to render the entire default WooCommerce product content block, which can sometimes be a quick way to get the 'normal' layout if you don't need extremely fine-grained control over individual elements' placement.

For Kristin's desire to place the gallery on the left and other details on the right, the most effective method within Divi is to use a two-column layout in the Theme Builder. Place the 'Woo Product Gallery' module in the left column and the 'Woo Product Title', 'Woo Product Price', and 'Woo Product Description' modules (along with any other desired elements like 'Woo Product Tabs' for reviews/additional info) in the right column.

The Custom Challenge: Related Products by Subcategory

The standard WooCommerce related products functionality and its corresponding shortcode ([related_products] or the default output) typically select products based on shared categories and tags, often with a random element. It does not inherently provide an option to specifically filter by 'sub category that the product is in' as Kristin requested. This is where custom code becomes indispensable.

To achieve this, we need to:

1. Identify the current product's subcategories.
2. Query WooCommerce for other products that share those specific subcategories, excluding the current product itself.
3. Display these products in a standard WooCommerce loop format.

Step-by-Step Solution: Implementing Category-Specific Related Products

Step 1: Create a Child Theme (If You Don't Have One)

Before adding any custom code, always ensure you are using a child theme. This protects your customizations from being overwritten during theme updates.

Step 2: Add Custom PHP Code to Your Child Theme's functions.php

The following PHP code creates a new shortcode, [custom_related_by_subcategory], which will fetch and display related products based on the current product's subcategories. Add this code to your child theme's functions.php file:

get_id();
    \$terms      = get_the_terms( \$product_id, 'product_cat' );
    \$subcategory_ids = array();

    if ( \$terms && ! is_wp_error( \$terms ) ) {
        foreach ( \$terms as \$term ) {
            // Check if it's a subcategory (has a parent)
            if ( \$term->parent != 0 ) {
                \$subcategory_ids[] = \$term->term_id;
            }
        }
    }

    // If no subcategories are found for the current product, return early.
    if ( empty( \$subcategory_ids ) ) {
        return '';
    }

    // Arguments for the product query
    \$args = array(
        'posts_per_page' => 4, // Number of related products to show
        'columns'        => 4, // Number of columns for display
        'orderby'        => 'rand', // Random order
        'post_type'      => 'product',
        'post_status'    => 'publish',
        'post__not_in'   => array( \$product_id ), // Exclude the current product
        'tax_query'      => array(
            array(
                'taxonomy' => 'product_cat',
                'field'    => 'term_id',
                'terms'    => \$subcategory_ids,
                'operator' => 'IN', // Find products in any of these subcategories
            ),
        ),
    );

    \$products = new WP_Query( \$args );

    ob_start(); // Start output buffering

    if ( \$products->have_posts() ) : ?>
        

            

            

                have_posts() ) : \$products->the_post(); ?>
                    
                
            
        
    

Step 3: Integrate the Custom Shortcode into Your Divi Single Product Template

Now that you have the custom shortcode, you can add it to your Divi single product page template:

1. Navigate to Divi > Theme Builder in your WordPress dashboard.
2. Edit your Single Product Page template (or create a new one).
3. Add a new module to your desired location (e.g., below the main product content).
4. Choose the Code Module or Text Module.
5. In the module settings, insert the shortcode: [custom_related_by_subcategory].
6. Save your changes in the module and the Theme Builder.

Step 4: Configure Divi Theme Builder Layout

Ensure your Divi Theme Builder layout is structured to accommodate all elements. You might have a top section for specific formatting, followed by a section with two columns for the gallery and product details, and then a full-width section at the bottom for your custom related products shortcode.

Beyond the Basics: Advanced Considerations

• Performance: Custom queries, especially on high-traffic sites, can impact performance. Consider implementing caching solutions (e.g., a caching plugin) to optimize page load times.
• Styling: The output of wc_get_template_part( 'content', 'product' ) inherits your theme's WooCommerce styling. If you need to customize the appearance of these specific related products, you can target the .related.products section and its child elements with custom CSS.
• Fallbacks: The provided code gracefully handles cases where a product has no subcategories, ensuring no empty sections are displayed. You could extend this with a fallback to display general related products if subcategory-specific ones are absent.
• Alternative Plugins: For even more complex related product logic (e.g., based on purchase history, viewed items, or advanced filtering), consider dedicated WooCommerce related products plugins. However, for a specific subcategory filter, the custom shortcode is an efficient and lightweight solution.

Conclusion

Kristin's forum topic perfectly illustrates the power and flexibility available when integrating WooCommerce with theme builders like Divi. While Divi provides excellent modules for standard content, unique requirements such as filtering related products by subcategory often necessitate custom code. By combining Divi's intuitive drag-and-drop interface with targeted PHP shortcodes, store owners and developers can create highly customized, performant, and engaging single product pages that truly stand out and enhance the customer shopping experience.