WooCommerce子主题functions.php添加免运费横幅图片显示异常求助

核心问题分析 #

你碰到的两个关键问题：

1. 图片路径错误：直接写free.jpg会以当前页面URL为基准，而非子主题目录
2. 标签输出不完整：当前代码仅输出了部分img标签文本，未构建完整HTML结构

正确代码实现 #

假设你使用woocommerce_before_cart这类钩子（可根据展示需求替换成其他合适钩子，比如woocommerce_before_single_product），正确写法如下：

add_action('woocommerce_before_cart', 'display_free_shipping_banner');
function display_free_shipping_banner() {
    // 获取子主题根目录的绝对URL
    $banner_img_url = get_stylesheet_directory_uri() . '/free.jpg';
    // 输出完整且安全的img标签
    echo '<img src="' . esc_url($banner_img_url) . '" alt="免运费横幅" />';
}

关键细节说明 #

• 路径获取：get_stylesheet_directory_uri()是WordPress官方函数，专门用于获取当前激活子主题的根目录URL，彻底避免相对路径的适配问题
• 安全处理：用esc_url()对图片URL进行转义，符合WordPress安全规范，防止XSS风险
• 钩子选择：根据横幅展示位置选对应的WooCommerce钩子：
  • 购物车页顶部：woocommerce_before_cart
  • 商品详情页顶部：woocommerce_before_single_product
  • 全站WooCommerce页面头部：结合is_woocommerce()条件判断使用wp_header钩子

排查注意事项 #

• 确认图片文件名和后缀完全匹配（Linux服务器区分大小写，比如free.jpg不能写成Free.JPG）
• 检查子主题根目录下确实存在该图片文件
• 若仍不显示，右键查看页面源代码，确认img标签的src属性是否为正确的子主题图片URL

内容的提问来源于stack exchange，提问作者Paul Anthony McGowan