如何在Astra主题的WooCommerce产品标签框显示折扣百分比而非促销

解决方案步骤 #

• 第一步：移除Astra默认的“促销”标签
  Astra主题用专属函数渲染促销标签，先把默认标签移除，将以下代码添加到主题的functions.php文件或自定义代码插件中：

  add_action( 'init', 'remove_astra_sale_badge' );
  function remove_astra_sale_badge() {
      remove_action( 'woocommerce_before_shop_loop_item_title', 'astra_woocommerce_sale_flash', 10 );
      remove_action( 'woocommerce_before_single_product_summary', 'astra_woocommerce_sale_flash', 10 );
  }
  

• 第二步：添加自定义折扣百分比标签
  新增自定义标签逻辑，自动计算并显示折扣百分比，代码如下：

  add_action( 'woocommerce_before_shop_loop_item_title', 'custom_astra_sale_percentage_badge', 10 );
  add_action( 'woocommerce_before_single_product_summary', 'custom_astra_sale_percentage_badge', 10 );
  
  function custom_astra_sale_percentage_badge() {
      global $product;
      
      // 仅对在售商品生效
      if ( ! $product->is_on_sale() ) return;
      
      // 兼容简单产品和可变产品
      if ( $product->is_type( 'simple' ) ) {
          $regular_price = (float) $product->get_regular_price();
          $sale_price = (float) $product->get_sale_price();
      } elseif ( $product->is_type( 'variable' ) ) {
          $min_regular_price = (float) $product->get_variation_regular_price( 'min', true );
          $min_sale_price = (float) $product->get_variation_sale_price( 'min', true );
          $regular_price = $min_regular_price;
          $sale_price = $min_sale_price;
      } else {
          return;
      }
      
      // 计算并输出折扣百分比
      if ( $regular_price > 0 ) {
          $percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
          echo '<span class="onsale">' . esc_html( '-' . $percentage . '%' ) . '</span>';
      }
  }
  

• 第三步：样式适配（可选）
  如果新标签样式和Astra默认风格不符，可添加以下CSS调整（放到主题自定义CSS区域）：

  .woocommerce ul.products li.product .onsale,
  .woocommerce div.product .onsale {
      background-color: #e74c3c;
      color: #fff;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 3px;
  }
  

原代码失效原因 #

之前的通用代码没有适配Astra主题的专属钩子——Astra用astra_woocommerce_sale_flash函数渲染促销标签，而非WooCommerce默认的woocommerce_show_product_sale_flash，因此直接修改默认钩子的代码无法覆盖主题原有逻辑。

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