如何提高在线商店的移动转化率

人们在手机上花费的时间比以往任何时候都多。 我们几乎将它们用于所有事情——银行业务、投资、查看天气、监控锻炼、听音乐、导航，当然还有购物。

近 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 的力量。