WordPress WooCommerce产品无法添加产品下方跳转链接问题求助

嘿，我看了你的代码，问题一眼就能揪出来——你在同一个<a>标签里写了两个href属性！HTML规范里一个标签绝对不能重复定义相同属性，浏览器遇到这种情况只会认第一个href（甚至直接忽略有问题的属性），这就是你的链接没法正常工作的核心原因。

先给你修正后的代码 #

根据你的需求分两种场景：

场景1：跳转到外部网站 #

如果目标是外部URL，直接保留一个正确的href即可：

<a target="_blank" href="http://your_url_here.html" class="button wc-backward"><?php _e( '跳转到外部网站', 'woocommerce' ) ?></a>

场景2：跳转到本地ID为4736的页面 #

如果是跳转站内页面，用get_permalink获取正确链接，同时记得用esc_url做URL转义（符合WordPress安全规范）：

<a target="_blank" href="<?php echo esc_url( get_permalink( 4736 ) ); ?>" class="button wc-backward"><?php _e( '跳转到本地页面', 'woocommerce' ) ?></a>

注：wc_get_page_id()是用来获取WooCommerce默认页面（比如购物车、结账页）的ID，如果你要跳转的是普通页面，直接传页面ID4736给get_permalink()就行，不用套wc_get_page_id()

更稳妥的添加方式（避免主题更新丢失修改） #

不建议直接修改WooCommerce模板文件，推荐用WordPress钩子函数添加，把下面的代码放到你当前主题的functions.php文件里：

// 在产品页面底部添加自定义跳转按钮
add_action( 'woocommerce_after_single_product_summary', 'add_custom_product_jump_link', 20 );
function add_custom_product_jump_link() {
    // 这里可以替换成你需要的链接和文本
    echo '<a target="_blank" href="http://your_url_here.html" class="button wc-backward">' . __( '点击跳转到目标网站', 'woocommerce' ) . '</a>';
}

如果需要在产品描述里灵活添加，还可以写个短代码：

// 注册自定义跳转链接短代码
add_shortcode( 'custom_jump_link', 'custom_jump_link_shortcode' );
function custom_jump_link_shortcode( $atts ) {
    $default_atts = array(
        'url' => '#',
        'text' => '点击跳转',
        'target' => '_blank',
        'class' => 'button wc-backward'
    );
    $atts = shortcode_atts( $default_atts, $atts );
    
    // 安全转义所有属性
    return '<a target="' . esc_attr( $atts['target'] ) . '" href="' . esc_url( $atts['url'] ) . '" class="' . esc_attr( $atts['class'] ) . '">' . esc_html( $atts['text'] ) . '</a>';
}

之后在产品描述编辑器里直接用：

[custom_jump_link url="http://your_url_here.html" text="跳转到外部网站"]

额外排查点 #

如果修改后还是不显示，试试这几个操作：

• 清除网站所有缓存（包括浏览器缓存、插件缓存、CDN缓存），缓存经常会导致修改不生效
• 检查当前主题是否覆盖了WooCommerce的产品模板文件，如果是，确保你修改的是主题目录下的woocommerce文件夹里的对应模板
• 暂时禁用其他插件，排查是否有插件冲突阻止了链接渲染
• 确认目标URL是可访问的，本地页面ID是否正确

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