在WordPress中建立一個網上商店時，WooCommerce是頭號選擇。
它具有大量的高階功能，並且可以完全定製，允許你建立任何型別的商店。最重要的是，它是開源的，而且完全免費！
想用最流行的頁面生成器Elementor和最流行的WordPress主題Astra建立一個WooCommerce網站嗎？
Elementor是一個流行的WordPress頁面構建器，通過直觀的拖放編輯器幫助你建立畫素完美的網站。
有了Astra，你就有了世界上最流行的非預設WordPress主題。它是輕量級的，安裝在接近200萬個網站上。
隨著最近Astra 4.0的更新，你的WooCommerce商店的每個方面都可以提升到新的水平。
簡而言之，通過WooCommerce、Elementor和Astra的組合，你可以建立一個網上商店，肯定能提高購物體驗和增加銷售。
本文涵蓋了如何用Elementor和Astra主題建立一個WooCommerce網站的具體步驟。
- 什麼是WooCommerce？
- 為什麼使用WooCommerce來建立一個網上商店？
- 建立一個WooCommerce商店需要什麼？
- 在一個WooCommerce主題中需要注意什麼？
- 為什麼使用Astra和Elementor來建立一個網上商店？
- 如何用Elementor和Astra建立一個WooCommerce網站？
- 安裝幾個必備的WordPress外掛
- 最佳的Elementor WooCommerce主題
- Elementor vs. Elementor Pro：何時升級
- 小結
什麼是WooCommerce？
WooCommerce是為WordPress建立的最流行的開源電子商務平臺。
它具有靈活性和完全可定製性，允許你建立任何網上商店，包括那些提供實物和數字商品、銷售訂閱等。
WooCommerce配備了大量先進的功能，而其他基於SaaS的平臺通常會收費。
功能包括一個直觀的儀表板、高階報告、庫存和訂單管理、發票和其他優秀功能。
無論你是開始一個線上業務還是把你的實體店搬到網上，WooCommerce都是用WordPress建立電子商務網站的完美解決方案。
為什麼使用WooCommerce來建立一個網上商店？
WooCommerce是目前最全面的電子商務平臺之一。它的質量和各種功能幫助你建立一個線上商店，為線上和離線銷售進行優化。
通過一系列的定製選項，你可以建立一個與你的品牌完美匹配的商店，並在桌面和移動裝置上看起來很好。
此外，WooCommerce與各種電子商務軟體解決方案相容，使其很容易與第三方應用程式如支付閘道器和營銷工具整合。
WooCommerce還具有一系列功能，將你的線上商店與線上和線下銷售結合起來。建立動態優惠券以幫助促進你的銷售，建立移動友好的結賬頁面，以及更多。
以下是你應該使用WooCommerce來建立你的網上商店的另外幾個原因：
- WooCommerce是為WordPress打造的，該軟體為全球44%以上的網站提供動力。
- WooCommerce與網站內容無縫整合
- 可與幾乎所有的WordPress主題和外掛配合使用
- 從實物和數字產品到訂閱和預約，你可以使用WooCommerce銷售任何東西
- 高度的可定製性
- 新增無限的產品、使用者和訂單
總而言之，有了WooCommerce，你可以超越傳統電子商務解決方案的限制，只受你自己想象力的限制。
你需要什麼來建立一個WooCommerce商店？
想知道你需要什麼來建立一個WooCommerce商店？
雖然我們會在文章後面詳細介紹這些，但這裡有一個最基本的清單：
1. 域名和主機
首先，我們需要一個域名和主機。
雖然有幾種選擇，但我們建議使用SiteGround。
SiteGround是一個流行的主機解決方案，它是可靠的，提供偉大的功能，更重要的是，它也是由WordPress.org推薦的。
我們還推薦SiteGround，因為它有世界級的支援團隊。他們總是可以回答你可能有的任何與託管有關的問題或擔憂。
選擇一個最適合你的管理型WordPress主機計劃。如果你還沒有一個域名，你也可以購買一個域名。
2. WordPress
接下來，你需要安裝WordPress。
使用管理型WordPress託管計劃的好處是，安裝該軟體很容易。
通過網站設定嚮導或控制面板中的一鍵式安裝程式，你就可以像這樣安裝WordPress。
3. WooCommerce
WooCommerce是與WordPress合作最好的電子商務平臺。
安裝WooCommerce是相當直接的。它與安裝任何其他WordPress外掛一樣簡單。
只需搜尋該外掛，安裝它，並啟用它。就這樣了！
一旦完成，你就可以準備好新增產品並立即開始銷售。嗯，幾乎是這樣!
4. WordPress theme
一個WordPress主題使你的商店看起來很棒。顏色、字型、排版、佈局結構等等，都是你的主題的一部分。
市場上有很多WordPress主題。雖然有些是好的，但有些甚至更好。由於我們希望你擁有最好的，我們將專注於後者。
Astra就是這樣一個主題。
它是一個超級輕量級的主題，載入時間僅為0.5秒，是為速度和效能而建的。
它有大量為網上商店量身定做的網站模板，你將在幾分鐘內啟動並執行你的商店。所有這些都不需要寫一行程式碼。
5. WordPress頁面構建器
最後，我們還需要一個頁面生成器來幫助設計和定製我們的頁面。
你有幾個頁面生成器可供選擇，包括Spectra。然而，在這篇文章中，我們將使用流行的WordPress頁面生成器，Elementor。
使用Elementor，你可以輕鬆地建立專業外觀和高度創意的網站。
在一個WooCommerce主題中需要注意什麼？
一個主題可以增加你網站的外觀和感覺。但這是一個主題的全部嗎？
一個主題也可以影響你網站的效能。
雖然正確的主題總是可以提高你的商店的效能，並反過來促進銷售，但錯誤的主題可以對效能產生負面影響。
那麼，理想的WooCommerce主題有哪些先決條件？
1. 速度
更快的載入網站=更好的購物體驗=更多的銷售和轉化。
速度是網上的一切。如果你的網站需要時間來載入，你的客戶很有可能會離開你的網站。這樣一來，你也就失去了潛在的銷售。
你知道嗎，頁面速度也是谷歌排名的一個重要因素？
一個更快的網站不僅能提高使用者體驗，還能幫助增加你在搜尋引擎上排名的機會。
使用PageSpeed Insights、Lighthouse和Pingdom等工具對你的主題進行測試，看看它的載入速度如何。
2. 響應性
你知道嗎，2021年近73%的線上銷售來自於移動裝置？
這讓我們想到一個非常重要的問題：
你的商店是否在移動裝置上提供了良好的使用者體驗？
雖然大多數主題都是響應式的，但儘早檢查將有助於你在上線時獲得更多的銷售。
3. 定製化
想要定製你的商店以符合你的要求嗎？你知道，在顏色、字型、排版、佈局、頁首、頁尾以及商店裡的其他東西方面？
你的WooCommerce主題應該是可定製的。這樣，你就能完全控制你的商店，並能以你想要的方式塑造它。
雖然有些主題可以使用WordPress定製器進行定製，但其他的主題有一個內建編輯器，可以幫助你快速調整設計。
4. 無縫的結賬過程
報告顯示，購物車放棄率幾乎高達70%。
這意味著10個客戶中有7個在結賬階段離開你的商店。這是個巨大的數字!
(Source: Baymard)
如上圖所示，放棄購物車的首要原因是向客戶徵收的額外費用。
統計資料還表明，17%的顧客放棄購物車的原因是冗長複雜的結賬。
如果你想降低購物車放棄率並增加銷售額，請確保你的WooCommerce主題有一個轉換優化的結賬過程。
5. 網站演示模板
馬上推出你的網店不是很好嗎？
你仍然需要新增產品和所有與之相關的資訊，但你明白這一點。
使用現成的模板來建立一個WooCommerce網站，比從頭開始建立一個網站更容易。而這正是一些主題所提供的。
你所要做的就是選擇一個專業設計的商店模板，匯入它，然後根據你的要求進行定製。
所有這些都可以在幾分鐘內完成，而不需要寫一行程式碼!
6. 支援
有一個支援團隊的協助總是令人放心的，因為你永遠不知道你什麼時候需要幫助。
大多數WooCommerce主題通過電子郵件、聊天和線上票務系統為您提供支援。一些高階主題還為您提供優先支援。
7. 安全
購物車放棄的另一個主要原因是，客戶不願意分享他們的信用卡資訊。
如果你想讓客戶與你分享他們的信用卡資訊，你就需要建立信任。
建立信任的第一步是確保你的WooCommerce主題是安全的。
讓你的網站安全是一回事，而讓你的客戶意識到這一點是另一回事。
我們建議展示你已經簽署的支付閘道器和其他任何可以在你的客戶中建立信任的東西。
這可能包括信任標記，如安全徽章，證書，或第三方認可，如谷歌客戶評論徽章或更好的商業局認可的企業徽章。
總而言之，這些是選擇WooCommerce主題時需要考慮的關鍵方面。你可以在網際網路上搜尋符合上述所有條件的主題。
或者，你可以聽從我們的話，選擇Astra主題！
為什麼使用Astra和Elementor來建立一個網上商店？
說到主題，Astra是WordPress生態系統中最受歡迎的非預設主題。它有近200萬的活躍安裝量，下載量已超過700萬。
這個輕量級主題對初學者友好，並提供了廣泛的專業設計的網站模板，幾乎可以用於任何利基市場。
在最新的Astra 4.0版本中，我們將WooCommerce帶到了一個全新的水平。
其中的一些功能包括：
- 為你的商店頁面提供全新的現代面板
- 輕鬆地在你的產品頁面上建立一個圖片庫
- 購物車頁面的現代新佈局
- 超級優化和無摩擦的結賬頁面，為轉換而生
- 現代化的新感謝頁面
- 帳戶頁面的現代化佈局
- 為您的WooCommerce商店提供令人印象深刻的變體色塊
- 與Astra無縫整合的Stripe支付閘道器外掛
還有更多令人印象深刻的功能。
簡而言之，通過Astra 4.0，我們大大增強了你的商店的每一個元素，確保為客戶提供更好的購物體驗。
Elementor是一個非常流行的WordPress頁面構建器，擁有超過500萬的活躍安裝量。
它有一個直觀的拖放編輯器，可以用來快速和容易地建立創造性和獨特的網站。
因此，當你把最流行的WordPress主題和頁面生成器結合起來時，你可以建立獨特和高轉化率的WooCommerce網站，在購物體驗上獲得高分。
如何用Elementor和Astra建立一個WooCommerce網站
現在讓我們用 Elementor 和 Astra 建立一個 WooCommerce 網站。
我們假設你已經購買了一個域名和管理WordPress主機。
第1步：安裝WordPress
一旦你購買了主機，你可以通過進入控制面板或使用安裝嚮導來輕鬆地安裝WordPress。
例如，如果你選擇了SiteGround，你可以使用網站設定嚮導來安裝WordPress。
註冊成功後，你會發現自己在以下儀表板上。
你可以新增一個新的網站，選擇你的應用程式，以及做更多的事情。
經過幾個簡單的步驟，你的WordPress安裝就完成了。
你現在可以進入你的管理儀表板，開始建設你的網站。
另一種方法是使用應用程式安裝器。
為此，你需要進入SiteGround控制面板，找到應用程式App Installer。
選擇WordPress作為你的首選應用程式並完成安裝。
這個過程非常簡單，一旦完成，你就可以訪問你的WordPress儀表板。
雖然上述步驟是針對SiteGround的，但這個過程對任何虛擬主機都是類似的。
想要幫助安裝WordPress嗎？請看我們的《設定虛擬主機、域名和WordPress的完整指南》。
第2步：安裝Astra主題
一旦你安裝了WordPress，下一步就是安裝Astra主題。
從你的WordPress儀表板，前往Appearance > Themes，然後點選Add New。
搜尋Astra，然後點選Install，再點選Activate。
想用一些現成的網站模板立即啟動你的商店嗎？
前往Appearance > Astra Options。
然後點選安裝匯入器外掛。
你會被要求選擇一個你選擇的頁面構建器。我們將繼續並選擇Elementor。
你也可以選擇一個你選擇的初始模板。
例如，搜尋 “Store” 並選擇你喜歡的模板。我們已經提前選擇了Organic Store template。
推薦Astra的模板：
現在，你可以根據你的網站要求來定製模板。
新增一個標誌，改變顏色和排版，以及做更多。
一旦你感到滿意，你將到達以下螢幕。
點選Submit & Build My Website。
這就開始了安裝過程，如下面的圖片所示。
這應該在一分鐘內完成。
安裝成功後，你的網站就會上線。
點選View Your Website，看看你的網站在前端的情況。
就這樣，你的WooCommerce網站已經啟動並執行。
你所要做的就是新增你的產品，完成一些設定，然後你就可以接受訂單和付款了！
第3步：安裝WooCommerce
要在WordPress上建立一個網上商店，我們需要安裝WooCommerce。
如果你安裝了一個與商店相關的初始模板，你會注意到WooCommerce已經被啟用了。
當你安裝一個入門模板時，它捆綁了你建立網站所需的一切。
在這種情況下，當你選擇一個商店模板時，不僅安裝了Elementor，還安裝了WooCommerce!
如果你沒有使用初始模板，你可能需要手動新增WooCommerce。
方法是這樣的：
為此，前往外掛>安裝外掛，搜尋WooCommerce。
點選立即安裝，然後啟用它。
第4步：設定你的WooCommerce商店
現在你已經安裝了WooCommerce，在你將產品新增到你的商店之前，有一些設定是你必須要做的。
前往WooCommerce > Settings。預設情況下，你會在 “General” 選項卡上。
在這裡，你可以包括你的商店地址，設定預設貨幣，新增運輸細節，整合一個支付閘道器，設定電子郵件通知，以及更多與商店有關的設定。
所有這些東西都包含在WooCommerce設定嚮導中，但如果你願意，你也可以手動設定它們。
例如，如果你想為你的商店新增一種支付方式，請點選Payments標籤。
只需啟用你喜歡的支付方式並完成設定過程。
我們建議花點時間，探索一下這些設定的內容。
更多細節，你可以隨時檢視我們關於如何設定WooCommerce的深度文章。
第5步：如何向你的WooCommerce商店新增產品
要新增產品到您的WooCommerce商店，請前往Products > Add New。
輸入產品名稱和描述，上傳產品圖片，以及所有細節。
然後向下滾動到Product data部分。
這是你新增與你的產品有關的細節的地方。
從選擇產品型別和新增庫存開始。然後轉到運輸細節和其他設定。
還有一大堆更多的資訊，你可以選擇提供。
雖然有些細節是必須的，但其他細節是可選的。
值得注意的是，當你安裝最新版本的Astra時，WooCommerce所帶來的新功能。
例如，你的商店模板現在帶有Variation Swatches for WooCommerce by CartFlows。
有了這個功能，你就可以摒棄舊的下拉選單，用令人印象深刻的變體色板來顯示你的產品的不同變體。
這不僅僅是為了顯示您產品的不同顏色選項。你可以選擇不同的圖片變體，也可以使用標籤色板。
安裝幾個必備的WordPress外掛
有幾個必須的WordPress外掛，你可以考慮安裝。這些外掛提供額外的功能。
UpdraftPlus：WordPress備份外掛
大多數主機供應商為你的網站安排自動備份。但我們不想依賴他們，所以我們建議有你自己的備份方案。
有一個這樣的外掛可以幫助實現這一點，那就是UpdraftPlus。
UpdraftPlus是一個流行的外掛，可以幫助備份你的WordPress網站。你也可以將你的備份儲存在谷歌驅動器、亞馬遜S3、Dropbox或Rackspace雲。
通過備份你的商店，你確保你不會失去一切。如果你的網站出了問題，或者你的伺服器崩潰了，你可以在幾分鐘內從備份中恢復它。
WordFence: WordPress安全外掛
由於其受歡迎程度，WordPress可能容易受到黑客、垃圾郵件和惡意攻擊。你最不希望的就是你的網站發生什麼事情，讓你在時間、金錢和聲譽方面付出沉重的代價。
這就是WordPress安全外掛，如WordFence，派上用場的地方。
WordFence是一個著名的、可靠的安全外掛，確保你的網站處於安全狀態。它可以阻止惡意流量，阻止暴力攻擊，並確保你設定的密碼是強大的。
Yoast SEO: WordPress SEO外掛
想讓你的網站在搜尋引擎結果頁上顯示出來嗎？
雖然為搜尋引擎優化你的商店有很多事情要做，但安裝一個SEO外掛將提高你被搜尋引擎注意的機會。
Yoast SEO是一個大受歡迎的WordPress外掛，可以幫助你優化你的商店，以利於SEO。
新增標題和描述，生成一個XML網站地圖，優化你的頁面內容，並使用Yoast SEO做更多的事情。
Site Kit by Google: 分析你的網站流量的WordPress外掛
當你經營一家實體店時，你想知道你的哪些營銷努力正在帶來紅利，並將客戶帶到你的商店。
你的網店也是如此。好訊息是，通過安裝谷歌的Site Kit等外掛，可以更容易知道你的網站上哪些是有效的，哪些是無效的。
通過將你的商店連線到谷歌的Site Kit，你可以得到關於你的客戶的詳細資訊，他們是如何發現你的商店的，他們訪問了哪些頁面，他們在你的商店停留了多長時間，他們來自哪裡，以及其他有用的資訊。
利用這些資訊，你可以相應地制定你的報價。
ShortPixel: WordPress影象優化外掛
你的WooCommerce商店會有很多很多的產品圖片。影象越好，客戶購買的機會就越大。
然而，較高的影象尺寸可能很大，對頁面載入速度有負面影響。而我們都知道，就搜尋引擎和使用者體驗而言，頁面速度是多麼重要啊！
ShortPixel是一個WordPress影象壓縮外掛，可以在不影響影象質量的情況下減少影象大小。
支援所有流行的影象格式，包括WebP。
Elementor: WordPress頁面生成器外掛
市場上有幾個頁面構建器選項，包括視覺化網站構建器Spectra。
Elementor是一個非常受歡迎的頁面生成器。它對初學者很友好，使用易於使用的拖放建站方法，使你能夠建立漂亮的頁面。
如果你已經安裝了我們的入門模板作為本教學的一部分，你已經安裝了Elementor。
如果你想讓你的網站有更多創造性的 Elementor 部件，你可以安裝Ultimate Addons for Elementor。
它提供了40多個小工具和擴充套件，100多個網站模板，以及200多個預建的欄目塊，所有這些都可以按照你想要的方式定製。
總而言之，幾個WordPress外掛可以幫助你為你的網站增加功能。我們幾乎沒有觸及表面。
然而，這些必須使用的外掛是很好的開始。
想要更多的選擇嗎？請看我們關於2023年每個成功的WordPress網站的最佳WordPress外掛的詳細文章。
想要WooCommerce專用的WordPress外掛？那些可以幫助增加銷售和轉化率的？
這裡有一份每個商店都需要的最佳WooCommerce外掛的清單。
最佳相容Elementor的WooCommerce主題
現在有很多WordPress主題，其中很多都與Elementor和WooCommerce相容。
雖然我們沒有在這裡列出所有的主題，但我們已經提到了一些頂級的相容Elementor構建器的WooCommerce主題。選擇這些主題之一應該能提供你所尋找的體驗。
1. Astra
我們擁有超過一百萬的安裝量，並且是唯一的非預設WordPress主題來實現這一目標，我們對建立高效能、優化的主題有一定的瞭解。
Astra是一個輕量級的WordPress主題，提供與Elementor和WooCommerce的整合。此外，Astra帶有現成的WooCommerce演示網站，可以使用Elementor輕鬆定製。
使用Astra，你會得到：
- 更快的商店，有助於提高轉換率
- 一個下拉式購物車，允許使用者從任何頁面檢視他們的購物車
- 轉化優化的結賬過程，從而降低購物車放棄率
- 用銷售氣泡抓住使用者的注意力，幫助提高銷售額
- 完全響應的網站，在所有裝置上都能正常工作
- 可定製的商店，無需編寫任何一行程式碼
想要更多的功能？
升級到Astra Pro並獲得額外的WooCommerce功能，如：
- 無限滾動，在使用者不斷滾動時動態載入你的產品
- 額外的結賬選項，以提高使用者體驗，如兩步結賬，無干擾結賬，以及更多。
- 更多的產品展示和畫廊選項，可以輕鬆調整。也可選擇在燈箱中開啟圖片
- 產品快速瀏覽功能允許使用者在不訪問詳細產品頁面的情況下預覽產品細節。這有助於提高轉換率
- 產品過濾器的畫布外側邊欄
2. Hello Elementor + Theme Builder
Elementor是一個非常受歡迎的WordPress頁面生成器外掛，它有一些自己的主題，你可能想檢查一下。
這些模板與WooCommerce配合得很好，可以使用Elementor WooCommerce Builder輕鬆定製。
使用專用的WooCommerce部件，如價格、新增到購物車的按鈕，以及Elementor主題生成器的功能，你可以按照你想要的方式設計你的商店和產品頁面。
3. GeneratePress
GeneratePress是另一個流行的WordPress主題，與WooCommerce相容。
使用WordPress定製器，GeneratePress的WooCommerce設定允許你配置任何東西，如下拉式購物車、無干擾結賬模式等。
雖然GeneratePress主題在WordPress上是免費的，但要訪問WooCommerce設定，你需要GeneratePress Premium。
4. Neve
Neve是一個支援WooCommerce的WordPress主題，它有幾個由Elementor提供的現成的演示網站。
Neve的免費版本提供完整的WooCommerce相容性。對於更多的WooCommerce整合，你可能要考慮專業版。
Neve專業版包含一個WooCommerce booster模組，允許你定製你的商店、產品和結帳頁面。
5. OceanWP
OceanWP是一個流行的WordPress主題，擁有700,000多個活躍的安裝，為WooCommerce商店提供了許多內建功能。
你有現成的WooCommerce演示網站，都是由Elementor提供的。
WooCommerce的一些額外功能包括：
- 產品快速瀏覽
- 下拉式購物車
- 浮動的新增到購物車按鈕
- 無干擾的結賬過程
OceanWP為您提供大量的定製選項，並與Elementor相容。
Elementor vs. Elementor Pro：何時升級
Elementor的免費版本很好用。無論你是剛開始還是經驗豐富的WordPress網站開發者，Elementor都能提供一系列的設計可能性。
然而，如果你正在尋找更多的工具和功能來提高轉換率和銷售，總有Elementor擴充套件和Elementor Pro。
雖然我們在下面的比較表中更多地關注WooCommerce和Elementor方面，但下面是Elementor和Elementor Pro之間的一些重要區別。
- 雖然主題生成器允許你定製你的主題的每一點，但Elementor Pro的主題生成器允許你超越主題限制。使用 Elementor，你可以直觀地設計網站的各種元素，如頁首、頁尾、檔案頁、單篇文章等。這是否涉及編碼？完全不需要！而且它可以在幾乎所有的WordPress上使用！而且它幾乎適用於任何WordPress主題。
- 你如何建立聯絡表格？我們猜測它是通過安裝一個聯絡表單外掛，如WP表單、Ninja表單、聯絡表單7，等等。雖然這些都是很好的選擇，但Elementor Pro的表單部件給你同樣的靈活性。在飛行中設計你的表格，並設定自定義警報和通知。想要整合一些自動化或CRM工具？Elementor Pro的表單部件讓你只需點選幾下就能做到。
- 你使用過Elementor庫中的專業模板和塊嗎？如果你用過，你會知道專業版有更多的選擇。使用這些專業設計的模板和區塊，你可以輕鬆地定製它們，以建立令人驚歎的登陸頁面、網頁、動畫標題、表格，以及更多。
除了上述內容，以下是你可以考慮使用Elementor專業版的原因，特別是如果你擁有一家網店。
| WooCommerce特點 | Elementor Free | Elementor Pro |
| 價格表小工具 |  |
 |
| 價格清單小工具 | |
|
| 產品檔案模板 | |
|
| 單一產品模板 | |
|
| Woo產品小工具 | |
|
| Woo類別小工具 | |
|
| WooCommerce模板&區塊 | |
|
| 20+ WooCommerce小工具 | |
|
WooCommerce, Astra和Elementor三者可以很好地組合
一個成功的網上商店需要一個全面的平臺來建立。當在WordPress上建立一個網上商店時，WooCommerce是最好的。
它是一個非常受歡迎的電子商務平臺，可以與WordPress和其他外掛和主題無縫整合。最重要的是，WooCommerce是開源的，而且完全免費
當你把WooCommerce與Elementor和Astra結合在一起時，你就有了一個高度優化的網上商店，它可以轉化和提高銷售。
更不用說，在購物體驗上也是非常高的!
現在交給你了。你是否使用 Elementor 和 Astra 主題建立了一個 WooCommerce 商店？或者你使用了不同的頁面生成器和WordPress主題？讓我們知道。
評論留言