如何使用 OceanWP 和工具集構建自定義 WooCommerce 商店(無需編碼)

已發表: 2021-05-05

您無需自定義編碼即可構建具有高級功能的引人注目的在線商店。 使用 Toolset 和 OceanWP,您可以使用自己獨特的功能和样式從頭開始構建完全自定義的產品和商店頁面——所有這些都不需要編碼。

如果您正在建立一個在線商店,您可能已經註意到 WooCommerce 的默認模板和您網站的主題主要決定了您的商店的外觀。 您可能有幾個選項可以打開或關閉,否則,如果沒有自定義編程,就不可能添加高級功能。

或者,您可以使用 Toolset 和 OceanWP 創建一個完全自定義的 WooCommerce 商店,無需編碼。

使用工具集,您可以構建僅在主要零售網站上才能看到的功能。 或者,您甚至可以構思自己的功能,然後使用自定義帖子類型和字段、帖子關係、自定義佈局等創建它們。

由於其廣泛的樣式選項,OceanWP 使您的網站看起來很棒。 此外,它還具有直觀的管理員編輯體驗,可以準確地向您展示您的網站在前端的外觀。

以下是使用 Toolset 和 OceanWP 自定義您的在線商店的四個步驟:

  1. 決定您要展示和推廣的內容
  2. 使用自定義帖子類型、字段和分類法定義您的產品
  3. 創建自定義產品頁面
  4. 創建動態商店頁面和搜索功能

決定你想要展示和推廣的內容

Toolset 的靈活功能不僅僅是重新排列和設置產品頁面的樣式。 您可以創建專門適用於您的業務的完全自定義功能,或使用主要零售網站的高級功能。

q-and-a-section-toolset
使用表單和自定義重複字段創建產品 Q+As
追加銷售交叉銷售工具集
使用帖子關係顯示追加銷售和流行的交叉銷售
品牌定制分類工具集
使用自定義分類法按品牌或設計師顯示產品
特價工具集
使用條件塊與自定義字段中的信息共享特別優惠
前端表單工具集
允許供應商使用表單將他們的產品直接提交到您的站點
商店位置工具集
使用自定義視圖在地圖上顯示您的商店位置
創建帳戶工具集
根據用戶類型創建具有權限的客戶或供應商登錄

產品每套工具集
使用帖子關係創建可購買的服裝靈感

這些是您無法僅從 WooCommerce 獲得的功能,它們僅觸及工具集可能實現的功能的表面。 最重要的是,這一切都可以在沒有任何編碼的情況下完成!

使用自定義帖子類型、字段和分類法定義您的產品

一旦您有了自己的想法,您就可以創建無限數量的自定義帖子類型、字段、分類法和帖子關係,讓您的想法成為現實。

WooCommerce 為您提供了一些基本字段來定義您的產品,例如產品屬性、描述、價格以及重量和尺寸等運輸信息。

使用工具集,您可以添加其他信息,例如特定產品功能、品牌或說明產品屬於哪個部門。

自定義字段產品
產品上的自定義字段

並非所有主題都適用於自定義帖子類型,但 OceanWP 已“準備好自定義類型”。 使用 OceanWP,您可以對每個內容模板應用不同的主題設置。 這使您可以更好地控制此自定義內容在您的網站上的顯示方式。

創建自定義產品頁面

定義產品後,您可以創建完全自定義的模板來顯示您的產品和自定義字段中的信息。 通過使用產品模板,您只需構建一次頁面,您所做的任何更改都會立即反映在使用該模板的所有產品上。

Toolset 允許您使用 Toolset 的 WooCommerce Blocks 從頭開始構建您的產品模板。

woocommerce-默認模板
默認 WooCommerce 產品模板
定制產品模板工具集
完全自定義的工具集產品模板

只需將模板或存檔分配給您的產品,然後添加您想要的塊,例如產品評級、產品標籤、產品屬性、添加到購物車按鈕等。

這些塊可以動態地從您的自定義字段中提取信息。 這意味著當您添加標題塊以顯示例如產品名稱時,它將根據您的客戶正在查看的產品自動顯示正確的產品名稱。

動態內容工具集
創建一個產品模板,為每個產品動態提取信息

您還可以有條件地分配模板以根據某些產品標準使用不同的模板。 例如,您可以使用條件模板來使用不同的佈局顯示缺貨的商品。

庫存項目工具集
庫存商品
缺貨項目工具集
缺貨商品

OceanWP 為您提供了多種用於樣式化這些模板的選項。 因為它已準備好後輸入,您可以為不同的模板選擇不同的主題選項。 例如,您可以選擇為某些產品顯示側邊欄,並為特色產品選擇全角佈局。

主題選項 owp 工具集
為每個模板選擇您的 OceanWP 主題選項

OceanWP 還包括全局樣式選項,以幫助您的商店在整個網站上保持一致的視覺標識。 另外,您的站點管理員和前端之間沒有切換來查看您的更改的外觀,因為您在後端看到的就是它在前端的顯示方式。

全局樣式工具集-oceanwp
將全局樣式添加到您的站點

創建動態商店頁面、產品列表並添加搜索功能

您已經定義了產品並設計了產品模板。 現在,幫助您的客戶找到他們正在尋找的東西。

構建自定義商店頁面和其他存檔頁面

在 WordPress 中,商店頁面和類別列表頁面等頁面稱為檔案。 本質上,檔案列出了屬於某個類別或內容類型的所有帖子(或產品)。

工具集允許您根據您選擇的標準創建不同的檔案。 例如,如果您的網站銷售高跟鞋和包包,您可能需要不同的商店頁面,其中包含與每種產品類型相關的過濾器。

存檔頁面工具集
高跟鞋商店頁面
商店頁麵包工具集
包包商店頁面

創建動態內容列表

您可以使用工具集視圖塊將產品的動態列表添加到您的商店頁面或您網站上的任何其他頁面。 這允許您定義要列出的產品並設計列表的外觀。

視圖塊工具集
選擇要在商店頁面上顯示的內容

添加自定義搜索和過濾選項

借助自定義搜索和過濾選項,Toolset 使您的潛在客戶可以輕鬆快速地找到產品。 您可以按您創建的任何自定義字段或發布關係進行過濾。

自定義搜索工具集
允許您按自定義字段過濾的自定義搜索

OceanWP 的其他自定義商店頁面功能

OceanWP 為您的商店和存檔頁面提供了更多功能,包括快速查看選項、無限滾動以及在不使用時將過濾器隱藏在屏幕外的功能。 請注意,這些功能僅適用於 OceanWP 的存檔,不適用於您使用工具集創建的任何自定義存檔。

快速查看選項-oceanwp
快速查看選項
ceanwp-off-screen-filters
在屏幕外隱藏過濾器

OceanWP 還為您提供瞭如何顯示購物車的選項:

  • 原生購物車彈出
  • 浮動添加到購物車欄
  • 購物車展示
  • 無干擾結賬

..和更多!

立即試用 OceanWP 和 Toolset,並在評論中告訴我們您的體驗!

通過 Toolset 的免費 WooCommerce 課程逐步學習構建自定義 WooCommerce 商店。


您還可以通過此 WooCommerce 商店演示免費試用 Toolset 和 OceanWP