如何在 Divi 商店頁面中添加添加到購物車按鈕

已發表: 2020-06-21

您是否使用 Divi 並想自定義您的商店頁面？ 在本教程中，您將學習如何在 Divi 商店頁面中包含“添加到購物車”按鈕。

如果您打算開一家網店，WooCommerce 是最簡單、最快捷的方式。 即使您不是開發人員，一些優秀的 WooCommerce 主題也可以幫助您入門並增強商店的功能。 最好的選擇之一是 Divi。

為什麼要在商店頁面中包含“添加到購物車”按鈕？

Divi 主題是 WooCommerce 商店最受歡迎的選擇之一。 這是一個非常靈活的主題，具有許多強大的功能。 但是，一個缺點是商店頁面上的產品沒有“添加到購物車”按鈕。 這在購買渠道中增加了一個步驟，並可能影響轉化。 好消息是有辦法解決這個問題。

在本指南中，我們將向您展示如何輕鬆地將添加到購物車按鈕添加到 Divi 商店頁面。

如何在 Divi 中添加添加到購物車按鈕？

在這裡，我們將向您展示在 Divi 中包含“添加到購物車”按鈕的最簡單和最有效的方法。 儘管我們將對主題的核心文件進行一些更改，但即使對於初學者來說，這些方法也很容易遵循。

在商店頁面中添加“添加到購物車”按鈕的主要兩種方法是：

  1. 修改functions.php文件
  2. 使用代碼片段插件

這兩種方法都適合初學者，並允許您立即添加“添加到購物車”按鈕。

在我們開始之前

在開始之前，我們建議您：

  • 生成完整的備份以防出現問題。
  • 創建子主題：我們不建議直接修改主題的文件。 相反，您可以創建一個子主題並對其進行更改。 有不同的方法可以做到這一點。 在本教程中，我們將使用一個插件。

1) 包括來自 functions.php 的添加到購物車按鈕

創建子主題

在我們在 Divi 中添加 Add to Cart 按鈕之前，您需要創建一個子主題。 為此，我們將使用一個名為 Child Themify 的免費 WordPress 插件。 因此，首先，您需要在您的網站上安裝 Child Themify。

然後，激活它。

之後，您將在外觀部分下看到插件的設置。

從下拉列表中，您需要選擇一個父主題。 在我們的例子中，我們將為 Divi 創建一個子主題。 然後，命名您的新子主題。

還有一些高級選項，但您不需要為此使用它們。

選擇父主題並命名子主題後，按創建子主題按鈕。

之後，轉到外觀 > 主題部分，您將看到新的子主題。 激活它。

現在，檢查您商店的商店頁面。 在我們的案例中，我們使用一些示例產品創建了一個演示商店。

正如您在上面的屏幕截圖中看到的，沒有添加到購物車按鈕。 因此，當用戶想要將產品添加到購物車時，他們不能直接從商店頁面進行。 相反，他們必須轉到特定的產品頁面並將商品從那裡添加到購物車。

好消息是，有一種簡單的方法可以在商店頁面上添加“添加到購物車”按鈕。 為此，您需要向子主題添加幾行代碼。

更改functions.php文件

要在 Divi 的商店頁面上包含 Add to Cart 按鈕，請轉到主題編輯器，然後選擇functions.php文件。 複製下面的代碼並將其粘貼到您的functions.php文件中。

 // 此代碼將“添加到購物車”按鈕添加到顯示商店循環的頁面
add_action（'woocommerce_after_shop_loop_item'，'woocommerce_template_loop_add_to_cart'，20）；

Divi 中的添加到購物車按鈕 - PHP 腳本

粘貼代碼後，單擊更新文件。 如果您檢查商店頁面前端，您將看到更改。

使用 php 在 Divi 中添加到購物車按鈕

您已將添加到購物車按鈕添加到商店頁面！

2) 代碼片段插件

或者，您可以使用插件在 Divi 中包含“添加到購物車”按鈕，而不是更新functions.php文件。 根據我們在 WordPress 和自定義方面的經驗，代碼片段是完成這項任務的最佳工具之一。

首先，您需要在您的站點上安裝並激活 Code Snippets 插件。

代碼片段插件包括在 Divi 中添加到購物車按鈕

然後，您需要向您的網站添加一個新的代碼段。

只需為您的代碼段命名以進行識別，從下面複製代碼並將其粘貼到代碼字段中。

 // 此代碼將包含“添加到購物車”按鈕到顯示商店循環的頁面
add_action（'woocommerce_after_shop_loop_item'，'woocommerce_template_loop_add_to_cart'，20）；

然後，保存並激活代碼段。

再次，您將在商店頁面上看到“添加到購物車”按鈕。

Divi 商店頁面中的添加到購物車按鈕

如您所見，這兩種方法都非常簡單有效。 如果您是初學者，我們建議您使用代碼片段。 它是一個免費工具，可讓您輕鬆修改核心文件，並且不會破壞您的網站。

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

現在您已經成功地在 Divi 商店頁面中包含了“添加到購物車”按鈕，您需要自定義該按鈕。

為此，您必須為您的按鈕指定一個自定義 CSS 類。 一個簡單的 PHP 代碼就可以完成這項工作。 然後，您可以添加一些 CSS 並自定義按鈕。

因此，要做到這一點，請將下面的 PHP 代碼粘貼到代碼片段部分作為新代碼。

 add_action（'woocommerce_after_shop_loop_item'，'quadlayers_woocommerce_template_loop_add_to_cart'，10）；
add_action（'woocommerce_after_shop_loop_item_title'，'quadlayers_woocommerce_template_loop_add_to_cart'，10）；

函數 quadlayers_woocommerce_template_loop_add_to_cart(){
   woocommerce_template_loop_add_to_cart(array('class'=>'button product_type_simple add_to_cart_button ajax_add_to_cart my_class_here')); 
}

然後，您可以使用 CSS 來修改按鈕。 在這段代碼中，我們提到了按鈕的默認 CSS 類，例如： button product_type_simple add_to_cart_button ajax_add_to_cart 。 此外，您可以通過替換my_class_here添加自定義 CSS 類。

當你在你的主題中包含額外的 CSS 時，你可以使用類似的東西： .my_class { option:value !important; } .my_class { option:value !important; } 。 確保您將my_class替換為您的 CSS 類。

例如，您可以使用這樣的 CSS 代碼：

 .woocommerce-LoopProduct-link + {
    /* 這裡是你的自定義 CSS */
}

Divi 主題帶有自定義 CSS 編輯器，您可以將所有 CSS 代碼粘貼到那裡。 另一方面，您可以通過 WordPress 定制器使用附加的 CSS 部分。 我們建議使用定制器，因為它可以讓您實時查看您在做什麼。

結論

因此，這就是您可以輕鬆地在 Divi 商店頁面中包含“添加到購物車”按鈕的方法。 這樣，您可以改進購買流程，為客戶提供更好的體驗，並提高轉化率。 此外，它將幫助您減少商店中的購物車遺棄。

另一個增加商店轉化率的有趣選擇是在商店中包含直接結帳鏈接。 這樣，您可以縮短購買過程並減少用戶流失的機會。 有關這方面的更多信息，請查看我們關於如何創建 WooCommerce 直接結帳鏈接的指南。

此外，如果您想自定義商店，我們建議您查看以下教程：

  • 如何自定義 WooCommerce 商店頁面？
  • 在 WooCommerce 中以編程方式添加到購物車功能
  • 如何在 WooCommerce 中實現 AJAX 添加到購物車按鈕？
  • 如何自定義 WooCommerce 結帳頁面？

最後，為了充分利用 Divi Theme，您可以查看我們的指南：

  • 如何在 Divi 中隱藏和刪除頁腳？
  • Divi 聯繫表不起作用？ 這是解決方法！

如果您覺得這篇文章有幫助，請考慮在社交媒體上與您的朋友分享這篇文章。 它將幫助其他人自定義 Divi 商店頁面。

有關如何提高轉化率的更多信息，請查看最好的 WooCommerce 快速購買插件。