如何在WooCommerce归档页商品标题下显示产品描述片段？

Hey there! Adding those concise little descriptions under each product title on your WooCommerce shop or category pages is a great way to give shoppers quick context—and it’s totally achievable with either a lightweight code snippet or a plugin. Let’s break down the most reliable methods:

Method 1: Use a Custom Code Snippet (No Plugins Needed) #

This is my go-to approach because it keeps your site fast and avoids relying on third-party tools. We’ll use WooCommerce’s built-in hooks to inject the description exactly where you want it.

Step 1: Add the PHP Code #

You’ll want to add this to your child theme’s functions.php file (always use a child theme to avoid losing changes when your parent theme updates) or use a plugin like Code Snippets to manage custom code safely.

add_action( 'woocommerce_after_shop_loop_item_title', 'custom_shop_loop_product_description', 5 );
function custom_shop_loop_product_description() {
    global $product;

    // First, check if the product has a dedicated short description set
    if ( $product->get_short_description() ) {
        echo '<div class="shop-loop-product-desc">' . wpautop( wp_kses_post( $product->get_short_description() ) ) . '</div>';
    }
    // If you want to pull a snippet from the full product description instead, uncomment this block
    /*
    else {
        $full_description = $product->get_description();
        // Trim to 25 words (adjust this number as needed) and add an ellipsis
        $trimmed_desc = wp_trim_words( $full_description, 25, '...' );
        echo '<div class="shop-loop-product-desc">' . wpautop( wp_kses_post( $trimmed_desc ) ) . '</div>';
    }
    */
}

Quick breakdown of the code:

• The woocommerce_after_shop_loop_item_title hook lets us insert content right after the product title. We set the priority to 5 so it shows before the product price (use 15 instead if you want it after the price).
• wpautop adds proper paragraph breaks to the description, and wp_kses_post ensures the content is sanitized (no sketchy code gets through).
• The first block uses the product’s built-in Short Description field (found in the WooCommerce product editor under "Product short description"). If that’s empty, the commented block pulls a trimmed snippet from the full product description.

Step 2: Style the Description with CSS #

To make the description look polished, add this CSS to your theme’s custom CSS panel (Appearance > Customize > Additional CSS) or child theme’s style.css file:

.shop-loop-product-desc {
    font-size: 0.9rem;
    color: #666;
    margin: 10px 0 15px;
    line-height: 1.5;
}

Tweak the values (font size, color, margins) to match your site’s design.

Method 2: Use a Page Builder or WooCommerce Plugin #

If you’re not comfortable with code, you can use tools like:

• Elementor Pro: Its WooCommerce Builder lets you customize the shop loop template and add a description element directly.
• WooCommerce Product Table: This plugin lets you create custom shop layouts with product descriptions included.
• Custom Layouts for WooCommerce: A dedicated plugin for tweaking archive pages without code.

Just keep in mind that plugins add a bit of overhead, so the code method is better for performance.

Important Notes #

• Always test changes on a staging site first to avoid breaking your live store.
• Clear your site’s cache (including browser cache) after adding the code/CSS to see the changes take effect.
• If you’re using a heavily customized theme, double-check that the hook isn’t already overridden in your theme’s template files.

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