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

发布时间:2022-09-08 14:09 来源:主机侦探 阅读:158 作者:主机侦探 栏目: 经验分享 欢迎投稿:712375056

大多数使用美国主机商的站长朋友基本都会使用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 } );

保存完毕之后,当填写了亚马逊url的产品,前台就会多出来一个亚马逊的按钮,没有添加的则不会显示。

以上就是关于WooCommerce购物按钮下方添加询盘按钮教程介绍,希望对广大站长们有所帮助,有需要的小伙伴可以继续关注本站了解。

推荐:《WooCommerce设置教程:帐户和隐私设置》

来源链接:https://www.idcspy.com/34053.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

免责声明:本站发布的内容(图片、视频和文字)以原创、来自本网站内容采集于网络互联网转载等其它媒体和分享为主,内容观点不代表本网站立场,如侵犯了原作者的版权,请告知一经查实,将立刻删除涉嫌侵权内容,联系我们QQ:712375056,同时欢迎投稿传递力量。