如何在WooCommerce「未找到匹配商品」提示中插入可渲染的HTML代码

问题原因 #

WooCommerce输出无匹配商品的提示文本时，默认会调用esc_html()函数对内容做转义处理，你通过gettext钩子插入的HTML标签会被转为实体字符，因此不会被浏览器渲染，直接原样输出。

解决方案 #

不要使用通用的gettext钩子修改该文本，直接替换WooCommerce专门用于输出空商品提示的钩子即可，调整后的代码如下：

// 移除WooCommerce默认的空商品提示输出
remove_action( 'woocommerce_no_products_found', 'wc_no_products_found' );
// 新增自定义的空商品提示输出，支持HTML标签
add_action( 'woocommerce_no_products_found', 'custom_no_products_found_content' );
function custom_no_products_found_content() {
    echo '<p>抱歉！目前我们不向您所在的邮编配送该分类下的商品。</p>
    <p>您可以选择以下分类：</p>
    <ul>
        <li><a href="www.example.com/category1">分类1</a></li>
        <li><a href="www.example.com/category2">分类2</a></li>
        <li><a href="www.example.com/category3">分类3</a></li>
    </ul>';
}

如果你的主题已经自定义过woocommerce_no_products_found的输出逻辑，也可以直接修改主题模板里的archive-product.php或者no-products-found.php对应片段，直接插入你需要的HTML内容即可。

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