如何在 WooCommerce 中添加自定義添加到購物車按鈕

已發表: 2022-08-11

想了解如何在 WooCommerce 中添加自定義添加到購物車按鈕？

在您的 WooCommerce 商店上自定義按鈕可以幫助您吸引註意力，提高轉化率和銷售額。

在本文中，我們將逐步向您展示如何在 WooCommerce 中添加自定義添加到購物車按鈕。

為什麼要自定義您的 WooCommerce 添加到購物車按鈕？

編輯您的添加到購物車按鈕可幫助您將其與您銷售的 WooCommerce 產品對齊。如果您堅持使用默認的購物車按鈕，它可能與產品類型完全無關。

例如，您可能想要更改添加到購物車的文本並將其替換為多個產品的圖標或複選框。或者，您可能希望更改按鈕顏色以在您的網站上更加突出。

您可能還想在 WooCommerce 網站的其他地方顯示購物車按鈕，例如結帳頁面、類別和購物車頁面。

要執行上述任何操作，您需要一種輕鬆自定義添加到購物車按鈕的方法，而無需大驚小怪。

如何在 WooCommerce 中添加自定義添加到購物車按鈕

幸運的是，我們分享了 2 種創建 WooCommerce 自定義添加到購物車按鈕的方法。第一種方法使用簡單而強大的 WordPress 插件，第二種方法向您展示如何在沒有插件的情況下手動自定義購物車按鈕。

方法 1：使用 SeedProd 添加自定義添加到購物車按鈕
方法 2：使用代碼添加自定義添加到購物車按鈕

方法 1：使用 SeedProd 添加自定義添加到購物車按鈕

對於第一種方法，我們將使用 SeedProd，這是 WordPress 的最佳網站構建器。

這個功能強大的插件包括一個拖放頁面構建器，可讓您無需代碼即可自定義網站的任何部分。您可以創建自定義 WordPress 主題，創建高轉化率的登錄頁面，並通過點擊自定義任何佈局。

由於 SeedProd 包含 WooCommerce 支持，您可以使用它來設計和啟動整個 WooCommerce 網站，而無需開發人員。按照以下步驟使用 SeedProd 將自定義添加到購物車按鈕添加到您的 WooCommerce 網站。

步驟 1. 安裝並激活 SeedProd

首先，前往 SeedProd 定價頁面並選擇您的 SeedProd 計劃。要訪問 WooCommerce 功能，您需要SeedProd Elite計劃。

接下來，登錄您的 SeedProd 帳戶，單擊下載選項卡並下載插件 .zip 文件。您也可以在同一頁面上複製許可證密鑰。

現在您可以將插件上傳到您的 WordPress 網站。如果您需要這方面的幫助，請按照本指南安裝和激活 WordPress 插件。

安裝 SeedProd 後，轉到SeedProd » 設置頁面並粘貼您之前保存的許可證密鑰。

確保在進行下一步之前單擊“驗證密鑰”按鈕。

注意： SeedProd 允許您通過 2 種方式將自定義添加到購物車按鈕添加到 WooCommerce：

使用登陸頁面
創建自定義 WooCommerce 主題

對於本教程，我們將創建一個自定義 WooCommerce 主題，因為它會自動創建您的所有 WooCommerce 商店頁面。

步驟 2. 選擇網站工具包

對於下一步，導航到SeedProd » Theme Builder頁面。在這裡，您可以構建 WooCommerce 主題的不同部分並自定義每個模板的設計。

您可以通過從頭開始構建每個部分或使用預製的網站工具包來做到這一點。我們將使用第二個選項，因為它更容易更快。

要選擇網站工具包，請單擊主題按鈕。

在下一個屏幕上，您將看到可用的網站工具包。 WooCommerce 兼容套件的標題旁邊將有“WooCommerce”。

然後，您可以將鼠標懸停在您喜歡的設計上，然後單擊複選標記圖標將其導入您的主題生成器。

對於本指南，我們使用的是Pottery Shop WooCommerce網站工具包。

導入您的網站工具包後，您將在如下列表中看到主題的各個部分：

SeedProd 會自動創建內容頁面，例如您的關於、購物車、結帳和聯繫頁面。您可以通過從 WordPress 儀表板轉到頁面» 所有頁面來查看這些頁面，並使用 SeedProd 的拖放頁面構建器對其進行自定義。

讓我們通過自定義您的 WooCommerce 添加到購物車按鈕開始自定義過程。

第 3 步。自定義您的添加到購物車按鈕

下面我們將向您展示如何在您的商店、產品、產品檔案和博客頁面上的 WooCommerce 中添加自定義添加到購物車按鈕。

添加自定義商店頁面添加到購物車按鈕

首先，我們將從編輯您的 WooCommerce 商店頁面開始。為此，請找到Shop Page模板部分並單擊Edit Design鏈接。

您的 WooCommerce 商店頁面將在 SeedProd 的拖放頁面構建器中打開，您可以在其中自定義您的設計而無需代碼。

您可以單擊實時預覽來編輯任何頁面元素並自定義其設置。同樣，您可以將塊從左側面板拖放到您的頁面上以添加更多內容。

默認情況下，商店頁面模板使用產品網格塊。單擊它將顯示設置以控制產品列表的外觀。

例如，您可以更改列數、按產品 ID、查詢或類型過濾產品，並更改它們顯示的順序。

您還可以單擊“高級”選項卡以查看更多自定義選項，包括字體樣式、顏色、邊框等。

在按鈕部分下，您只需單擊幾下即可自定義 WooCommerce 添加到購物車按鈕。例如，在按鈕樣式下拉菜單下，您可以選擇：

平坦的
二維
優質的
鬼
關聯

此外，您可以更改按鈕顏色、版式、大小和邊框半徑。

嘗試自定義選項以找到適合您業務需求的外觀。然後，點擊右上角的保存按鈕以存儲您的更改，然後單擊 X 圖標返回主題生成器。

更改產品頁面添加到購物車按鈕

現在讓我們看看在單個產品頁面上自定義添加到購物車按鈕。您需要找到產品頁面模板並單擊編輯設計鏈接將其打開。

這一次，您將在 SeedProd 的可視化編輯器中看到單個產品的詳細信息。

默認情況下，它將顯示：

產品圖片
產品名稱
產品價格
簡短的介紹
添加到購物車按鈕
產品數據選項卡

您可以通過單擊它們來自定義每個元素以顯示它們的設置。例如，單擊添加到購物車按鈕可讓您將按鈕文本更改為更具吸引力的內容。

您還可以更改按鈕對齊方式並從 Font Awesome 圖標庫添加圖標。

高級選項卡可讓您像以前一樣更改按鈕顏色、版式、陰影和間距。

編輯您的產品檔案購物車按鈕

更改產品檔案上的添加到購物車按鈕遵循與您的商店頁麵類似的過程。只需找到Product Archives模板部分，然後單擊Edit Design鏈接即可在可視化編輯器中打開它。

SeedProd 在此頁面上使用的塊是存檔產品塊。如果用戶單擊產品類別標題或使用您商店的搜索欄，他們將看到此頁面。

此塊不會在實時可視化編輯器中顯示預覽；但是，您仍然可以通過打開其設置來自定義塊在前端顯示的內容。

例如，您可以更改列數、按計數顯示項目以及按過濾器排序。此外，您可以啟用按查詢過濾，例如：

按屬性查詢
按標籤選擇
按類別選擇
按產品 SKU 選擇
按組選擇
按可見性選擇

然後在“高級”選項卡中，您可以通過更改顏色、字體、間距、大小等來自定義添加到購物車按鈕。

在博客頁面上添加自定義添加到購物車按鈕

您的博客頁面是另一個可以顯示添加到購物車按鈕的地方。這樣，您可以在博客文章之後推薦產品以促進銷售。

要使用 SeedProd 執行此操作，請找到博客頁面模板並單擊編輯設計鏈接。

默認情況下，您的博客頁面將顯示您最新的博客文章列表，但您可以對其進行自定義以包含您喜歡的任何其他內容。

讓我們在此頁面中添加一個展示新產品的部分。首先，將列塊拖到頁面上，然後選擇列佈局。

接下來，選擇圖像塊並添加產品圖像。

在第二列中，您可以使用標題和段落塊作為產品標題和描述。然後，拖動添加到購物車按鈕，以便用戶可以將產品添加到他們的購物車。

現在，單擊該塊以打開其設置並添加您的自定義添加到購物車按鈕文本。

您還需要該特定產品的產品 ID。您可以通過從 WordPress 儀表板轉到產品 » 所有產品並複制 ID 值來找到它。

之後，您可以將 ID 粘貼到添加到購物車按鈕上的產品 ID 字段中。這將確保在單擊添加到購物車 URL 後將特定產品添加到您的購物車中。

請記住單擊“保存”按鈕以保存您的更改。

第 4 步。保存並發布您的更改

當您對 WooCommerce 頁面的外觀感到滿意時，您就可以讓您的商店上線了。為此，請返回主題生成器，然後在右上角，將啟用 SeedProd 主題切換到“打開”位置。

讓我們看一下我們自定義的一些頁面：

商店頁面

產品頁面

存檔頁面

博客頁面

方法 2：使用代碼添加自定義添加到購物車按鈕

我們將向您展示的下一個方法涉及更改 WordPress 網站上的代碼。如果您是初學者，我們通常不建議您這樣做，因為它可能會破壞您的網站。

也就是說，我們知道有些人不想完全覆蓋他們現有的網站設計。

在開始之前，我們建議您創建一個子主題，以確保您在更新 WordPress 主題時不會丟失所做的更改。如果出現任何問題，您還應該備份您的 WordPress 網站以安全地恢復它。

因為我們將為此方法處理代碼片段，所以最好安裝一個代碼片段插件，例如 WPCode。這意味著您無需直接編輯主題文件。

一切準備就緒後，您可以開始在 WooCommerce 中手動添加自定義添加到購物車按鈕。

更改產品頁面上的添加到購物車按鈕文本

首先，我們將看看在 WooCommerce 中更改添加到購物車按鈕的文本。例如，您可能希望將按鈕文本更改為“購買此商品”。

為此，請在 WPCode 中創建自定義代碼片段並粘貼以下 PHP 代碼：

add_filter('woocommerce_product_single_add_to_cart_text','SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce(){
return __('Buy this item', 'woocommerce');
}

保存您的更改，然後當您查看單個產品時，您將看到新的添加到購物車按鈕文本。

更改添加到購物車按鈕的顏色

如果要更改添加到購物車按鈕的顏色，則需要添加一些自定義 CSS。您可以通過從 WordPress 儀表板轉到外觀 » 自定義 » 附加 CSS來執行此操作。

現在粘貼以下 CSS 代碼：

.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

您可以通過粘貼以下 CSS 代碼段對您的產品存檔頁面執行相同操作：

.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}

你有它！

我們希望本文能幫助您了解如何在 WooCommerce 中添加自定義添加到購物車按鈕。

您可能還喜歡這篇文章：如何在 WordPress 中編輯菜單以進行自定義導航。

準備好自定義您的 WooCommerce 添加到購物車按鈕了嗎？

立即開始使用 SeedProd

謝謝閱讀。請在 YouTube、Twitter 和 Facebook 上關注我們，獲取更多有用的內容來發展您的業務。