Hello,It’s Help
Try to search「 Custom Product Page ButtonCan't upload images on Woo App?Whiat is 'XML-RPC'? 」
前言
在國內外社群上每隔一段時間總是會有網友詢問如何自訂Woocommerce產品頁的「加入購物車」按鈕,謙姸提供下面方法來實現此功能。
實作
我們將「刪除按鈕」與「加入自訂按鈕」分為兩步驟。
第一步我們先決定是要刪除所有產品的按鈕,還是單一產品的按鈕。
第二步我們再將自訂按鈕加入單一產品頁中。
第一步:刪除「加入購物車」
由於「數量選擇器」是搭配「加入購物車」按鈕一起運作,因此下列實作皆會一併將兩者刪除。
謙姸使用單純的CSS進行刪除。
方法一:隱藏單一產品頁的「數量選擇器」與「加入購物車」
要隱藏「單一」產品頁的按鈕,僅需在單一產品頁中加入CSS代碼即可。
預設的產品編輯頁面並沒有可以嵌入CSS的地方,因此需要透過外掛來嵌入,請您至「安裝外掛」頁面中搜尋「PixelYourSite」,此外掛除了能設定您的Meta Pixel(Facebook Pixel)與Google Anatics 4(GA4)之外,還可以將HTML嵌入單一頁面。
請先安裝「PixelYourSite」,安裝後請啟用此外掛。
*注意,此外掛在下一篇「自訂按鈕」會再次使用。
完成後即可在單一頁面嵌入HTML,請到要刪除按鈕的產品編輯頁面,然後滑到最下方,您會看到「PixelYourSite」的設定畫面。
下方提供多個可以讓您嵌入HTML的端點,我們選擇「Footer (any device type)」,並插入下列代碼:
<style>
.quantity,.single_add_to_cart_button{
display:none !important;
}
</style>
填入後如下圖所示,請依上方程式碼為主:
完成後請案發佈,此產品的「數量選擇器」與「加入購物車」就會被隱藏。
接下來您可以進入加入自訂按鈕的教學了。
遇到無法移除的情況嗎?請在底下留言,或在官網右下角的聊天泡泡請求支援。
方法二:隱藏全域的「數量選擇器」與「加入購物車」
若您要將所有產品的「數量選擇器」與「加入購物車」都移除,請至「安裝外掛」頁面搜尋「Header Footer Code Manager」(HFCM),安裝後請啟用此外掛。
啟用後請至WordPress後台的左側選單中點選「HFCM」,即可進入此外掛的設定介面。
進入後請點擊「新增程式碼片段」。
接著,請依下圖進行設定。
完成後請往下滑,複製下方代碼,請依下方程式碼為主,並貼到程式碼區塊中。
<style>
.quantity,.single_add_to_cart_button{
display:none !important;
}
</style>
完成後請按下儲存,網站中的所有產品的「數量選擇器」與「加入購物車」即會被移除。
遇到無法移除的情況嗎?請在底下留言,或在官網右下角的聊天泡泡請求支援。
為什麼不直接刪除
第二步:加入自訂按鈕
這裡謙姸示範加入的是「蝦皮導購按鈕」,並將按鈕加在「商品簡短描述」區塊中,如下圖所示:
接著我們來實作按鈕樣式吧!
再開始製作按鈕之前,請先至WordPress後台「安裝外掛」頁面搜尋「PixelYourSite」,安裝後啟用此外掛。
啟用後我們先進行下一步,待會會用到此外掛。
此篇文章不會提供您如何自製按鈕,請到這個神奇的地方尋找自己喜歡的按鈕吧!
尋找到自己喜歡的按鈕後,點擊一下按鈕,即可複製此按鈕的代碼資訊。
複製後,請先將代碼貼到一個暫時的地方,因為複製下來的代碼不能直接使用。
我們以下方圈起來的按鈕做示範,複製下來的代碼如下:
<!-- HTML !-->
<button class="button-5" role="button">Button 5</button>
/* CSS */
.button-5 {
align-items: center;
background-clip: padding-box;
background-color: #fa6400;
border: 1px solid transparent;
border-radius: .25rem;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
min-height: 3rem;
padding: calc(.875rem - 1px) calc(1.5rem - 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: auto;
}
.button-5:hover,
.button-5:focus {
background-color: #fb8332;
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}
.button-5:hover {
transform: translateY(-1px);
}
.button-5:active {
background-color: #c85000;
box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
transform: translateY(0);
}
在這段複製下來的程式碼中,我們需要將上半部<!–HTML–>區塊插入「產品簡短說明」區塊當中,
請複製上方程式碼的黃色部份,並在「產品簡短說明」的「文字」標籤中貼上,如下圖所示:
接著您可以切換到「預覽」標籤查看按鈕是否順利插入。
按鈕正確插入後,我們來設定按鈕的外觀,現在我們滑到產品編輯頁面的最下面,您會看到「PixelYourSite」的設定區塊,請在此區塊中尋找「Footer (any device type)」的代碼框。
在此代碼框中貼上上方的CSS代碼(粉色字),並在代碼的最前面加上<style>,在代碼的最後面加上</style>,如下圖所示:
完成後,按下更新按鈕,即可在前台查看是否出現按鈕。
確認出現按鈕後,最後一步就是將我們的連結加入按鈕啦!
最後:設定按鈕的連結
現在產品的自訂按鈕我們已經做好也已經放置在產品頁中了,目前直接點擊按鈕直不會有任何反應的,因為我們很沒有設定這個按鈕的連結,現在我們要將連結加進按鈕中,我們以上方黃色代碼為範例,要加入連結,只需加入下方反白代碼:
<button class="button-5" role="button" onclick="location.href='要前往的網頁連結'">Button 5</button>
並將自訂網址放在「要前往的網頁連結」裡面即可。
下方是範例:
<button class="button-5" role="button" onclick="location.href='https://www.google.com/'">Button 5</button>
我們在上面的範例中將Google官網的網址加入到按鈕中,現在這個按鈕點下去就會跳到Google的官網了。
結論
以上就是今天針對Woocommerce產品頁自訂按鈕取代「加入購物車」的實作方法,若您在操作過程中遇到任何問題,歡迎透過右下角的聊天小泡泡與我們聯繫,或是直接在下方留言,或許也有人跟您遇到同樣的問題唷。