WooCommerce购物按钮下方添加一个按钮教程

2025-05-25 0 19

之前小编有为大家介绍过《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;
}

以上就是WooCommerce购物按钮下方添加一个按钮教程介绍,不会的小伙伴学会了吗,后期小编也会继续添加关于WooCommerce相关教程。

推荐:《WooCommerce使用教程》

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 WooCommerce购物按钮下方添加一个按钮教程 https://www.kuaiidc.com/15385.html

相关文章

发表评论
暂无评论