WordPress Elementor站点如何用JavaScript修改a标签href，编辑JS的位置在哪？

提供两种可落地的实现方式，按需选择即可：

方案1：JavaScript修改（零风险，新手友好） #

代码片段 #

直接复制以下代码，替换其中的旧链接、新链接为你实际的站点地址即可：

document.addEventListener('DOMContentLoaded', function() {
  // 匹配class为fb_btn_fill、指向旧结账页的所有按钮
  const checkoutBtns = document.querySelectorAll('a.fb_btn_fill[href="https://examplesite.com/checkout/"]');
  checkoutBtns.forEach(btn => {
    // 替换为新的结账页地址
    btn.setAttribute('href', 'https://examplesite.com/checkout2/');
  });
});

代码添加方式 #

• 通用全局生效：将代码用<script>标签包裹后，粘贴到主题设置自带的「自定义页脚脚本」区域，没有该设置的可以安装免费的「Insert Headers and Footers」插件，把代码放到插件的页脚脚本输入框，保存清缓存即可生效
• 仅指定子页面生效：安装「Code Snippets」插件，新建PHP代码片段，粘贴以下内容，将其中的页面ID123替换为你要修改的子页面实际ID，选择「仅在站点前端运行」后保存即可：

add_action( 'wp_footer', 'custom_update_checkout_btn_link', 999 );
function custom_update_checkout_btn_link() {
  // 仅在ID为123的页面执行修改
  if ( is_page( 123 ) ) {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      const checkoutBtns = document.querySelectorAll('a.fb_btn_fill[href="https://examplesite.com/checkout/"]');
      checkoutBtns.forEach(btn => {
        btn.setAttribute('href', 'https://examplesite.com/checkout2/');
      });
    });
    </script>
    <?php
  }
}

方案2：短代码过滤（更彻底，无JS延迟） #

如果该按钮是通过checkout-Shortcode短代码输出的，可以直接用PHP过滤短代码输出内容，不需要依赖前端JS：

add_filter( 'do_shortcode_tag', 'custom_modify_checkout_shortcode', 10, 2 );
function custom_modify_checkout_shortcode( $output, $tag ) {
  // 匹配指定短代码，可添加is_page页面判断限制生效范围
  if ( $tag === 'checkout-Shortcode' ) {
    $output = str_replace( 'https://examplesite.com/checkout/', 'https://examplesite.com/checkout2/', $output );
  }
  return $output;
}

将上述代码添加到当前主题的functions.php文件末尾，或者用Code Snippets插件添加，清缓存后生效。

注意事项 #

• 操作前建议先备份站点配置，避免误操作
• 修改完成后需要清空浏览器缓存、站点缓存才能看到生效效果

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