如何在WordPress(WooCommerce+Elementor)中基于产品ID显示产品价格？

1. 利用Elementor动态标签+自定义CSS（无需开发） #

• 在Elementor编辑页面时，选中需要显示价格的文本/标题模块，点击内容区域的动态标签图标（小闪电标识）。
• 在WooCommerce分类下选择「产品价格」：
  • 若当前是产品单页，直接调用当前产品的价格；
  • 若在首页、分类页等非产品单页，需先通过「产品」动态标签指定目标产品，再嵌套调用「产品价格」。
• 给该模块添加自定义CSS类（如custom-price-display），然后在Elementor的「自定义CSS」面板中编写样式，完全控制价格的字体、颜色、间距等：

  .custom-price-display .woocommerce-Price-amount {
      font-size: 22px;
      color: #2ecc71;
      font-weight: 600;
      margin-top: 8px;
  }
  

2. 自定义短代码（灵活控制HTML结构与样式） #

• 在主题的functions.php文件（推荐用子主题，避免主题更新丢失代码）中添加以下代码，创建可指定产品ID的短代码：

  function get_custom_product_price( $atts ) {
      $args = shortcode_atts( array(
          'id' => '', // 默认空值，需传入目标产品ID
      ), $atts );
  
      if ( empty( $args['id'] ) ) return '';
  
      $product = wc_get_product( $args['id'] );
      if ( ! $product ) return '产品不存在';
  
      // 自定义输出的HTML结构，可添加任意类名用于样式控制
      return '<span class="custom-product-price">' . $product->get_price_html() . '</span>';
  }
  add_shortcode( 'product_price', 'get_custom_product_price' );
  

• 在Elementor中添加「短代码」模块，输入[product_price id="123"]（替换123为你的产品ID），然后通过CSS类custom-product-price设置样式即可。

3. 排查基础问题（解决产品价格字段失效） #

• 先验证WooCommerce产品价格字段本身是否正常：进入产品编辑页，检查「常规」选项卡下的价格/销售价能否正常输入、保存。
• 若字段失效，排查插件冲突：禁用除WooCommerce、Elementor外的所有插件，测试价格字段是否恢复正常；再逐一启用插件找出冲突源。
• 切换到WordPress默认主题（如Twenty Twenty-Four），验证是否是当前主题导致的价格字段异常。

4. Elementor自定义代码模块（适合有基础的开发者） #

• 开启Elementor设置中的「允许PHP代码」（路径：Elementor → 设置 → 高级 → 允许PHP代码）。
• 添加「自定义代码」模块，选择PHP类型，输入以下代码调用指定产品价格：

  <?php
  $target_product_id = 123; // 替换为你的产品ID
  $product = wc_get_product( $target_product_id );
  if ( $product ) {
      echo '<div class="custom-price-box">' . $product->get_price_html() . '</div>';
  } else {
      echo '产品未找到';
  }
  ?>
  

• 同样通过CSS类custom-price-box定义样式。

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