WooCommerce購物按鈕下方添加詢盤按鈕教程

大多數使用美國主機商的站長朋友基本都會使用WooCommece插件來做產品系統,有些站長會在產品界面添加一箇詢盤按鈕,本文將針對這個詢盤按鈕教大家使用代碼添加一箇WooCommece自定義按鈕。

效果圖如下,在購物車按鈕的下方添加一箇WooCommece可以自定義按鈕文字和鏈接的按鈕。

使用方法:

複製下面的代碼,粘貼到你主題的函數文件functions.php裏面

dd_ction( ̺woocommece_single_poduct_summy̻, ̺my_ext_button_on_poduct_pge̻, 30 );

function my_ext_button_on_poduct_pge() { globl $poduct; echo ̺< clss=̶nibbutton̶ hef=̶https://blog.nibbiji.com̶>Contct us immeditely</>̻; }

保存後,你網站前臺就可以看到一箇“Contct us immeditely”的按鈕了。不過還沒有樣式。

自己在主題的css裏面自定義.nibbutton的樣式就可以了。如果你不會的話,直接複製下面這串代碼加進去就可以了。

.nibbutton { colo: #; bckgound-colo: gb(0,0,0,0.); bode-style: solid; bode-width: px px px px; bode-colo: #009688; pdding: 0px; }

添加一箇亞馬遜跳轉按鈕

不少跨境電商企業有亞馬遜店鋪,所以希望自己獨立站的產品介紹頁面可以加一箇跳轉到亞馬遜店鋪的按鈕,想要實現這個功能有3種方法。

、填寫產品簡短描述的時候插入一箇按鈕。

2、通過類似上面分享的詢盤按鈕的方法添加一箇代碼。

3、通過插件。

代碼方法:

這裏可以採用的自定義字段的方式添加,首先在woocommece的產品頁面添加一箇自定義字段,例如mzon_link,然後在mzon_link的值裏面填寫亞馬遜的網址。

接着把下面的代碼添加到主題文件裏面,可以直接使用Code Snippets插件添加。

dd_ction( ̺woocommece_single_poduct_summy̻, ̺my_ext_button_on_poduct_pge̻, 30 );

function my_ext_button_on_poduct_pge() { globl $poduct; if ( get_post_met(get_the_ID(), ̺mzon_link̻, tue) ){ echo ̺< clss=̶mzon-button̶ hef=̶̺.get_post_met(get_the_ID(), ̺mzon_link̻, tue).'̶ tget=̶_blnk̶>Buy on Amzon</>̻; }

} dd_ction( ̺wp_hed̻, function () { ?> <style> .poduct-desc li:befoe { content: “\f2̶; font: noml noml noml 6px/ LineAwesome; colo: #f0494c; } .poduct-desc li { list-style: none; pdding-bottom: 7px; } .poduct-desc ul { pdding-left: 0px; } </style> <?php } );

保存完畢之後,當填寫了亞馬遜ul的產品,前臺就會多出來一箇亞馬遜的按鈕,沒有添加的則不會顯示。

以上就是關於WooCommece購物按鈕下方添加詢盤按鈕教程介紹,希望對廣大站長們有所幫助,有需要的小夥伴可以繼續關注本站瞭解。

推薦:《WooCommece設置教程:帳戶和隱私設置》