使用 Divi 的 Fashion Layout Pack 通過 WooCommerce 創建在線商店

Divi 的新時尚佈局包為任何在線商店提供了很好的設置。 商店模塊的集成和頁面佈局的組織為您提供了一個重要的開端。 但是為了讓這個佈局作為一個功能性的在線商店運行起來，我們需要 WooCommerce 插件。 而且，您可能會對 Divi 和 WooCommerce 的協同工作感到驚訝。

在本教程中，我將向您展示如何使用 Woocommerce 使用 Divi 的時尚佈局包創建在線商店。 我將向您介紹如何正確設置要自定義的佈局，如何通過 Woocommerce 集成使商店頁面栩栩如生，以及有關如何使用佈局元素和主題定制器來設計 Woocommerce 頁面樣式的一些技巧。

設置

為了節省時間，我將開始本教程的某些步驟已經完成。

1.安裝並激活Divi主題
2. 安裝並激活 WooCommerce
3. 下載 Fashion Layout Pack 並將 Fashion_All.json 文件導入您的 Divi 主題庫。
4. 為每個佈局創建新頁面。
5. 創建您的主菜單。

如果您對上面列出的設置感到困惑，您可以通過查看這 10 個為新項目使用佈局包的步驟，找到有關如何正確設置佈局的更多詳細說明。

完成以上 5 個步驟後，您就可以開始了。

先睹為快

這是您將要創建的一些 WooCommerce 頁面的一瞥。

使用 Divi 的 Fashion Layout Pack 通過 WooCommerce 創建在線商店

訂閱我們的 YouTube 頻道

更改您的全局口音顏色

首先，我們將更改 Divi 主題的全局強調色。 更改全局強調色以匹配您的佈局始終是一個好主意，但這也是無需使用自定義 CSS 即可將您的 WooCommerce 頁面與您的配色方案相匹配的最簡單方法。 您會注意到這種強調色被用於為您的每個 WooCommerce 頁面上的元素設置樣式，例如單個產品頁面、購物車頁面等……

要更改全局強調色，請轉到主題定制器並導航到常規設置 > 佈局設置，然後在底部找到主題強調色選項。

我正在使用佈局中的這種粉紅色：#fc7086

然後，一旦您更改它，保存並發布您的設置並刷新您的頁面以允許強調色更新定制器中的其他設置。

更新主題定制器中的排版設置

由於 WooCommerce 使用您的默認主題定制器設置來為其每個頁面設置文本樣式，因此您需要確保將佈局上使用的排版與主題定制器中的排版設置相匹配。

要更新您的排版，請轉到Divi > Theme Customizer > General Settings > Typography並更新以下內容：

正文文字大小：16px
車身線高：1.9
標題文字大小：42
標題字體樣式：B
標題字體：Playfair Display
正文字體： Poppins
正文鏈接顏色：[如果您更新了全局強調色，則此顏色應顯示在此處]

設置 WooCommerce 商店頁面

WooCommerce 允許您設置要作為基本商店頁面的頁面。 此頁面應包括所有產品類別，以便用戶了解您的商店所提供的一切。 由於我們的佈局有一個商店頁面，讓我們繼續將此作為我們的基本商店頁面。

從您的 WordPress 儀表板，轉到WooCommerce > 設置，然後單擊頁面頂部的產品選項卡。 在選項卡正下方的菜單中，選擇Display 。 然後選擇商店頁面到您使用時尚佈局包中的新商店頁面佈局創建的“商店”頁面。

然後保存更改。

將產品添加到您的商店

您可能已經註意到，儘管您的商店頁面有兩個商店模塊，但並未顯示任何產品。 顯然，您需要先添加產品。 要將新產品添加到您的商店，請轉到您的 WordPress 儀表板並按照以下步驟操作：

1. 導航到產品 > 添加新
2. 輸入產品名稱
3. 輸入產品描述
4. 輸入產品價格
5. 輸入產品的簡短描述
6. 添加三個新類別（夏季、精选和特賣）
7. 為您的產品選擇類別（在本例中為夏季）
8. 添加產品圖片
9. 發布/更新產品

為您的產品分配類別

當您重複上述步驟以創建更多新產品時，請確保為每個產品分配一個類別（上面列出的步驟中的 #7）。 在本教程中，我在“夏季”類別下添加了 6 個產品，在“特色”類別下添加了 6 個產品，在“特價”類別下添加了 1 個產品。

更新商店頁面上的商店模塊

現在您已經創建了產品，您可以將這些產品添加到您的商店頁面。 正如我之前提到的，商店頁面佈局已經在佈局中內置了商店模塊。 在 Summer 部分下有一個，在 Featured 部分下有一個。

轉到商店頁面並部署可視化構建器。 然後將鼠標懸停在包含 Summer Fashion 標題的行下的商店模塊（當前未顯示任何產品）上，然後單擊模塊設置。

更新設置以僅包含“夏季”類別。

現在您應該看到添加了類別夏天的所有產品。

接下來，找到特色產品標題下的商店模塊並更新設置以僅包含特色類別。

添加商店模塊以在商店頁面上顯示“特價”商品

由於我們在商店頁面上有兩個類別（特色產品和夏季時裝），使用佈局中已經提供的模塊可以輕鬆創建附加類別和產品。

讓我們創建另一個部分來展示我們的“特價”產品。

為此，請部署可視化構建器並使用右鍵單擊選項複製顯示夏季時尚產品的整個部分，並將其直接粘貼到“特色產品”部分下方。

現在您所要做的就是進行一些更新。

在顯示標題的行中，繼續單擊文本模塊中的文本並將標題更改為“特價”而不是“夏季時尚”。

然後將左欄中的圖像更改為與您的銷售產品更一致的圖像。

最後，更新商店模塊以僅包含“在售”類別。

使用時尚佈局設計您的 WooCommerce 頁面

當您安裝插件時，WooCommerce 會自動生成自己的一組 WooCommerce 頁面。 這些包括以下內容：

商店 - 這是您產品的帖子類型存檔的佔位符。
購物車 - 使用短代碼 [woocommerce_cart] 生成購物車內容
Checkout – 使用短代碼 [woocommerce_checkout] 顯示信息。
我的帳戶 - 使用短代碼 [woocommerce_my_account] 顯示與其帳戶相關的特定客戶信息。

由於我們已經選擇了我們的商店頁面，因此無需進一步設計。 但是對於其他 3 個 WooCommerce 頁面，我們需要對它們進行樣式設置以適應我們其他頁面佈局的設計。

將部分標題添加到購物車和結帳頁面

我們先來看看購物車頁面。 這是在我們對它做任何事情之前的樣子。

請注意，因為我們更新了全局強調色，所以我們的鏈接和按鈕已經與配色方案相匹配。 而且，由於我們更新了主題定制器中的排版設置，標題和正文也與我們的主題相匹配。

但只需點擊幾下，我們就可以做得比這更好一點。 首先轉到商店頁面，部署可視化構建器，並將包含頁眉的頂部部分保存到庫中。 您可以命名為“頁眉部分”。

然後向下滾動到頁面底部，找到包含電子郵件選項和聯繫方式的最後一部分，並將其以“頁腳部分”的名稱保存到您的庫中。

現在去編輯您的購物車頁面。 從默認頁面編輯器中，選擇使用 Divi Builder，然後選擇“使用 Visual Builder”。 構建器應該自動將短代碼 [woocommerce_cart] 放在常規部分的一列行內的文本模塊中。 如果沒有，您將需要自己創建它。 接下來，單擊藍色加號圖標在當前部分下添加一個新部分，選擇“從庫中添加”選項卡。 然後選擇您剛剛創建的名為“頁眉部分”的新部分。

然後將該部分拖到頁面頂部並將標題文本更改為“您的購物車”。 就是這樣！

您也可以對結帳頁面重複此過程。

使用 Divi Builder 設計我的帳戶頁面

既然您知道如何向這些 WooCommerce 頁面添加標題，請繼續為“我的帳戶”頁面執行相同操作。 這次您可以將您保存到庫中的頁腳部分添加到此頁面的底部。

您可能希望給這個頁面一個獨特的設計，以使其更明顯，這是一個管理您帳戶的頁面。 因此，不是頁眉和頁腳部分的粉紅色漸變背景，而是轉到每個部分的部分設置並將背景漸變顏色更改為#9599e2 和#8bc6ec。

使用文本模塊設置來設計 WooCommerce 簡碼內容的樣式

由於 WooCommerce 短代碼現在位於文本模塊中，因此您可以利用它來為模塊設置中的某些元素設置樣式。

讓我們為我們的“我的帳戶”頁面執行此操作。 從可視化構建器中，更新保存短代碼內容的文本模塊的設置，如下所示：

在設計選項卡下...

文字文字大小：20px
文本行高：1.6em

現在單擊“文本”部分下的鏈接選項卡，按如下方式設置鏈接樣式：

鏈接字體： Poppins
鏈接字體粗細：半粗體
鏈接文字大小：27px
鏈接線高度：1.5em

保存設置

現在查看您的“我的帳戶”頁面。

使用自定義 CSS 來設計 WooCommerce 存檔頁面的樣式？

WooCommerce 使用的某些存檔頁面不像其他頁面那樣使用短代碼生成，因此無法使用 Divi Builder 對其進行調整。 因此，對於這些頁面，您需要拆分一些自定義 CSS。

讓我們以“特色類別”頁面為例。

現在讓我們打開 Theme Customizer 並單擊 Additional CSS 並添加以下內容：

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

這將設置排序下拉框、麵包屑和價格字體的樣式。 可以使用主題定制器中的排版設置更改其余文本。

最後的想法

借助這個令人驚嘆的佈局包、WooCommerce 和 Divi Builder，為您的網站構建在線商店變得更加容易。 顯然，還有一些需要完成的工作超出了本文的範圍。 例如，您仍然需要決定使用哪種支付網關、您希望如何處理運輸以及其他更多公司特定的行動項目。 但是 WooCommerce 應該能夠處理您需要的大部分內容。

如果有的話，我希望這篇文章能激勵你自己創造一些驚人的東西。

我期待在評論中收到您的來信。

乾杯!