Divi子主题下WooCommerce产品标签内容未自动显示问题修复咨询

Hey there, let's break down what's happening and how to fix this issue.

What's Causing the Problem? #

Your current code adjusts the priority of product tabs, but when the custom Recipes tab doesn't exist for a product, WooCommerce (or more specifically, Divi's frontend scripts) isn't automatically marking the Description tab as active. The code you have only sets priorities, but doesn't handle the edge case where the recipes tab is missing—so even though Description is first in the order, it doesn't get the active state that triggers its content to load by default.

Solution 1: Optimize the PHP Tab Reordering Code #

First, let's update your existing function to check if the Recipes tab exists, adjust priorities accordingly, and explicitly set the first tab as active. This ensures WooCommerce outputs the correct active class on the default tab:

/**
 * Reorder product data tabs and ensure default active tab is set correctly
 */
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {
    // Check if the custom Recipes tab exists
    if ( isset( $tabs['recipes'] ) ) {
        // Keep your original priority order for products with Recipes
        $tabs['recipes']['priority'] = 5;
        $tabs['description']['priority'] = 10;
        $tabs['reviews']['priority'] = 15;
        $tabs['additional_information']['priority'] = 20;
    } else {
        // For products without Recipes, set Description as the first tab
        $tabs['description']['priority'] = 5;
        $tabs['reviews']['priority'] = 10;
        $tabs['additional_information']['priority'] = 15;
    }

    // Explicitly mark the first tab as active (WooCommerce should do this, but this ensures it)
    $first_tab_key = array_key_first( $tabs );
    if ( $first_tab_key ) {
        foreach ( $tabs as $key => $tab ) {
            $tabs[$key]['active'] = ( $key === $first_tab_key ) ? true : false;
        }
    }

    return $tabs;
}

This code does two key things:

• It adjusts the tab priorities dynamically based on whether the Recipes tab exists, so Description moves to the top when Recipes isn't present.
• It explicitly sets the first tab in the sorted list as active, which tells WooCommerce to render that tab with the active class—something Divi's tab script relies on to load content by default.

Solution 2: Add a Fallback JavaScript (If Needed) #

If the PHP fix doesn't work (sometimes Divi's cached scripts can interfere), add this snippet to force the first tab to activate on page load. This acts as a safety net to ensure the content loads without requiring a click:

/**
 * Force first product tab to activate on page load
 */
add_action( 'wp_footer', 'woo_force_first_tab_active' );
function woo_force_first_tab_active() {
    // Only run this on single product pages
    if ( is_product() ) {
        ?>
        <script>
            jQuery(document).ready(function($) {
                // Wait a short time to make sure Divi's tab scripts have loaded
                setTimeout(function() {
                    const $firstTab = $('.woocommerce-tabs ul.tabs li:first-child a');
                    // Activate the first tab if it's not already active
                    if ( $firstTab.length && !$firstTab.parent().hasClass('active') ) {
                        $firstTab.click();
                    }
                }, 100);
            });
        </script>
        <?php
    }
}

How to Implement #

1. Replace your existing woo_reorder_tabs function in your Divi child theme's functions.php with the updated version from Solution 1.
2. If you still see the issue after testing, add the JavaScript snippet from Solution 2 to the same functions.php file.
3. Clear your site and browser cache to make sure the changes take effect.

内容的提问来源于stack exchange，提问作者MeaghanT