標籤: Variation Swatches for WooCommerce

本篇課程要教您如何建立一個專業、漂亮、免費的電商網站，我將使用最好的和免費的資源建置，免費主題、免費的頁面編輯器、免費的外掛就可以建置一個像Amazon、Walmart、Flipkart和aliexpress，這樣的電子商務網站。雖然它使用免費的工具建立，但提供功能一樣讓您可以上架任何商品，經營自己的電子商務網站。這裡提供可變商品的上架工具、靈活運費設定，可依送貨地址、重量、尺寸、運費等等條件的判斷組合進行結帳。支援第三方支付設定，可以註冊如綠界科技、藍新金流等已通過申請金流支付工具，安裝在網站上使用。 電商網站支援電腦、平板及手機多介面的顯示，當我們將網站頁面編輯完成後，可以即時切換平板及手機的畫面，快速方便的優化我們要的畫頁效果。還有SEO工具，讓你在Google搜尋上，獲得更好的排名順序，你不需要任何技術或程式編程知識來自己建立這個網站，只需簡單的拖放，就可以完成專業、漂亮、免費的電商網站建置。 網站託管、WordPress及SSL安裝設定 WordPress是任何類型的網站建置的首選。無論是眾籌網站、電子商務網站、簡單的Blog網站或是商業網站等。任何類型的網站建置都需要兩個基本的東西，域名及網站伺服器主機。 域名是網域名稱，或您網站的網址，例如：godaddy.com、blogger.com、youtube.com、google.com，所有這些東西都是不同的領域名稱，所以我們須要購買互聯網上的域名。這樣每當有人想訪問時，他們可以簡單地輸入您的網站名稱，就是在瀏覽器的URL欄位中輸入您網站的域名，這樣他們就可以登錄到您的網站。 第二個與您的網站有關的重要事項是您網站的託管主機，基本上就是網站所在的計算機。所以如果你看到整個網站包括所有不同的媒體文件、所有不同的活動、不同的頁面等，網站的數據庫實際上這個完整的網站是保存在託管的計算機上。而這台計算機是24小時運行的，每當有來自何任何不特定國家的人想訪問您的網站時，他們是隨時可以瀏覽到您的網站的。所以您的網站始終是在執行中的。 這時您託管的計算機的速度就很重要，您的網站安全、甚至您的網站在Google中搜尋的排名結果，完全取決於您的託管，所以如果你選擇了一個好的且可靠的託管主機，您的網站速度和性能將是驚人的，你將有更好的安全性網站，你的網站在Google搜尋上的排名也會更好。相對地，若你選擇一個便宜且不太OK的託管主機，您的網站速度且性能可能會較差，並且您網站的安全性也將沒那麼OK，你也不會得到更好的Google搜尋排名結果。 在市場上有數以千計的不同託管產品，這裏有一些不錯的託管主機推薦。 HOSTINGER A2 HOSTING FASTCOMET BLUEHOST 這些託管雲端主機，都有很方便使用的架站工具可以運用。CPanel和Softaculous應用程式安裝工具等。 這些工具將提供非常有用的安裝WordPress網站工具及設定域名工具。他們也提供免費的備份工具，所以你的網站會自動每天備份，即使你的網站發生了什麼事，您也可以很方便的恢復你的網站內容。另外，他們提供免費的Cloudflare的CDN服務，讓網址有SSL加密服務。這非常重要，因為現在新的網址，google都要SSL加密認證。還有線上支付，也一定要求網站必需是支持SSL加密證書，如果您沒有SSL安裝在您的網域上的證書，您將無法接受線上支付的功能。 當然若您不想用雲端的託管主機，想自行架構網站主機的話。我之後也會寫一篇如何自行架設網站主機的文章給各位參考。要自行架設主機建議有一個固定IP會比較方便。基本上就是一台計算機中先安裝Linux作業系統，或是安裝NAS(FreeBSD)系統，然後再該系統上建置Docker及Nginx，之後再利用Docker建置WordPress網站及用Nginx設定SSL網址加密證書。 不過，無論如何，我們都需要先到GoDaddy或是Namecheap先購買註冊一個網域名稱。有了域名，接著再設定DNS的指定，之後才是架設安裝WordPress網站的步驟。 GoDaddy的DNS設定畫面如下 Namecheap的DNS設定畫面如下 SSL的設定，基本上只要將網址的DNS設定IP完成後，在HOSTINGER、A2 HOSTING、FASTCOMET或是BLUEHOST上設定SSL，只要將網域的網址填入Let’s Encrypt SSL的工具上就會自動產生網址的SSL加密證書。若是自建主機的話，在Nginx上，一樣也是使用Let’s Encrypt SSL設定網址的加密證書。 BLUEHOST SSL設定 FASTCOMET SSL設定 Nginx Proxy Manage SSL設定 WordPress 的安裝，這幾個託管主機在安裝WordPress網站時，只要按照步驟，填入網域名稱及帳密後，系統就會自動安裝之。而利用Docker的Portainer中的Stack建置WordPress網站一樣也是修改一些參數，之後系統也會自動安裝並建置好WordPress網站，如下圖示。 Cpanel上選擇WordPress安裝建置工具 Portainer上用Stack安裝工具 基本WordPress設定 在執行完WordPress網站建置安裝後，我們直接登入WordPress後台，這裏來說明基本的WordPress設定。 首先，我們要登入WordPress網站的後台網址，就是在網站網址的後面加上/wp-admin。這樣它就會導到WordPress網站的後台登入頁面。接著我們填入當初建置WordPress網站的帳號密碼，即可登入網站的後台儀表板畫面。 在我們登入到後台管理介面後，我們可以看到左邊有一排管理功能的介面，登入後我們首先會看到控制台儀表板的畫面，不過第一次登入後控制台的儀表板上的資訊都不是太重要的訊息，您可以從”顯示項目設定”中，篩選掉你不想顯示的項目。 你也可以先將目前全部的項目先篩選掉，等之後安裝較重要新的主題及外掛，再讓這些項目顯示。 接下來左邊比較重要的選項是文章的選項，我們將使用這個選項來建立新的文章。如果你看過我們其他網站建置的文章，你大概就知道我這裏講的這類Blog文章是從這個地方這個文章選項中建立。 接著，我們有媒體選項，無論什麼媒體文件、圖片。媒體文件存在於您的網站上，你可以從這裡看到所有這些。如果你願意，可以從這裡管理它們，你可以新增一些新的媒體文件。 然後是頁面選項，顯然頁面選項是用在建立並管理不同頁面。然後，還有評論選項，它是用來管理評論，如果你想准許或不回複，請從這裡的核准。如果你要過濾垃圾郵件或刪除郵件，你也可以從這裡執行。 接下來的選項是最重要的選項之一，就是網站的外觀選項。這個外觀選項是更改網站的佈局樣式。在安裝好WordPress網站後，會有三個預設的主機，2020、2021及2022這三個主題。我們只要啟用每一個主題，網站的外觀佈局風格樣式就會跟著即時變化。下面我們依序啟用這三個主題，並分別重新整理網頁，來看看網站的即時變化。 2020主題 2021主題 2022主題 不同的主題讓你網站設計的風格是完全改變，所以基本上網站的外觀主題，它會改變風格和網站佈局樣式。所以，你要記住一件事，若你的網站已經確認好外觀主題並啟用之，其他這些額外不相關的主題，請刪除它們。 接下來是另一個重要選項之一，就是外掛選項。外掛是一種軟體或是新增一些額外功能的附加模組或WordPress網站的功能。例如，現在我們剛剛建立的這個網站，它基本上只是一個電商平台網站，實際上沒有可用的功能。沒有可以新增活動相關或可用的購物車功能、沒有可以製作廣告系列、沒有可以知道目前訂單進度的功能、沒有任何支付功能的整合功能。所以我們要新增這些功能的外掛來組成電商平台主題的網站。 另外，還有設定的選項，這裡可以設定網站標題、網站說明，你可以從這裡改變它。你可以從這裡確保你的電子郵件是否正確，如果不是，你可以在這裡更換它。然後勾選任何人都可以註冊成會員資格的選項，如果你不勾選，就沒有人可以在你的網站上註冊。若不讓其他人可以註冊成為會員，這樣我們建置的電商平台網站就沒辦法讓人們下單購物、追踨客戶的購物行為或是建置會員聯盟行銷來擴大我們的電商業績。只有在他們能夠在你的網站上註冊，我們建置電商網站才有意義，所以請確保勾選任何人都可註冊的選項有被勾選。 然後是網站的介面語言、時區，這裡要確認正確。這樣電商購物活動的發起計算才不會有錯。 接著是永久連結選項這邊。永久連結的設定，建議選擇”文章名稱”，這是最好的結構。所以請確認你選擇此選項目點擊儲存確認。這樣所有的基本設定與我們的WordPress網站相關才算初步完成。 安裝 主題(Theme) 及 外掛(Plugins) 電商平台網網的主題及外掛安裝如下： 主題：搜尋安裝Woostify 外掛：搜尋安裝Elementor、WooCommerce、TI WooCommerce Wishlist、Variation Swatches for WooCommerce、Contact Form7、Conditional Shipping for WooCommerce、YITH WooCommerce Affiliates 外掛工具說明 Elementor：是目前WordPress最熱門的頁面編輯器，可以輕鬆的製作漂亮的頁面。 WooCommerce：是全世界最受歡迎的開放原始碼電子商務解決方案。目前比較受歡迎的網站電子商務開店平台工具有Shopify、Shopline、WooCommerce、Wix購物車、91APP及Cyberbiz，其中只有WooCommerce是免費，不過它屬於自己開發範圍。 TI WooCommerce Wishlist：它是一個強大的WordPress願望清單外掛。在架設購物網站時，我們需要有一個工具，方便收集顧客正在考慮購買商品的工具。 Variation Swatches for WooCommerce：為WooCommerce可變/變體產品提供顏色、圖片、按鈕樣式的屬性選項工具，是銷售服裝、鞋子、多品項樣式等商品的B2C企業網站必修外掛工具。 Contact Form7：可管理多份聯絡表單，也能透過簡單的標記靈活自訂表單及郵件內容外掛工具。 Conditional Shipping for WooCommerce：WooCommerce運送方式設定的延伸功能，WooCommerce提供的運送方式設定提供的基本的運送區域、運送選項及運送類別的設定，但假如今天遇到一個需求，需要判斷假設運送商品的總費用超過1000元，要收150元，超過2000元，要收250元，超過3000元以上，才免運費。這樣的需求設定的話，我們就需要這樣的外掛來設定。 YITH WooCommerce Affiliates：Affiliate是會員聯盟推廣系統，也就是會員佣金分潤系統的意思，現今社會越來越多企業的業務員推銷，是透過網路來經營。YITH WooCommerce Affiliates就是提供網站一個可以讓員工成為網站會員後，只要是由自己這邊網址推銷出去，並完成商品結算的業績，該員工就可以得到應得的佣金，並可以向公司申請領款作業。 TI Wishlist 設定 TI Wishlish外掛啟用後，一開始要設置基本設定。我們按下"Run the Setup Wizard"，開始設定。基本上就是按它預設的設定，一路按下繼續按鍵到完成，最後設置完成後，再按下"RETURN TO THE WORDPRESS DASHBOARD"，回到控制頁面。下面一步步用圖片解釋。 WooCommerce 設定 WooCommerce啟用後，我們到側邊功能項目中點選WooCommerce選項，接著可以依下列順序設定。 這裡選擇"不，謝了" WooCommerce設定 不同運送類別的運費計算可以參考系統提供的範例來說明，我們將滑鼠移到?的位置，就會出現範例提示，如下圖示。 建立簡易商品 接著我們新建一個商品範例。 下面是設定庫存 下面是設定運送方式 運送類別就是上面在WooCommerce設定時提到的，不同的商品可以選擇自己的運送類別，就會產生不同的運費，這裡就可以為目前的商品，選擇T Shirt類別的運費計算。最後，按下發佈按鈕，然後就可以用查看商品的方式，看到該商品建立完成後的結果，如下圖示。 建立可變商品 要建立可變商品，要先到商品屬性這邊先建立各種商品的屬性，如顏色、大小等等，如下圖示。 接著就是我們來建立一個可變商品範例。我們大部分延用剛剛建立簡單商品的架構一樣來建立另一個可變商品，這裡主要是要帶到可變商品如何建立的部分。 在商品資料部分，在屬性部分，我們分別新增Color及Size屬性，接著在Color部分新增紅色、綠色及黑色。在Size部分新增數值大及中的Size。 如下圖示。 接著再到商品資料的變化類型部分，選擇"由所有屬性建立變化類型"選項，再按下送出。這樣就會產生出由屬性中的Color(3色)及Size(2值)的數值，排列出六種排列組合，如下圖示。 然後，再分別設定這六種排列組合的圖片、貨號、價格(定價及折扣價)、庫存狀態、重量及尺寸等細部資訊。 待全部排列組合填入完整資料後，並按下發佈按鈕。我們就可以看到該商品在前端頁面產生的結果，該商品就可以有Color及Size的分別選項，我們選擇不同的Color及Size組合，它就可以顯示該不同組合的細部資訊及價格等等。 首頁建置 接著我們繼續來建置網站的首頁頁面內容，如下圖示，這就是我們最後要呈現的結果。 https://youtu.be/X6EkqqAteB0 接下來，我們就一步步的講解如何製作這樣的首頁內容。 首先，我們到頁面的功能下新增頁面，標題處填入"Home"，並按下發佈按鈕。 然後，先到"設定閱讀"的功能下，設定靜態頁面中的靜態首頁設定為剛剛新建立的"Home"頁面，並按下儲存設定。 接著再回到Home頁面中，點選使用Elementor頁面編輯器。 在首頁中，我們可以分成多個區塊，我們就一個區塊一個區塊的講解，他是如何製作的，我會把它切成多個區塊，然後一個區塊拆解來成影片來說明。首先是下面這個銷售區廣告區塊。 https://youtu.be/UEZusn9JIcI 接著，我們繼續來建置網站的主題特色Banner，詳細製作流程如下面影片。 https://youtu.be/BKXL0pjnwOU 接著新增類別快速檢視區塊。 https://youtu.be/vhsc4hu8kBw 接著是做WooCommerce的特色商品區塊。我們會用到WooCommerce ShortCode，而它的網址可以參考這個網址 https://woocommerce.com/document/woocommerce-shortcodes/ https://youtu.be/ZcTuX7ztkBg 網站裡面需要有推薦人，還有推薦星等這些保證，這些訊息可以讓逛網站的客戶得到安心，所以接下來我們來製作推薦區塊。 https://youtu.be/AEhQ0ap53H8 最後在首頁頁面的最下面，我們可以放入IG的圖片，讓人點選連結，可以事先複製幾張自己在IG上好看的圖片，再將對應的網址先暫存好，接著就可以依下列方式開始作業。 https://youtu.be/AaAY9vMcBjQ 以上流程，就是我如何製作一個首頁頁面內容的教學步驟。 修飾網站在手機畫面 用WordPress架設網站最好的優點之一就是它的架構在完成同時也就包含平板跟手機的框架，而且我們一樣可以方便的用頁面編輯器做調整，以下我們就試著將首頁的頁面切換為手機畫面來修飾編輯。 https://youtu.be/goC0P9K7iLY 建立 Blog 文章 下面說明如何建立一篇傳統的文章，我快速的以國外的範例來說明，網路上有非常多用Elementor頁面編輯器的解說，各位也可以上網google看看。 https://youtu.be/5HaRd1napQI 建置Blog、聯繫我們及商品追踨等頁面 接著我們來建立Blog、聯繫我們及商品追踨等頁面，這些頁面建立完成後，可以將頁面放置在網站上的選單部分。 https://youtu.be/gSyCbXp8fbg 建立選單及頁尾 接著繼續，我們再來建置網站的上面都會有的選單功能及頁尾的部分。 https://youtu.be/9rGqaumknAM 商品頁面的側邊工具 https://youtu.be/CNvHsUT7el0 Blog頁面的側邊工具 https://youtu.be/wfYrsG2-5ow 最後網站優化 基本上網站大部分的功能已經設定完成，最後，我再將一些基本的功能帶過，詳細的外觀自訂功能，各位可以自行試玩，或是上網搜尋其他人的分享等等。 https://youtu.be/dQ37bPOkf6E 以上全部，就是本課程的全部內容。謝謝~

標籤: Variation Swatches for WooCommerce

用WordPress建置電子商務網站 – 2022

快速鏈結