WooCommerce购物按钮下方添加询盘按钮教程

110次阅读

共计 1613 个字符，预计需要花费 5 分钟才能阅读完成。

大多数使用美国主机商的站长朋友基本都会使用 WooCommerce 插件来做产品系统，有些站长会在产品界面添加一个询盘按钮，本文将针对这个询盘按钮教大家使用代码添加一个 WooCommerce 自定义按钮。

效果图如下，在购物车按钮的下方添加一个 WooCommerce 可以自定义按钮文字和链接的按钮。

WooCommerce 购物按钮下方添加询盘按钮教程

使用方法：

复制下面的代码，粘贴到你主题的函数文件 functions.php 里面

add_action(‘woocommerce_single_product_summary’, ‘my_extra_button_on_product_page’, 30);

function my_extra_button_on_product_page() {
global $product;
echo ‘<a class=”naibabutton” href=”https://blog.naibabiji.com”>Contact us immediately</a>’;
}

保存后，你网站前台就可以看到一个“Contact us immediately”的按钮了。不过还没有样式。

自己在主题的 css 里面自定义.naibabutton 的样式就可以了。如果你不会的话，直接复制下面这串代码加进去就可以了。

.naibabutton {
color: #111;
background-color: rgba(0,0,0,0.1);
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #009688;
padding: 10px;
}

添加一个亚马逊跳转按钮

不少跨境电商企业有亚马逊店铺，所以希望自己独立站的产品介绍页面可以加一个跳转到亚马逊店铺的按钮，想要实现这个功能有 3 种方法。

1、填写产品简短描述的时候插入一个按钮。

2、通过类似上面分享的询盘按钮的方法添加一个代码。

3、通过插件。

代码方法：

这里可以采用的自定义字段的方式添加，首先在 woocommerce 的产品页面添加一个自定义字段，例如 amazon_link，然后在 amazon_link 的值里面填写亚马逊的网址。

接着把下面的代码添加到主题文件里面，可以直接使用 Code Snippets 插件添加。

add_action(‘woocommerce_single_product_summary’, ‘my_extra_button_on_product_page’, 30);

function my_extra_button_on_product_page() {
global $product;
if (get_post_meta(get_the_ID(), ‘amazon_link’, true) ){
echo ‘<a class=”amazon-button” href=”‘.get_post_meta(get_the_ID(), ‘amazon_link’, true).’” target=”_blank”>Buy on Amazon</a>’;
}

}
add_action(‘wp_head’, function () {?>
<style>
.product-desc li:before {
content: “f112”;
font: normal normal normal 16px/1 LineAwesome;
color: #f0494c;
}
.product-desc li {
list-style: none;
padding-bottom: 7px;
}
.product-desc ul {
padding-left: 0px;
}
</style>
<?php } );