如何在WordPress網站上自定義WooCommerce Cart頁面

大多數電商網站都有一些常見的頁面：產品頁面、列出產品的商店頁面，以及用戶帳戶、結賬流程和購物車的頁面。

WooCommerce使得在WordPress網站上設置這些頁面變得非常簡單，因為它提供了相應的模板，並可以直接創建這些頁面。這使得您只需設置一些產品和支付處理細節，就能在幾分鐘內輕鬆啟動您的商店。 WooCommerce在這方面非常實用。

但這篇文章並非要讚揚WooCommerce的優點。相反，讓我們看看如何自定義它的一部分。具體來說，我想看看購物車。 WooCommerce具有極高的可擴展性，因為它提供了大量的過濾器和操作可以掛鉤，以及一種在WordPress主題中覆蓋模板的方法。問題是，這些至少需要一些中級開發技能，對於某些人來說可能不可行。而且，至少根據我的經驗，購物車頁面往往是最難理解和自定義的。

讓我們看看如何通過實現不同的佈局來更改WooCommerce購物車頁面。這是標準默認購物車頁面的外觀：

我們將改為如下所示：

不同之處在於：

• 我們採用了兩列佈局，而不是默認模板的單列全寬佈局。這使得我們可以在大屏幕上更清晰地顯示“購物車總計”元素。
• 我們通過在產品列表下方添加一些好處來增強客戶的信心。這提醒客戶他們的購買所獲得的價值，例如免費送貨、輕鬆換貨、客戶支持和安全性。
• 我們在產品列表下方以手風琴格式包含了一系列常見問題解答。這有助於客戶在無需離開並聯繫支持的情況下獲得有關其購買的答案。

本教程假設您可以訪問您的主題文件。如果您不熟悉登錄您的主機服務器並訪問文件管理器，我建議您安裝WP File Manager插件。只需使用免費版本，您就可以完成此處解釋的所有操作。

首先，讓我們創建自己的模板

WooCommerce的眾多優點之一是它為我們提供了預先設計和編碼的模板。問題是這些模板文件位於插件文件夾中。如果插件將來更新（這幾乎肯定會發生），我們對模板所做的任何更改都將丟失。由於直接編輯插件文件在WordPress中是大忌，WooCommerce允許我們通過在主題文件夾中復制這些文件來修改它們。只要我們在functions.php或功能插件中的某個位置執行此操作，這就會有效：

 <code>add_theme_support('woocommerce');</code>

在進行此類更改時，最好使用子主題，尤其是在使用第三方主題時。這樣，當發布主題更新時，對主題文件夾所做的任何更改都不會丟失。

為此，我們首先必須找到我們要自定義的模板。這意味著進入站點的根目錄（如果您在本地工作，則位於您保存站點文件的位置，這是一個好主意）並打開WordPress安裝位置的/wp-content。那裡有幾個文件夾，其中一個是/plugins。打開它，然後跳到/woocommerce文件夾。這是所有WooCommerce相關內容的主目錄。我們需要cart.php文件，它位於：

 <code>/wp-content/plugins/woocommerce/templates/cart/cart.php</code>

讓我們在一個代碼編輯器中打開該文件。您會注意到的第一件事是在文件頂部的幾行註釋：

 <code>/** * Cart Page * * This template can be overridden by copying it to yourtheme/woocommerce/cart/cart.php. // highlight * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce/Templates * @version 3.8.0 */</code>

突出顯示的行正是我們正在尋找的內容——關於如何覆蓋文件的說明！ WooCommerce團隊提前為我們注意到這一點真是太好了。

讓我們複製該文件並在主題中創建他們建議的文件路徑：

 <code>/wp-content/themes/[your-theme]/woocommerce/cart/cart.php</code>

將復制的文件放在那裡，我們就可以開始處理它了。

接下來，讓我們添加自己的標記

我們可以處理的前兩件事是我們之前確定的好處和常見問題解答。我們要將它們添加到模板中。

我們的標記放在哪裡？為了使佈局看起來像我們在這篇文章開頭所展示的那樣，我們可以在購物車的結束表格下方開始，如下所示：

 <code><?php do_action( &#39;woocommerce_after_cart_table&#39; ); ??></code>

我們不會介紹構成這些元素的特定HTML。重要的是要知道標記放在哪裡。

完成此操作後，我們應該得到如下所示的內容：

現在我們有了頁面上所有需要的元素。剩下的就是設置樣式，以便我們擁有兩列佈局。

好了，現在我們可以覆蓋CSS了

我們可以向模板添加更多標記來創建兩列。但是現有標記已經很好地組織起來，我們可以使用CSS來完成我們想要的操作……這要感謝flexbox！

第一步是使.woocommerce元素成為flex容器。它是包含我們所有其他元素的元素，因此它是一個很好的父元素。為了確保我們只在購物車中修改它而不是其他頁面（因為其他模板確實使用了此類），我們應該將樣式限定在購物車頁麵類中，WooCommerce也方便地提供了這個類。

 <code>.woocommerce-cart .woocommerce { display: flex; }</code>

這些樣式可以直接放在主題的style.css文件中。這就是WooCommerce建議的。但是，請記住，在WordPress中自定義樣式有很多方法，有些方法比其他方法更安全、更易於維護。

在.woocommerce元素中，我們有兩個子元素，非常適合我們的兩列佈局：.woocommerce-cart-form和.cart-collaterals。我們需要將內容分割開的CSS如下所示：

 <code>/* 包含产品列表和自定义元素的表格*/ .woocommerce-cart .woocommerce-cart-form { flex: 1 0 70%; /* 小屏幕上为100%；大屏幕上为70% */ margin-right: 30px; } /* 包含购物车总计的元素*/ .woocommerce-cart .cart-collaterals { flex: 1 0 30%; /* 小屏幕上为100%；大屏幕上为30% */ margin-left: 30px; } /* 一些小的调整，以确保购物车总计填满空间*/ .woocommerce-cart .cart-collaterals .cart_totals { width: 100%; padding: 0 20px 70px; }</code>

這給了我們一個相當乾淨的佈局：

它看起來更像亞馬遜的購物車頁面和其他流行的電商商店，這絕對不是一件壞事。

最佳實踐：使最重要的元素脫穎而出

我對WooCommerce默認設計的一個問題是所有按鈕的設計方式相同。它們的大小和背景顏色都相同。

用戶應該採取的操作沒有視覺層次結構，因此很難區分，例如，如何更新購物車與繼續結賬。我們接下來應該做的是通過更改按鈕的背景顏色來使這種區別更清晰。為此，我們編寫以下CSS：

 <code>/* “应用优惠券”按钮*/ .button[name="apply_coupon"] { background-color: transparent; color: #13aff0; } /* 填充“应用优惠券”按钮背景颜色并在悬停时下划线*/ .button[name="apply_coupon"]:hover { background-color: transparent; text-decoration: underline; } /* “更新购物车”按钮*/ .button[name="update_cart"] { background-color: #e2e2e2; color: #13aff0; } /* 悬停时使按钮更亮*/ .button[name="update_cart"]:hover { filter: brightness(115%); }</code>

這樣，我們就創建了以下層次結構：

1. “繼續結賬”幾乎保持原樣，使用默認的藍色背景顏色，使其脫穎而出，因為它是購物車中最重要的操作。
2. “更新購物車”按鈕獲得灰色背景，與頁面的白色背景融合在一起。這降低了它的優先級。
3. “應用優惠券”更像是一個文本鏈接，而不是一個按鈕，使其成為這三個操作中不那麼重要的操作。

您必須添加以創建此設計的完整CSS如下：

 <code>@media(min-width: 1100px) { .woocommerce-cart .woocommerce {  display: flex; } .woocommerce-cart .woocommerce-cart-form {  flex: 1 0 70%;  margin-right: 30px; }   .woocommerce-cart .cart-collaterals {  flex: 1 0 30%;  margin-left: 30px; } } .button[name="apply_coupon"] { background-color: transparent; color: #13aff0; } .button[name="apply_coupon"]:hover { text-decoration: underline; background-color: transparent; color: #13aff0; } .button[name="update_cart"] { background-color: #e2e2e2; color: #13aff0; } .button[name="update_cart"]:hover { background-color: #e2e2e2; color: #13aff0; filter: brightness(115%); }</code>

總結！

還不錯吧？ WooCommerce 的可擴展性很好，但是如果沒有一些通用的指導，可能很難知道您可以自定義多少內容。在本例中，我們看到瞭如何覆蓋主題目錄中的插件購物車模板以使其免受未來更新的影響，以及如何在自己的樣式表中覆蓋樣式。我們還可以考慮使用WooCommerce 掛鉤、WooCommerce API，甚至使用WooCommerce 條件來簡化自定義，但這些可能適合以後的文章。

同時，享受自定義WordPress 網站上的電子商務體驗的樂趣，並隨時在WooCommerce 文檔中花一些時間——那裡有很多好東西，包括各種各樣事情的預製代碼片段。

以上是如何在WordPress網站上自定義WooCommerce Cart頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！