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使用教程》

分享到 :
相关推荐

云主机免备案是什么(免备案云主机租用)

我们都知道国内网站都需要备案才能开通使用,如果网站没有备案,在使用上也会受到很多限制...

2630v3配什么主板(e52603v3用什么主板)

大家好,今天来介绍2630v3配什么主板(至强e52630v3配什么主板)的问题,以...

香港IP服务器有哪些优势(香港ip服务器有哪些优势)

香港IP服务器的优势:1.香港服务器的多IP便于搜索引擎收录。一个网站有一个IP。[...

新西兰服务器哪家的好用(新西兰服务器哪家的好用点)

作为IT管理员在选择新西兰服务器时。面对市面上这么多新西兰IDC服务商。会陷入选择困...

发表评论

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