如何提高在線商店的移動轉化率

人們在手機上花費的時間比以往任何時候都多。 我們幾乎將它們用於所有事情——銀行業務、投資、查看天氣、監控鍛煉、聽音樂、導航，當然還有購物。

近 55% 的網站流量來自移動設備，60% 的在線購物者首先使用手機尋找產品。 如果您的商店不能在移動設備上提供無縫的用戶體驗，您就有可能失去大量潛在客戶。

但是，您如何優化您的在線商店以增加移動轉化率？

從響應式 WordPress 主題開始

高質量的 WordPress 主題是響應式在線商店的完美起點。 您的主題是整個網站的基礎，因此請選擇一個能夠在各種尺寸的設備上提供出色體驗的主題。

以下是評估主題的一些提示：

• 在平板電腦和手機上測試主題演示。 由於您可能不擁有所有可能的屏幕尺寸的設備，您可以使用網站響應測試工具之類的網站來模擬體驗。 演示元素在所有屏幕尺寸上都應該看起來不錯——不應該被截斷、難以閱讀或難以使用。
• 在查看主題演示時，調整瀏覽器窗口的大小。 內容應作相應調整，不應截斷任何內容。
• 在主題描述中尋找響應式功能。 它應該特別提到“響應式設計”或討論主題如何適應移動設備。
• 通過 Google 的移動友好型測試工具運行主題演示。
• 檢查評論。 閱讀主題用戶的評分和評論。 注意任何關於響應式設計的負面評論。

您的主題與 WooCommerce 集成也很重要。 這將防止響應性問題以及任何其他潛在衝突。

Storefront主題滿足上述所有要求，並且靈活且易於定制。 此外，它還有為特定行業設計的各種兒童主題——時尚、玩具、數字產品、預訂等等。

牢記移動可用性

可用性是購物者與您的網站互動的效率和效率。 可用性差會對銷售、轉化、品牌認知和 SEO 產生負面影響。 在審查您的移動體驗時，可用性應該是您的首要任務。 考慮以下：

• 用拇指思考。 移動用戶將僅使用他們的拇指與您的網站進行交互。 所有可點擊的元素——鏈接、按鈕、菜單項、圖像——都需要足夠大，以便網站訪問者輕鬆點擊。 如果它們太小或靠得太近，有人可能會誤點擊錯誤的東西。
• 避免彈出窗口和其他干擾。 由於移動屏幕非常小，因此優先考慮向訪問者展示的內容很重要。 覆蓋整個手機屏幕的彈窗會破壞您的用戶體驗，甚至對您的搜索引擎排名產生負面影響； 廣告和其他通知也是如此。 如果您決定使用此類內容，請確保它僅佔據屏幕的一部分並且易於忽略。
• 實施產品過濾器。 如果您提供大量產品，在線購物者可能需要滾動一段時間才能找到他們想要的東西。 這在一次只顯示幾個產品的移動屏幕上尤其困難。 您的客戶在購買之前可能會感到沮喪並放棄。 過濾器可幫助他們根據要查找的內容縮小選擇範圍。 嘗試像 WooCommerce 產品過濾器這樣的擴展來提供排序功能。
• 使用足夠大的字體。 如果您的網站文字太小，移動用戶可能很難閱讀任何內容——他們不應該通過捏合和縮放來了解您的產品。 根據您的站點和字體選擇，您可能需要為移動設備設置不同的字體大小。
• 分解文字。 如果您的頁麵包含大量信息，請將其分解為更易於在小屏幕上導航的較小部分。 您可以使用手風琴、切換或項目符號來做到這一點。 在長博客文章中，添加指向允許用戶直接跳轉到有趣主題的小節的鏈接。

簡化結帳頁面

儘管多年來在移動設備上的購物量顯著增加，但轉化率並沒有那麼高。 事實上，移動端的平均電子商務轉化率僅為 2.03%，而桌面端為 3.83%。

您的結帳流程在銷售過程中起著至關重要的作用。 在移動設備上盡可能簡單，以提高轉化率。 如果您的客戶購買時間過長，他們會放棄並在其他地方購物。

刪除不必要的字段

首先仔細查看結帳所需的信息。 一切都需要嗎？ 您可能會發現有些字段可以刪除：

• 如果您不向企業銷售，請刪除公司名稱字段。
• 如果您想不出可能需要給客戶打電話的場景，請刪除電話字段。
• 如果您不接受註釋，請刪除 Order Notes 字段。

字段越少越好，尤其是在移動設備上。 閱讀有關如何自定義 WooCommerce 結帳字段的更多信息。

允許客人結帳

客戶帳戶非常棒，可以通過自動填寫他們的信息並保存他們的信用卡數據來加快回頭客的結賬速度。 但是新客戶呢？

不是每個人都想在您的商店創建帳戶，尤其是在他們希望盡快結賬的移動設備上。 事實上，要求客戶帳戶被認為是造成 35% 的廢棄購物車的原因。

要允許使用 WooCommerce 的訪客結帳：

1. 導航到WooCommerce → 設置 → 帳戶和隱私。
2. 選擇允許客戶在沒有帳戶的情況下下訂單。
3. 單擊頁面底部的保存更改按鈕。

了解如何確定訪客結賬是否適合您的商店。

接受社交登錄

您的客戶可能已在其移動設備上登錄社交媒體帳戶。 在您的網站上啟用社交登錄可以讓他們使用 Facebook、Twitter、Google、Amazon 等登錄，以簡化結帳並避免他們創建新帳戶。

啟用 WooCommerce 社交登錄。

接受多種付款方式

接受一種以上的付款方式可以加快結賬速度。 雖然您可能還允許信用卡交易，但啟用 PayPal 或 Amazon Pay 等選項可讓客戶使用現有賬戶付款，而不是取出信用卡並輸入所有詳細信息。

查看 WooCommerce 支付網關集成

使結帳字段足夠高

客戶可以輕鬆填寫您網站上的結帳字段，這一點很重要。 確保字段足夠高，以便他們無需放大即可點擊和填寫信息。您可以使用一些簡單的 CSS 來做到這一點。

首先在結帳頁面上使用瀏覽器檢查器。 這將幫助您識別每個單獨字段的類別。 然後，為每個特定類使用以下代碼； 此示例中使用了電子郵件字段。

 /** Customize height of checkout fields **/ input[type='email'].input-text{ padding: 100px !important; }

根據您的特定站點和當前設置調整填充； 您可能需要玩一點才能找到有效的方法。 您還可以使用媒體查詢自定義此代碼適用的特定設備。

注意：如果您不熟悉代碼和解決潛在衝突，您可能需要選擇 WooExpert 或開發人員尋求幫助。 根據我們的支持政策，我們無法為自定義提供支持。

編輯產品頁面

您的各個產品頁面也應具有響應性，這一點很重要。 客戶應該能夠閱讀產品詳細信息、翻閱照片並將商品添加到購物車。

使“添加到購物車”按鈕具有粘性

當購物者閱讀產品信息時，一個粘性的“添加到購物車”按鈕會跟隨在頁面下方。 如果他們確信要購買，他們不必一直向上滾動即可進行購買。 事實上，一個粘性的添加到購物車按鈕已被證明可以增加 7.9% 的訂單！ 添加此 CSS 以使您的按鈕在移動設備上具有粘性：

 /** Make the Add to Cart button sticky **/ @media only screen and (max-width: 900px) { .cart { position: fixed; bottom: 0; background: #ffffff; width: 100%; z-index: 3; } }

根據您的主題和網站設計，您可能需要稍微使用一下 CSS。 但是如果你不想編輯代碼，你也可以使用一個插件，比如 WooCommerce 的 Sticky Add to Cart。

使圖像直觀

當購物者登陸產品頁面時，他們希望能夠滑動您的圖片庫以查看更多照片並用手指放大商品。 這些移動手勢非常直觀，幾乎是下意識的。 確保您的網站支持它們。

添加箭頭或圓點以指示何時有多張照片。 否則，您的移動用戶可能甚至不知道他們可以滑動！

優先處理重要信息

確保客戶無需滾動很遠即可查看關鍵產品信息。 優先考慮價格、變化（顏色、尺寸等）、折扣、評論和其他特定於您產品的細節：如果您銷售服裝，材料可能很重要。 或者，如果您是一家電子商店，您可能需要強調每次購買時附帶的保修。

完整的產品描述和規格（洗滌說明、SKU、成分等）等附加信息可以放在頁面下方。 這樣，如果您的客戶想要更多信息，他們可以很容易地找到它，但如果他們只對基本信息感到滿意，他們就不會不知所措。

簡化您的移動菜單

讓移動設備上的主菜單盡可能簡單。 長長的頁面列表會使網站訪問者不知所措並使他們感到困惑。 將其縮小到基本要素，然後優先考慮它們列出的順序，最重要的頁面在前。

Good Batch 縮短了他們的移動菜單，除了登錄和購物車鏈接外，僅包含五個頁面。 這很簡單，也很重要。

如果您確實需要包含很多頁面，請嘗試使用帶有可擴展切換的子菜單。 限制主菜單項並在用戶展開每個子菜單項時顯示子菜單項。 確保使用箭頭等符號表示菜單已展開！

Nuria 在移動設備上提供五個主菜單項，每個項旁邊都有箭頭，表示有更多選項。 當用戶單擊時，主菜單會滑動以顯示帶有清晰“後退”按鈕的子菜單。 這使他們能夠在不壓倒客戶的情況下顯示所有必要的選項。

顯示移動菜單的方法有多種，因此請選擇最適合您的受眾的一種。 它們包括：

• 漢堡菜單。 漢堡符號是垂直堆疊的三行。 在用戶單擊該符號之前，菜單會一直隱藏。 對於擁有大量頁面但網站訪問者更難找到的網站來說，這是一個很好的選擇。
• 一個標籤菜單。 這非常類似於典型的桌面導航，並在站點頂部水平列出菜單項。 這應該只用於具有最少鏈接的菜單； 用戶不必縮放或滾動即可查看所有項目。
• 一個浮動操作按鈕。 帶有菜單圖標的按鈕漂浮在頁面上，並在用戶滾動時跟隨用戶。 單擊時，它會展開以顯示菜單。 這是保持主菜單可訪問的好方法，但可能會分散注意力或掩蓋內容。
• 一個下拉菜單。 單擊以顯示頁面選項時會打開頁面頂部的菜單欄。 它比漢堡菜單佔用更多空間，但網站訪問者可能更容易看到。

通常，您的主題將包括響應式菜單樣式。 如果沒有，或者您想使用其他選項，請查看以下插件：

• WP 移動菜單
• ShiftNav
• 響應式菜單

無論您選擇哪個選項，請確保您的客戶易於使用並滿足他們的需求。 請記住，這可能意味著創建一個完全獨立的移動菜單！

使重要功能易於查找

由於移動設備上的屏幕空間有限，物品很容易丟失。 確保訪問者可以快速找到關鍵功能。

使搜索欄可見

許多網站的側邊欄中都有一個搜索框，但它通常被推到移動設備頁面的底部。 桌面標題中的搜索功能可能不適合手機上的同一空間。 但它對於在線購物者來說是至關重要的功能，他們可以從尋找他們想要的產品的能力中受益。

一個很好的解決方案是將搜索欄包含在您的移動菜單中，以便購物者輕鬆看到。 一些主題為此功能提供了設置，但如果您沒有，您可以使用自定義代碼實現相同的功能。

打開header.php文件並添加以下函數： <?php get_search_form(); ?> <?php get_search_form(); ?> . 然後，您可以根據需要使用 CSS 對其進行樣式設置。

如果你不想接觸代碼，像 Ivory Search 這樣的插件可以實現相同的功能。

清楚地顯示聯繫信息

如果您在頁腳或側邊欄中包含聯繫信息，移動用戶將很難查看它，因為他們必須滾動到頁面底部。 在菜單中使用指向您的聯繫頁面的可見鏈接來反駁這一點。

您可能還希望在主菜單中包含可點擊的電話號碼和/或電子郵件地址，以便用戶可以輕鬆取得聯繫。 去做這個：

1. 導航到 WordPress 儀表板中的外觀 → 菜單。
2. 在“選擇要編輯的菜單”旁邊的下拉菜單中，選擇正確的菜單。 這將是您的主菜單或移動菜單，具體取決於您的設置方式。
3. 展開左列中的自定義鏈接。
4. 在URL框中，添加相應的鏈接。 對於電話號碼，請添加電話：+18005553927，將號碼替換為您的號碼。 確保沒有空格或其他符號。 對於電子郵件地址，請添加 mailto:[email protected]。
5. 在鏈接文本框中，添加將顯示在菜單上的文本。 例如，您可能會說“致電我們”或“致電 800-555-3927”。
6. 單擊添加到菜單按鈕並拖動到您選擇的位置。
7. 單擊右下角的藍色保存菜單按鈕。

當用戶點擊移動設備上的電話號碼時，它會自動呼叫您。 當他們單擊您的電子郵件地址時，它將在他們的默認電子郵件應用程序中向您打開一封新電子郵件。

使購物車易於訪問

如果客戶希望在將產品添加到購物車後繼續購物，那麼能夠編輯該購物車並稍後結帳對他們來說很重要。

WooCommerce 的迷你購物車插件為您網站的桌面版和移動版添加了購物車選項。 在桌面上，購物車包括商品名稱、照片和價格，並允許購物者在不離開頁面的情況下編輯數量。 在移動設備上，它會顯示購物車中的商品數量和訂單總額。 此外，購物者可以一鍵進入購物車頁面。

關注網站速度

雖然網站速度在任何設備上都很重要，但對於小型設備來說可能更重要。 移動購物者通常使用較慢的互聯網連接或蜂窩數據進行瀏覽，因此您應該盡一切可能確保您的網站盡快​​加載。 如果加載時間超過 3 秒，53% 的移動用戶會放棄網站，而 Google 新的移動優先索引會優先考慮您網站的移動版本。

首先了解您網站的當前加載時間。 GTMetrix 和 Pingdom 網站速度測試可以幫助您了解您的網站速度並提供改進建議。 Google PageSpeed Insights 甚至提供了專門針對移動設備的測試。

然後，使用以下資源來優化您的網站：

• 如何優化圖像以加快您的在線商店
• WooCommerce 和速度首先要考慮的事情
• 為什麼我的 WooCommerce 網站速度慢以及如何修復它
• 如何在 Google PageSpeed Insights for WooCommerce 上獲得高分
• 使用這些 Jetpack 功能加速您的 WooCommerce 網站

您可能還需要考慮啟用 AMP（加速移動頁面），這是一個由 Google 構建的框架，用於創建輕量級、簡化的移動體驗。 這是加快博客帖子速度的好方法，尤其是對於某些在線商店。 詳細了解如何使用 AMP 提高網站速度。

在移動設備上測試您的在線商店

定期測試您的商店並了解移動設備上的所有功能非常重要。 您網站的流程類似於上面列出的測試主題演示的步驟——使用 Google 的移動友好測試等工具和調整瀏覽器窗口大小等手動方法的組合。

測試一切！ 點擊每個鏈接； 滾動瀏覽每一頁； 並檢查每一項功能。 您網站的所有方面都應該易於在手機和平板電腦上查看、閱讀和導航。

移動設備上的一些小改動可以大大提高客戶滿意度和轉化率。 尋找更多提示？ 閱讀如何在移動設備上解鎖 WooCommerce 的力量。