ShipPress

使用教學

用 AI 建立 WooCommerce 商店：商品、購物車與結帳

想在網路上開店嗎？在 ShipPress 挑選一個商店設計，你就能直接擁有已預先安裝好 WooCommerce 的真實 WordPress 商店。在這個教學中，我建立了一家名為 Tsuki Cookware 的小廚具店，並且完全只靠跟 AI 對話來修改它。

作者：Oberon Lai。我是 ShipPress（Codotx, LLC）的開發者，所以這是我們自家的產品。

影片縮圖：用 AI 建立 WooCommerce 商店：商品、購物車與結帳 播放影片
只有在你按下播放後，影片才會從 YouTube (youtube-nocookie.com) 載入。 在 YouTube 上觀看

  1. 挑選商店設計

    在設計牆上，篩選 E-commerce。這些設計專為商店打造，並附帶範例商品。在影片中，我選擇了 Kama Cookware，將網站命名為 Tsuki Cookware，然後點擊 Use this design。

    ShipPress 會在你的電腦上建立商店，並已安裝好 WooCommerce。第一次可能需要一分鐘。準備好後，點擊 Site 分頁即可查看首頁，接著從頁面清單開啟 Shop 頁面。你會看到該設計附帶的範例商品，標價為歐元。

  2. 透過對話修改商品

    現在把它打造成你專屬的商店。在對話中，我請 AI 將商店切換為日圓、設定新價格、將銅鍋設為特價，並新增一項新商品：鐵製玉子燒鍋。

    AI 會逐一調整商店的商品與設定。完成後，你會看到一份變更清單表格：列出每項商品的新價格、特價與庫存數量。

  3. 在 Shop 頁面顯示真實商品

    回到 Shop 頁面，卡片可能依然顯示舊價格。在某些設計中，商品卡片是直接寫死在頁面上，而不是從商店系統讀取的。

    只要告訴 AI：讓 Shop 頁面的商品清單顯示商店中的真實商品與目前價格。它就會把卡片替換為即時商品清單。現在 Shop 頁面會直接顯示來自商店的每項商品，以日圓計價，並附帶 Add to cart 按鈕、特價價格與新商品。之後只要修改價格，頁面內容就會自動同步更新。

  4. 像顧客一樣體驗購物車

    將商品加入購物車，然後點擊 View cart。購物車會顯示特價價格。點擊 Proceed to checkout。

    全新的商店尚未啟用任何付款方式，因此結帳時會顯示沒有可用的付款方式。這對全新的 WooCommerce 商店來說完全正常。

  5. 啟用付款方式並下單

    請 AI 先啟用 Cash on delivery。它會啟用該付款方式，並設定顧客在結帳時看到的說明文字。

    開啟預覽畫面頂端的頁面清單，選擇 Checkout。Cash on delivery 現在會顯示為可選的付款方式。像一般顧客一樣填寫資料，確認訂單摘要，然後點擊 Place order。你會看到 “Order received”，付款方式為 Cash on delivery。

  6. 在 WooCommerce 中查看商品與訂單

    點擊 Dashboard 分頁。這是商店的 WordPress 後台，選單中包含 WooCommerce。

    • Products 列出每項商品及其價格、特價與庫存。你也可以在這裡手動編輯任何一項商品。
    • WooCommerce › Orders 顯示你剛剛下的訂單，包含其狀態與總金額。

    這與你在任何 WordPress 網站上使用的 WooCommerce 完全相同。

  7. 將商店發佈上線

    準備好後，點擊 Go live。對於商店，ShipPress 會引導你選擇 WordPress 主機。Free address 分頁說明了原因：購物車、結帳與顧客登入都需要在伺服器上執行 WordPress，而靜態副本只是一般網頁檔案，無法支援這些功能。

    因此請選擇一個 WordPress 主機。請參閱 Go live 查看可用選項，並參閱 你的網站屬於你 了解如何將網站搬移到你自己的主機。

  8. 實用提示

    • 從 E-commerce 篩選開始：在設計牆上選取，就會自動安裝好 WooCommerce。
    • 透過對話修改商品、價格、特價與庫存。記得查看 AI 提供給你的變更表格。
    • Shop 頁面顯示舊價格？請 AI 在該頁面顯示商店的真實商品。
    • 先啟用付款方式，再進行你的第一次測試下單。
    • 使用 Dashboard 分頁來管理商品與訂單。
    • 商店需要 WordPress 主機才能正式上線，而不是靜態副本。

  9. 接下來的步驟

    若想請 AI 進行更多修改，請閱讀 透過對話編輯網站。若想深入了解 wp-admin 與外掛，請參閱 這是真正的 WordPress。若想復原任何變更，請參閱 使用還原點復原任何 AI 變更。