WooCommerce購物按鈕下方添加詢(xún)盤(pán)按鈕教程

發(fā)布時(shí)間：2022-09-08 14:09 來(lái)源：主機偵探閱讀：158 作者：主機偵探欄目：經(jīng)驗分享歡迎投稿：712375056

大多數使用美國主機商的站長(cháng)朋友基本都會(huì )使用WooCommerce插件來(lái)做產(chǎn)品系統，有些站長(cháng)會(huì )在產(chǎn)品界面添加一個(gè)詢(xún)盤(pán)按鈕，本文將針對這個(gè)詢(xún)盤(pán)按鈕教大家使用代碼添加一個(gè)WooCommerce自定義按鈕。

效果圖如下，在購物車(chē)按鈕的下方添加一個(gè)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>’;
}

保存后，你網(wǎng)站前臺就可以看到一個(gè)“Contact us immediately”的按鈕了。不過(guò)還沒(méi)有樣式。

自己在主題的css里面自定義.naibabutton的樣式就可以了。如果你不會(huì )的話(huà)，直接復制下面這串代碼加進(jìn)去就可以了。

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

添加一個(gè)亞馬遜跳轉按鈕

不少跨境電商企業(yè)有亞馬遜店鋪，所以希望自己獨立站的產(chǎn)品介紹頁(yè)面可以加一個(gè)跳轉到亞馬遜店鋪的按鈕，想要實(shí)現這個(gè)功能有3種方法。

1、填寫(xiě)產(chǎn)品簡(jiǎn)短描述的時(shí)候插入一個(gè)按鈕。

2、通過(guò)類(lèi)似上面分享的詢(xún)盤(pán)按鈕的方法添加一個(gè)代碼。

3、通過(guò)插件。

代碼方法：

這里可以采用的自定義字段的方式添加，首先在woocommerce的產(chǎn)品頁(yè)面添加一個(gè)自定義字段，例如amazon_link，然后在amazon_link的值里面填寫(xiě)亞馬遜的網(wǎng)址。

接著(zhù)把下面的代碼添加到主題文件里面，可以直接使用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(), ‘a(chǎn)mazon_link’, true) ){
echo ‘<a class=”amazon-button” href=”‘.get_post_meta(get_the_ID(), ‘a(chǎn)mazon_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 } );

保存完畢之后，當填寫(xiě)了亞馬遜url的產(chǎn)品，前臺就會(huì )多出來(lái)一個(gè)亞馬遜的按鈕，沒(méi)有添加的則不會(huì )顯示。

以上就是關(guān)于WooCommerce購物按鈕下方添加詢(xún)盤(pán)按鈕教程介紹，希望對廣大站長(cháng)們有所幫助，有需要的小伙伴可以繼續關(guān)注本站了解。

推薦：《WooCommerce設置教程：帳戶(hù)和隱私設置》

來(lái)源鏈接：https://www.idcspy.com/34053.html

本站聲明:網(wǎng)站內容來(lái)源于網(wǎng)絡(luò ),如有侵權,請聯(lián)系我們,我們將及時(shí)處理。

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。