前言

在國內外社群上每隔一段時間總是會有網友詢問如何自訂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產品頁自訂按鈕取代「加入購物車」的實作方法，若您在操作過程中遇到任何問題，歡迎透過右下角的聊天小泡泡與我們聯繫，或是直接在下方留言，或許也有人跟您遇到同樣的問題唷。