如何仅移动WooCommerce单品页面的常规价格?
仅移动WooCommerce单品页面的常规价格
默认的woocommerce_template_single_price函数会同时渲染常规价与促销价,无法直接单独移动常规价,需要通过自定义逻辑拆分价格输出结构:
- 移除默认的价格模块
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
- 自定义函数拆分价格展示逻辑
这个函数负责在原价格位置输出促销价(如果产品处于促销状态),同时预留常规价的独立输出入口:
function custom_product_price_render() { global $product; // 输出促销价(仅当产品有促销价时显示) if ( $product->is_on_sale() ) { echo '<p class="price sale-price">' . wc_price( $product->get_sale_price() ) . '</p>'; } // 若产品无促销价,可取消下方注释,保留常规价在原位置输出 // else { // echo '<p class="price regular-price">' . wc_price( $product->get_regular_price() ) . '</p>'; // } }
- 将拆分后的价格模块挂载回原位置,再单独挂载常规价到目标位置
// 挂载拆分后的促销价到原价格位置(优先级10) add_action( 'woocommerce_single_product_summary', 'custom_product_price_render', 10 ); // 单独将常规价挂载到你需要的位置,这里示例用优先级35 add_action( 'woocommerce_single_product_summary', function() { global $product; // 仅当产品有促销价时,才单独移动常规价,避免无促销时重复显示 if ( $product->is_on_sale() ) { echo '<p class="price regular-price moved-regular-price">' . wc_price( $product->get_regular_price() ) . '</p>'; } }, 35 );
- 样式调整(可选)
通过自定义CSS调整移动后常规价的样式,比如:
.moved-regular-price { text-decoration: line-through; color: #888; margin-top: 10px; }
内容的提问来源于stack exchange,提问作者Leonardo Lamanna
相关产品推荐
相关产品推荐

