Kapee主题产品hover区添加Buy Now按钮直跳结账页设置方法

不用买付费插件，也不需要精通PHP，全程不修改主题核心文件，不会因为主题更新丢失配置。 #

操作前准备 #

• 确保站点已正常安装启用WooCommerce，Kapee本身是WooCommerce原生适配主题，自带产品卡片的标准挂载点，不用自己手动改模板插内容。
• 推荐安装免费的Code Snippets插件添加功能代码，不用碰FTP或者主题文件编辑器，新手操作不会出错；如果已经在用子主题，也可以把代码加到子主题的functions.php文件里。

第一步：添加Buy Now跳转逻辑 #

激活Code Snippets后，新建一个全站点运行的代码片段，粘贴以下代码后保存启用：

// 给商店页/分类页/标签页的产品卡片加Buy Now按钮
add_filter('woocommerce_loop_add_to_cart_link', 'kapee_add_hover_buy_now_btn', 15, 2);
function kapee_add_hover_buy_now_btn($button_html, $product){
    // 非产品列表页不加载按钮，避免和详情页元素冲突
    if( !is_shop() && !is_product_category() && !is_product_tag() ){
        return $button_html;
    }
    // 简单商品直接生成结账跳转链接，点击自动加购并跳结账页
    if( $product->is_type('simple') && $product->is_purchasable() && $product->is_in_stock() ){
        $checkout_redirect = wc_get_checkout_url() . '?add-to-cart=' . $product->get_id();
        $button_html .= '<a href="'.esc_url($checkout_redirect).'" class="button kapee-buy-now">Buy Now</a>';
    }
    // 可变商品需要先选规格，取消下面这段代码的注释即可显示按钮，点击后展开规格选择，选完自动跳结账
    /*
    if( $product->is_type('variable') && $product->is_purchasable() && $product->is_in_stock() ){
        $button_html .= '<a href="'.get_permalink($product->get_id()).'?buy_now=1" class="button kapee-buy-now">Buy Now</a>';
    }
    */
    return $button_html;
}

// 点击Buy Now加购后自动跳转结账页，不留在购物车
add_filter('woocommerce_add_to_cart_redirect', 'kapee_buy_now_redirect_checkout');
function kapee_buy_now_redirect_checkout($redirect_url){
    if( isset($_GET['add-to-cart']) ){
        return wc_get_checkout_url();
    }
    return $redirect_url;
}

第二步：添加样式让按钮仅在悬停时显示 #

进入WordPress后台「外观-自定义-额外CSS」，粘贴以下样式代码，可根据自己站点的配色、间距调整参数，和现有按钮样式保持统一：

/* 默认状态隐藏Buy Now按钮 */
.product-grid-item .kapee-buy-now{
    display: none;
    width: 100%;
    margin: 8px 0 0;
    padding: 9px 15px;
    border-radius: 4px;
    color: #fff;
    background: #222; /* 替换成你站点的主按钮色值 */
    text-align: center;
    box-sizing: border-box;
}
/* 鼠标悬停产品卡片时显示按钮 */
.product-grid-item:hover .kapee-buy-now{
    display: block;
}
/* 按钮悬停态样式，和现有加购按钮效果匹配 */
.product-grid-item .kapee-buy-now:hover{
    background: #000; /* 替换成你站点主按钮的悬停色值 */
    color: #fff;
}

补充说明 #

• 可变商品如果要实现完全不用进详情页、悬停直接选规格后结账，可以搭配官方插件库免费的可变商品悬停选规格插件，配合以上代码就能实现参考图的全部效果，不需要购买付费插件。
• 不要把PHP代码直接加到Kapee主主题的functions.php里，否则下次更新主题时代码会被直接覆盖，用Code Snippets或者子主题添加都可以避免这个问题。

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