如何在WooCommerce单品页全局添加图片至短描述后价格前？

实现这个需求最稳妥的方式是利用WooCommerce的动作钩子，无需修改主题模板文件，避免主题更新导致代码丢失。

步骤1：添加自定义代码 #

你可以通过主题的functions.php文件，或者使用专门的自定义代码插件（比如Code Snippets）来添加以下代码：

add_action( 'woocommerce_single_product_summary', 'insert_custom_image_between_desc_and_price', 15 );

function insert_custom_image_between_desc_and_price() {
    // 替换成你的图片URL和替代文本
    $image_src = 'https://your-domain.com/path-to-your-image.jpg';
    $image_alt = '你的图片描述';

    // 输出图片容器和标签，确保代码安全
    echo '<div class="custom-between-image">';
    printf( '<img src="%s" alt="%s" />', esc_url( $image_src ), esc_attr( $image_alt ) );
    echo '</div>';
}

关键说明： #

• woocommerce_single_product_summary是单个产品页面核心信息区域的主钩子，所有产品相关元素（标题、价格、短描述等）都挂载在此。
• 优先级15是控制位置的关键：WooCommerce默认配置中，价格的钩子优先级是10，短描述是20——这意味着默认顺序是价格在前、短描述在后。如果你的主题保持这个默认顺序，上述代码会把图片放在价格之后、短描述之前。
• 若你的主题调整了元素顺序（比如短描述在前、价格在后），需要先确认两者的优先级：
  添加以下临时代码，在单个产品页面底部打印所有钩子的优先级信息：

  add_action( 'wp_footer', 'show_single_product_hook_priorities' );
  
  function show_single_product_hook_priorities() {
      if ( is_product() ) {
          global $wp_filter;
          if ( isset( $wp_filter['woocommerce_single_product_summary'] ) ) {
              echo '<pre style="background:#f5f5f5; padding:1rem;">';
              print_r( $wp_filter['woocommerce_single_product_summary'] );
              echo '</pre>';
          }
      }
  }
  

  找到woocommerce_template_single_excerpt（短描述）和woocommerce_template_single_price（价格）对应的优先级数字，把图片的优先级设置在两者之间即可。

步骤2：调整图片样式（可选） #

如果需要自定义图片的显示效果，在主题的自定义CSS区域（外观 > 自定义 > 额外CSS）添加样式：

.custom-between-image {
    margin: 1.5rem 0;
    text-align: center; /* 居中图片 */
}

.custom-between-image img {
    max-width: 100%;
    height: auto;
    max-height: 300px; /* 限制图片最大高度 */
}

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