如何在WooCommerce单品页Meta区域显示dimensions属性

Hey there! Let's get your WooCommerce product dimensions attribute showing up in the single product meta area—here's a straightforward, clean solution you can implement right away.

We'll use a custom code snippet (no core file edits needed!) to hook into WooCommerce's existing product meta section, so your dimensions fit seamlessly with default info like SKU, categories, and tags.

Step 1: Add the Code Snippet #

You can add this to either your child theme's functions.php file (recommended to avoid losing changes when your theme updates) or use a plugin like Code Snippets (perfect for non-developers who want a safe way to add custom code).

/**
 * Display 'dimensions' product attribute in single product meta area
 */
function display_dimensions_attribute_in_product_meta() {
    global $product;

    // Exit if we're not on a single product page or product object is missing
    if ( ! is_product() || ! $product ) {
        return;
    }

    // Target your 'dimensions' attribute (use the exact slug you created)
    $attribute_slug = 'dimensions';
    $attribute_value = $product->get_attribute( $attribute_slug );

    // Only show if the attribute has a value set for the product
    if ( ! empty( $attribute_value ) ) {
        // Get the human-friendly label for your attribute (e.g., "Dimensions" instead of "dimensions")
        $attribute_label = wc_attribute_label( $attribute_slug );

        // Output the attribute in a clean, meta-style format
        echo '<div class="dimensions-attribute">';
        echo '<span class="attribute-label">' . esc_html( $attribute_label ) . ':</span> ';
        echo '<span class="attribute-value">' . esc_html( $attribute_value ) . '</span>';
        echo '</div>';
    }
}
// Hook the function to run right after the default product meta
add_action( 'woocommerce_product_meta_end', 'display_dimensions_attribute_in_product_meta' );

What This Code Does: #

• Checks we're actually on a single product page before running (avoids errors on other site pages)
• Grabs the value of your dimensions attribute for the current product
• Pulls in the readable label you set for the attribute (no ugly slugs displayed!)
• Outputs the label and value in a structured div that blends with the meta area's existing style

Step 2: Style It (Optional) #

If you want to tweak the appearance to match your theme, add this CSS to your theme's Customizer > Additional CSS section:

.dimensions-attribute {
    margin-top: 10px;
    font-size: 0.9em;
    color: #666; /* Match your theme's meta text color */
}

.dimensions-attribute .attribute-label {
    font-weight: 600; /* Make the label stand out slightly */
}

Bonus: Displaying Other Attributes Later #

If you need to add more attributes to the meta area down the line, just duplicate the core logic in the function. For example, to add a "material" attribute, swap out the $attribute_slug value and repeat the value-check and output steps—it's that easy.

Once you add the code, your dimensions attribute will automatically appear on every single product page where you've set a value for it.

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