怎么在WooCommerce购物按钮下方添加一个按钮?

很多外贸建站的朋友都使用的WooCommerce这个插件来做产品系统,而一些2b的网站希望在产品界面添加一个联系按钮或者询盘按钮,前面给大家介绍过几款询盘按钮插件,本文给大家分享一下如何使用代码在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;
}

懒得研究?付费帮你解决。联系我

请求帮助:亲戚脑出血进ICU病房抢救,家庭负担极重,恳请您的帮助,1元2元也是一份支持,谢谢大家。

Scroll to Top