如何在woocommerce产品页面添加Buy Now按钮和其他内容

在很多跨境平台上你肯定都会看到产品购买页面一般会有Add to Cart和Buy Now两个按钮，不管是Aliexpress还是Amazon都有，不过woocommerce这款wordpress电商插件是不自带Buy Now按钮的，原始只有一个Add to Cart。

有通过wordpress+Woocommerce建站的朋友可以阅读本文来添加Buy Now按钮，如果真有需要。

为什么独立站需要Buy Now按钮

首先我们来看看add to cart和buy now的区别，大部分人应该都是知道的，字面意思已经很清楚了：

Add to cart是把你选好的产品都放到购物车，然后再从购物车进入付款页面，付款完成订单购买
而Buy Now按钮其实就是一个快捷checkout按钮，用户可以在选好需要的产品时一键点击跳到付款页面，跳过购物车页面，更快捷的完成商品付款

虽然多浏览一个cart页面确实浪费不了多少时间，但是国外有数据统计就因为这么个原因，很多跨境电商独立站的卖家居然销量是会受到一定影响的，总有那种急性子的客户，看到了就直接付款，多一个步骤就放弃了的。

这就是为什么会有很多人追求在自己的跨境电商独立站上要添加Buy Now按钮，所以有必要的话，你也可以添加一个。今天我就给大家介绍一个简单方法，通过添加一小段代码来添加Buy Now按钮的方法。

通过functions.php添加Buy Now按钮

这个稍微涉及一点代码的东西，不懂的话，只要按照步骤，复制粘贴就好了。之前我有写过文章告诉大家如何给wordpress网站添加javascript，比如添加google analytics跟踪代码，今天的方法大致方法差不多。

1. 创建一个子主题(child theme)

为何要创建子主题，这个其实我在其他文章中说过很多次了，今天再提一次。

首先functions.php在wordpress主题中，而一般来说原主题经常会升级，这是为了兼容最新的wordpress版本，不管你的主题是免费的还是付费的都如此，其实根本原因还是因为wordpress本身就经常升级。每次升级主题，新版本就会删除你对主题的任何改动，functions.php也不例外，但是假如你创建了子主题，升级原主题之后，原主题并不会对子主题做出更改。

如何创建子主题：怎样给WordPress网站创建Child Theme(子主题)。

2. 进入functions.php编辑页面

创建好子主题后直接激活使用，和原主题没什么两样。从左侧菜单中的Appearance->Theme editor进去，会跳出一个确认框，表示你已经知道可能会更改一些主题的东西，可能会造成网站瘫痪，点击understand,，正常的话会看到如下图

但一定要注意右上角选择你需要修改的主题文件，选择刚刚创建的子主题，里面正常来讲只有两个文件，一个就是style.css和functions.php，第一个是有关页面样式的文件，比如你的页面的外观，架构就靠这个里面的东西来实现。添加Buy now就在functions.php中完成。

3. 添加buy now按钮的代码

将一下代码复制到你的functions.php，请注意是子主题文件中

add_action( 'woocommerce_after_add_to_cart_button', 'wpwc_add_contact_button');
function wpwc_add_contact_button() {
    echo '<a href="https://www.xxx.com/checkout/" class="buy-now-btn button" target="_blank">Buy Now</a>';
}

以上蓝色的部分你是可以随意自定义的，
绿色的链接替换成你的woocommerce的checkout链接，checkout链接地址可以在你的后台page中找到。安装woocommerce，就会自动生成checkout页面的。
红色的文字也是可以修改的，其实就是按钮的文字。
这段代码中如果要添加特殊符合，包括中文，比如按钮文字是中文的话，最好是放到编辑器里面去编辑，不然可能会出现syntax error(语法错误)。

另外可能你的按钮在页面中看起来不怎么好看，而且摆放的位置不对，你还需要添加一些样式来完成，这个视各人主题而定，添加样式可以到网站后台面板中找到Appearance->customize->Additional css，然后在里面直接添加，以下仅供参考，因为主题不一样可能会有小小出入。


.buy-now-btn {
    margin-left: 10px;
    padding: 10px 20px;
    border-radius: 3px;
    background: #000;
    color: white !important;
    text-decoration: none;
vertical-align: sub;
}

.buy-now-btn:hover {
    background: #333;
}

最终呈现的页面是这样的:

以上代码中绿色链接其实还可以替换其他链接，如果有些产品可以做定制或者批量销售的话，比如contact us页面，然后红色的文字可以按你的需求修改。

4. 在右侧产品任何位置添加其他内容

标题中的右侧即上图中的右侧，左边是图片，右边是产品简要，如果你还想添加其他内容，首先你要懂点html语言，不然就别再研究下去了



add_action( 'woocommerce_single_product_summary', 'wpwc_add_contact_button', 30);
function wpwc_add_contact_button() {
    echo '<a href="https://www.xxx.com/checkout/" class="buy-now-btn button" target="_blank">Buy Now</a>';
}

你可以通过以上代码中的‘30’来更改位置，可改值包含10，20，30，40，50，数字越大，内容越往下。

总结

本文可能并不太适合外贸朋友，因为涉及到一点点woocommerce开发的东西，有兴趣的可以尝试以下。有人肯定会说开头看你说得很有必要，这里又说可能不适合，不是自相矛盾吗？其实还可以通过插件添加buy now按钮，那个就没多少好说的了，应该适合任何新手和小白。我写这篇文章的首要目的是懂的人用，同时自己做个记录。

分享到