You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何用WooCommerce钩子在Elementor页面精准展示商品短描述?

解决OceanWP+Elementor Pro商品组件短描述显示位置问题

问题说明

使用OceanWP主题搭配Elementor Pro时,Elementor的PRODUCTS组件和OceanWP的WOO-PRODUCTS组件无法将WooCommerce商品短描述精准放在商品标题与价格之间,自行编写的短代码要么显示在商品区域顶部,要么在底部,调整优先级无效。


1. Elementor PRODUCTS组件修正代码

原代码错误使用了woocommerce_after_shop_loop_item钩子(触发位置在商品项末尾),导致短描述显示在底部。替换为标题后专属钩子并调整优先级即可:

// 在Elementor PRODUCTS组件的商品标题下方、价格上方显示短描述
add_action( 'elementor/widget/render_content', function( $content, $widget ) {
    if ( 'woocommerce-products' === $widget->get_name() ) {
        // 移除重复绑定避免多次输出
        remove_action( 'woocommerce_after_shop_loop_item_title', 'custom_elementor_product_short_desc', 5 );
        // 绑定到标题后钩子,优先级5(早于价格的优先级10)
        add_action( 'woocommerce_after_shop_loop_item_title', 'custom_elementor_product_short_desc', 5 );
    }
    return $content;
}, 10, 2 );

function custom_elementor_product_short_desc() {
    global $product;
    if ( ! $product ) return;
    
    $short_description = $product->get_short_description();
    if ( $short_description ) {
        echo '<div class="elementor-product-short-description" style="margin-top: 5px; font-size: 14px; color: #666;">';
        echo wp_kses_post( $short_description );
        echo '</div>';
    }
}

代码说明

  • 将短描述输出逻辑独立为函数,避免匿名函数内重复绑定
  • 选用woocommerce_after_shop_loop_item_title钩子(标题后触发),优先级设为5(WooCommerce默认价格输出优先级为10,因此5会先于价格执行)

2. OceanWP WOO-PRODUCTS组件修正代码

原代码优先级设置错误(设为15会晚于价格的优先级10,导致短描述显示在价格之后),调整为5即可:

// 在OceanWP WOO-PRODUCTS组件的商品标题下方、价格上方显示短描述
add_action( 'woocommerce_after_shop_loop_item_title', function() {
    global $product;
    
    if ( ! $product ) {
        return;
    }

    $short_description = $product->get_short_description();
    if ( $short_description ) {
        echo '<div class="elementor-product-short-description" style="margin-top: 5px; font-size: 14px; color: #666;">';
        echo wp_kses_post( $short_description );
        echo '</div>';
    }
}, 5 ); // 优先级设为5,确保在价格(优先级10)之前输出

代码说明

  • WooCommerce默认通过woocommerce_after_shop_loop_item_title钩子输出价格,优先级为10
  • 将短描述优先级设为5,会在价格之前执行,从而精准显示在标题与价格之间

内容的提问来源于stack exchange,提问作者PapagoFX

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.14 04:11:18