星期一大師班：如何使用 Elementor 將任何 WordPress 網站轉變為在線商店

毫無疑問，當前的危機將嚴重影響全球經濟。 但隨著在線業務的突然激增，我們預計中小型企業 (SMB) 的表現會相當不錯。

不幸的是，不乏中小企業所有者和網絡創建者，他們仍然對創建在線商店的想法感到害怕。 也許他們記得它是十多年前的複雜過程。

通過展示我們如何通過 5 個簡單的步驟構建一個功能齊全的在線商店，其中包括定義產品、設置 WooCommerce 和運輸分類，我們希望改變這種狀況。

要創建我們的在線商店，我們將需要以下項目：

• 一個基本功能的 WordPress 網站。
• 產品
• Elementor Web Builder（已安裝）
• WooCommerce，WordPress 的首選電子商務插件
• 具有支付網關的帳戶（在線支付服務，例如 Stripe 或 Paypal）

我們的測試案例將是一家小型企業，一家實體運動器材商店，“西蒙的體育用品”。 到目前為止，他們只需要在他們的網站上獲取有關商店和特價商品的基本信息。

但由於當地衛生法規迫使商店關閉，他們別無選擇，只能開始在線銷售產品。

因為我們想從一開始就吸引客戶的注意力，所以我們想出了一個很棒的產品來在我們的新網上商店推出，一個“家庭健身套餐”，其中包括：

• 一根跳繩
• 一對屍鬼
• 一個捲起來的床墊
• 一對阻力訓練帶

在我們開始構建之前，無論我們是否專業，首先將我們的站點置於維護模式被認為是一種很好的做法。

在 WordPress儀表板中，我們只需轉到Elementor選項卡，然後選擇Tools ，然後我們將選擇維護模式選項卡。

在模式下拉菜單中，我們將選擇Coming Soon模式，因為它更適合我們的目的。

當然，我們也可以使用此處的下拉菜單上傳模板，或在 Elementor 中為模板創建自定義設計（通過單擊標記為create one的鏈接）。 我們還可以通過創建“即將推出”頁面並將其保存為模板來提前準備，就像我們在這裡所做的那樣。

如果您正在尋找頂級的免費 WordPress 模板資源，請查看這篇文章。

完成後，我們將單擊保存並開始構建本身。

我們安裝 WooCommerce 的方式與安裝任何其他插件的方式相同。

在 WordPress儀表板上，我們將轉到Plugins選項卡，然後單擊Add New 。
我們將使用搜索框搜索 WooCommerce，找到它後，我們將單擊Install ，安裝可能需要一分鐘，完成後我們將單擊Activate 。

激活插件後，應該會出現 WooCommerce 設置嚮導。

如果沒有，我們將單擊WooCommerce選項卡（出現在我們的儀表板上），選擇Settings ，然後在右上角的設置部分中，我們將單擊Help 。

在展開的“幫助”部分中，找到最左側的“設置嚮導”，然後再次找到將出現在同一部分中的“設置嚮導”按鈕。

WooCommerce 背後的人在使設置過程用戶友好方面做得很好。

在設置嚮導的第一頁上，我們將輸入我們的商店詳細信息。 在此頁面的底部，您會注意到有一個下拉菜單，其中包含在我們的商店中銷售數字產品或可下載產品的選項。 由於我們只銷售實體產品，我們將選擇適當的選項，然後單擊“開始吧”按鈕繼續下一頁。

此時，我們可能會看到 WooCommerce 彈出窗口，詢問我們是否同意他們使用用戶跟踪。 點擊繼續。

在付款設置中，我們將選擇我們的付款網關。 這些在線支付服務在在線交易安全方面享有盛譽。

我們可以使用我們的電子郵件地址將這些網關中的任何一個鏈接到我們的帳戶。

有很多選擇，每個網關都有其優點和缺點。

如果您可以使用 Stripe，那麼我肯定會將其添加為一個選項。 設置需要更長的時間，但他們以低廉的費用提供良好的服務。

如果沒有，PayPal 也很棒。 費用略高，但設置快捷方便，客戶無論是否有帳戶都可以使用它。

如您所見，離線支付還有其他一些選擇，但我們強烈建議使用在線支付網關，因為我們會在安全性甚至設計方面節省大量時間和精力。

設置付款選項後，我們將轉到“運輸”頁面，在那裡我們將選擇最容易讓客戶使用的重量和測量單位。

接下來的幾頁是推薦的插件，如果您願意，可以使用它們。

我們將取消選擇它們，因為我們已經可以選擇通過 Elementor 將我們的 Facebook 和 MailChimp 帳戶等內容鏈接到我們的網站，因此對我們來說，這是多餘的。

我們也不是真的需要 JetPack，所以我們也可以跳過它，這會將我們帶到嚮導的最後一頁。

至此，我們已經完成了 WooCommerce 的主要設置。

在嚮導的最後一頁仍然打開的情況下，我們將單擊“創建產品”按鈕，這會將我們帶回到 WordPress儀表板上的“產品”選項卡（就在WooCommerce選項卡下方）。

在這裡，我們將能夠添加、刪除和編輯我們的所有產品。

進入“添加新產品”部分，我們將填寫產品的所有必要詳細信息：

• 產品名稱 - 我們建議您將其設為一個吸引人的名稱
• 描述 – 我們將在此處添加產品的信息性描述

本節的下半部分是我們將填寫以下產品數據的地方：

• 產品類型——我們的測試用例是一個簡單產品的例子（非虛擬或可下載）
• 價錢
• 簡短描述 – 關於產品的簡要介紹

本部分右側的面板是我們將添加產品圖片的地方。 這將是我們的產品特色圖片。 如果我們想要添加更多圖像，我們可以在主描述框中進行。

在產品圖片框上方，我們可以選擇為我們的產品添加標籤，並分配類別。

有了這個，剩下要做的就是在單擊Publish之前查看我們的產品信息。

看似令人驚訝，但我們實際上已經完成了困難的部分。

這是過程中有趣的部分，我們展示我們的產品並調整我們網站的設計以更好地適應其作為在線商店的新目的。

為此，我們將在 Elementor 中打開我們網站的主頁（您也可以創建一個專用於您商店產品的全新頁面）。

如您所見，我們已經進行了一些小的更改。 例如刪除舊的特價商品並添加實體店因當前情況的健康和安全規定而關閉的公告。

向我們的頁面添加產品的最簡單方法是轉到編輯器面板中的小部件庫並蒐索 WooCommerce產品小部件。

我們將它拖放到我們希望它出現的部分。 請注意，小部件會自動顯示我們的產品，但這是因為我們的商店中目前只有一種產品。

如果我們有多個產品，在將Products小部件放置到位（選擇了小部件）後，在編輯面板（左側）的Content Tab 中，我們將轉到Query部分。 我們將選擇我們的源作為手動選擇； 然後，我們將使用“搜索和選擇”功能，並在此處找到我們要銷售的產品。

然後我們可以進入樣式選項卡並自定義小部件以適合我們頁面設計的其餘部分。 完成後，我們將點擊Publish或Save Draft 。

如果您是更有經驗的用戶，您可能想嘗試更可定制的替代解決方案。

上圖中的產品顯示是使用一些基本的標題和文本小部件、一個簡單的圖像框和一個圖標列表小部件創建的。 最後，我們添加了一個同樣來自小部件庫的可定制的添加到購物車小部件。

我強烈建議您至少嘗試後一種方法，因為它將為您提供無與倫比的靈活性，使您的設計真正引人注目和獨特。

一旦我們對我們的產品或產品在我們頁面上的外觀感到滿意，我們就可以轉到我們的購物車和結帳頁面。

這兩個頁面是我們安裝 WooCommerce 時自動創建的，作為 WooCommerce 頁面，我們可以自定義的內容不多。

因此，為了使這些頁面看起來更好，我們在 Elementor 主題構建器中創建了兩個單獨的標題。 在條件中，我們分別指定每個標題僅出現在購物車或結帳頁面上。

使這些頁面的設計與我們網站的其餘部分保持一致的最安全和最簡單的方法是在新的主題樣式功能中相應地定義我們網站的默認字體。 這是因為這些是 WooCommerce 將轉向的設置，以了解如何呈現這些頁面。

如您所知，客戶完成在線購買後顯示感謝按摩已成為慣例。

WooCommerce 包含一個通用的感謝消息，它帶有標準的確認電子郵件，我覺得這對於此類商店來說已經足夠了。

如果我們希望我們的感謝信息看起來更高檔，我們總是可以使用主題生成器創建一個帶有感謝信息的彈出窗口，完全按照我們想要的方式設計它，並創建一個條件讓它在之後出現離開結帳頁面。

或者，您可以投資 WooCommerce 插件，該插件將為您的網站提供可定制的感謝頁面或彈出窗口，但這些確實需要額外費用。

隨著我們網站的設計和構建完成，我們可以進入最後一步。

大多數默認設置應該適用於絕大多數在線商店。

這些設置可以在WordPress儀表板上的WooCommerce選項卡的設置部分下找到。

在這裡，在常規設置中，我們可以編輯以下內容：

• 店鋪地址
• 常規選項。
• 貨幣選項

在產品設置的添加到購物車行為小節中，我們會找到一個有用的選項，可以在成功添加或選擇產品後將客戶重定向到購物車頁面。 我們將在這裡選擇的東西，因為現在我們只有一種產品。

Shop Page子部分是我們定義我們的商店頁面的地方。 現在，我們正在主頁上展示我們的產品，但我們也可以輕鬆創建另一個頁面並使用此選項將我們的網站鏈接到該頁面。

我們還可以在Products設置中編輯和定義Measurements 、 Reviews 、 Inventory等。

我不會在這些選項卡的其餘部分中使用默認設置，絕對不會在稅收選項卡中使用默認設置。

但是，我想花一些時間在運輸部分，因為它畢竟是在線零售業務的重要組成部分。

是的，有很多高效的插件和插件可以為您提供運費計算器，甚至是特定於服務的計算器，並通過 FedEx 或 USPS 計算運費。 是的，有些是免費的，但大多數確實要花錢。

但是，目前，我們正在努力節省資金，或至少避免額外費用，並且，如果可能，還避免向我們的平台添加任何可能減慢我們網站速度或造成衝突的內容。

碰巧的是，我們可以在這里安全可靠地做到這一點，而且無需額外費用。

我強烈建議您研究運輸和交付到您想與之開展業務的地區的價格。 根據重量找出包裝和運輸每種產品的成本。 您可能想通過掛號郵件發送，或者您可能想添加快遞服務——這裡的研究很重要。 收費太少，你會賠錢。 收費太多，你會失去客戶。

該系統的工作方式基於運輸區域和運輸類別。

我目前銷售的產品包括幾個啞鈴或啞鈴。 但我也可能決定出售一些運動服裝，就運輸成本而言，這是兩個不同的類別或運輸等級。

這就是為什麼我們應該從定義我們的運輸類開始。

對於這個演示，我們將只定義兩個簡單的類。

在Shipping選項卡中，我們將單擊Shipping Classes 。

進入Shipping Classes部分後，我們將單擊Add a Class 。

然後我們將通過將其命名為“Heavy Items”來定義這個類。

（slug line 不是那麼重要，無論如何 WooCommerce 可以自動填充它。）
在定義框中，我們將為我們自己、我們的員工或同事添加一個簡短的說明（例如，“重量超過 2 公斤的物品”）。

接下來，我們將以相同的方式創建一個單獨的類。 這次我們將其命名為“輕型物品”，並將其定義為“重量小於 2 公斤的物品”。

在這一點上，我們必須記住，系統還需要知道我們的哪些產品是“重”或“輕”項目。

回到 WordPress儀表板，我們將進入“產品”選項卡，並在產品列表中找到我們的特定產品，然後單擊它下方的“編輯”選項。

這將打開“編輯產品”部分，我們將在其中向下滾動到“產品數據”區域並選擇“運輸”選項卡。

這是我們可以保持簡單的另一個地方。 真的沒有必要定義產品的重量和尺寸。 相反，我們只會在下拉菜單中為該特定產品選擇適當的運輸類別。

完成後，我們將單擊更新（在左側面板上），然後返回到 WooCommerce設置，然後返回到運輸選項卡。

眾所周知，除了重量之外，決定我們運輸成本的另一個重要變量是位置。 這就是我們現在在“運輸區域”部分要做的事情。

在這裡，我們將單擊Add Shipping Zone並將此區域命名為“Domestic”。 接下來，我們將為我們的測試用例（英國）選擇適當的區域。 如果可能，您還可以根據郵政編碼或郵政編碼選擇地區。

接下來，我們將添加一個送貨方式。

由於我對本地業務最感興趣，並且因為我個人想讓我的生活更簡單，我們將單擊添加送貨方式並選擇免費送貨選項。

我已經計算了郵寄和包裝的成本，將該數字四捨五入，並添加到最終廣告價格中。 事實上，這是我銷售的產品的基本價格。

現在，這一切都很好，但是如果我們有興趣擴展到西歐，例如，我們不想提供免費送貨服務。

我們總是可以添加另一個區域，將其命名為歐洲，然後輸入我們想要銷售的所有國家/地區。 接下來，我們將添加運輸方式，這次我們將選擇統一費率。

我意識到“統一費率”這個詞現在對你們中的一些人來說可能看起來很混亂，但這只是一個臨時定義。

如您所知，如果我們想對我們的運輸偏好進行任何更改，或者實際上是 WordPress 平台上的幾乎所有內容，我們可以隨時返回此處並單擊每個部分中每個類別下顯示的“編輯”選項。

通過單擊編輯，在我們剛剛創建的運輸方式下方，我們將打開一個對話框，我們將在其中更具體地定義此運輸方式。

我們要做的第一件事是將方法標題中的名稱從“Flat Rate”更改為“Europe (regular shipping)”。 我們將不理會稅收選項。

請注意，我們有Cost選項可用於向此運輸區域添加一般運輸成本。

但是，我們可以根據我們已經設置的運輸類別來定義我們的運輸方式。

例如，我可以定義運費，以便歐洲客戶支付 30 美元的運費來購買重物，例如家庭健身套餐； 如果他們訂購輕便的物品，例如運動褲，則需要 10 美元的運費。

默認計算類型幾乎可以滿足我們的所有需求，因此我們建議保持原樣。

與往常一樣，我們會在忘記之前單擊保存更改。

我們中的許多人還希望為我們的客戶提供加急運輸，我們可以以同樣的方式簡單地做到這一點。

我們將通過添加新方法，選擇統一費率，然後點擊編輯，向我們的“歐洲”運輸區添加額外的運輸方式。

進入對話框後，我們將方法標題更改為“歐洲（快遞）”，並根據運輸類別（重型/輕型）輸入此方法的成本。

當然，我們將點擊Save Changes 。

當您處於配送設置中時，您可能還想查看配送選項，其中有一些不言自明的有用選項。

在Payments選項卡中，我們可能要重寫 PayPal 付款選項的默認說明。 這是為了防止我們沒有單獨的信用卡選項； 我們希望確保我們的客戶知道他們也可以點擊 PayPal 以通過信用卡付款。

為此，我們將進入Payment選項卡，在PayPal選項旁邊，我們將單擊Manage以訪問我們要編輯的詳細信息，在我們的示例中為 PayPal description 。

請注意，有PayPal Standard選項和Paypal Checkout選項。 我更喜歡使用後者，因為它包含一個結賬階段，讓事情變得更容易。

回到Settings ，我們將跳過Accounts設置，因為我們將像在實體店中一樣運行我們的交易，在那裡我們沒有使用帳戶。 也許，我們的在線商店會增長，這會很棒，但也是一種完全不同類型的在線商店。

我們應該考慮的最後一件事是在高級選項卡中，我們可以確保所有頁面都正確鏈接。

但更重要的是，我們可能希望為特定於我們的在線業務的條款和條件創建一個頁面，這是我們希望它在我們網站上的位置。

最後但並非最不重要的一點是，我們要保存所有更改，我們實際上已經完成了。

我說實際上是因為我們不應該在沒有先測試的情況下啟動任何東西。

在進行測試之前，我們將首先轉到 WordPress 儀表板上的“產品編輯”頁面，暫時將產品價格從 99.90 美元更改為 99 美分。

這樣一來，當我們一次又一次地運行測試時，我們不會每次都轉移 100 美元。

如果您這樣做，請務必記住在完成測試後將價格改回應有的水平。

為了測試我們商店中的所有東西是否有序，我們將轉到我們的網站（在預覽模式下），然後我們將在那裡單擊產品的添加到購物車按鈕。

這將帶我們進入購物車頁面。 從這裡將單擊轉到結帳頁面。

我們將填寫我們的詳細信息，並像客戶一樣進行整個過程。

對於這個演示，我使用了一個 Paypal 帳戶，因為它可能是我們最熟悉的。

到目前為止，一切運行順利，一旦我們完成了測試購買，我們將返回 WordPress儀表板和WooCommerce選項卡。

在那裡我們已經可以看到我們的訂單已註冊，如果我們轉到訂單部分並單擊我們的訂單，我們可以看到我們的測試訂單已正確註冊。

當然，我們還應該檢查我們的電子郵件帳戶，以確保我們正確收到了訂單確認。

本週，我們研究瞭如何將小型企業的標準網站轉變為與在線商店一樣複雜的網站——但是——以盡可能簡單的方式。

眾所周知，我們這樣做的主要原因是幫助我們社區中的小企業和自僱專業人士取得成功，而不是因為我們都盡最大努力度過這場危機而失敗。

如果您有任何提示和建議可以幫助其他用戶設計和設置他們的第一個在線商店，請將它們添加到下面的評論中。

如果您有任何批評，我們同樣對您的想法感興趣。

畢竟，我們的目標是成為最擅長幫助他人在他們的手藝上出類拔萃的人。