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;
}

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

推荐:《WooCommerce使用教程》

分享到 :
相关推荐

个人web服务器要用哪种服务器比较好(个人web服务器要用哪种服务器比较好用)

个人web服务器要用哪种服务器比较好?小编建议个人用服务器选择云服务器。首先云服务器...

站群服务器多ip租用有哪些优势(站群服务器多ip怎么使用)

站群服务器多ip租用的优势有:1。有利于搜索引擎收录。提高网站权重;2。能减少网站被...

云服务器怎么清理硬盘(云服务器怎么清理硬盘空间)

云服务器清理硬盘的方法步骤:1.在云桌面打开WIN菜单。2.找到Windows管[&...

美国服务器稳定性的影响因素有哪些(美国服务器稳定性的影响因素有哪些呢)

美国服务器稳定性的影响因素有:1。美国服务器的网络物理设备。网络物理设备存在问题会[...

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注