如何用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
相关产品推荐
相关产品推荐

