如何通过 9 个简单步骤让您的 WooCommerce 网站移动就绪

让您的 WooCommerce 网站适合移动屏幕很容易。 但是，大多数 WooCommerce 所有者不知道如何以正确的方式进行操作。 此外，我们中有许多人不明白为什么它如此重要。

WooCommerce 为超过 28.19% 的在线商店提供支持。 排名前 100 万的电子商务网站中有 22% 使用 WooCommerce。

主持法庭

在过去十年中，人们的购物倾向发生了变化。 通过智能手机使用互联网重塑了他们的行为。 因此，如果您有 WooCommerce 在线商店，那么现在是时候让您的网站设计和功能适合任何类型的屏幕了。

好吧，我们是来帮忙的。 该博客将成为在移动设备上开发 WooCommerce 的终极指南。 让我们开始吧。

是什么让 WooCommerce 网站支持移动设备

可以在智能手机或平板电脑上查看的网站。 整个网站适合屏幕，不需要从右到左滚动，文本和图片会重新流动并动态调整大小。

Brian Coale，凯西印刷

除了台式机或笔记本电脑屏幕外，还可以访问具有智能手机或平板电脑屏幕上所有必要功能的移动响应网站。 但是，您会在这方面找到一些类似的术语。 您可能还听说过这些词——移动优先、移动友好或自适应设计。

所有这些术语都有一个共同的目标，即提高您的网站在移动设备上的可见度。

但是，您可以构建一个移动应用程序，并将所有移动客户带到那里。 此外，自适应设计意味着开发不同版本的网站以适应任何屏幕。 另一方面，当您在网站中开发移动用户体验时，您可以将此方法称为移动友好型。

移动商务的兴起和 WooCommerce 在移动设备上的重要性

去年全球智能手机用户数量预计将达到 35 亿。 而且，到 2021 年有望达到 38 亿。如果比较这个数字，2017 年是 27 亿。

高曲线不断增长，而且没有放缓的迹象。 随着数十亿人使用智能手机，移动商务的兴起显然势在必行。 与台式机或笔记本电脑相比，人们比以往任何时候都更喜欢通过手机购物。

Business Insider 预测，到 2020 年底，移动商务将达到 2840 亿美元。 其中涵盖了美国电子商务市场总量的近 45%。 因此，后疫情时代给人们的购物行为带来了变化。

如果你看到上面的图表，你可以很容易地理解零售电子商务销售额的百分比将从去年的 14.5% 增加到 18.1%。 据 Insider Intelligence 预测，到 2024 年，移动商务的复合年增长率 (CAGR) 将达到 25.5%，占电子商务总销售额的 44%。

因此，所有这些统计数据和数据只暗示一件事。

如果您有一个 WooCommerce 网站，并且您希望所有移动访问者都可以轻松地在您的在线商店购物，最好的方法是什么？ 您必须为他们开发适合移动设备的体验。

如何开发移动就绪的 WooCommerce 网站

1. 让我们快速检查一下 Google 移动设备友好测试
2. 开始优化您的图像
3. 重新考虑您的潜在客户生成弹出窗口
4. 开始使用适合移动设备的 WordPress 主题
5. 开发一个简单的菜单和站点导航
6. 寻求移动优化 WordPress 插件
7. 提高页面速度
8. 保持网站设计简单
9. 您需要最简单的结帐流程

1. 让我们快速检查一下 Google 移动设备友好测试

第一件事是找出您的 WooCommerce 网站现在有多少移动就绪。 因此，最简单的方法是参加免费的谷歌移动友好测试。 这非常简单。

您需要做的是转到 Google Mobile-Friendly 测试页，并将您的 URL 放在那里。 您会看到您的网站是否支持移动设备。 蓝色表示您可以开始了。 如果您看到红色，您肯定必须采取正确的措施。 它还显示您的网站在移动屏幕上的外观预览。

因此，谷歌为开发者发布了一个特殊的移动友好测试 API。 如果您是一名开发人员，您可以使用这个自动化工具完成两件事。 他们是 -

• 如此快速地测试更多页面
• 监控您网站上最重要的页面，您将不需要手动打开浏览器工具。

2. 开始优化你的图片

产品图片可能是您业务的最大增长因素。 超过 75% 的在线购物者在购物前被产品照片吸引。 因此，此策略应该与您的 WooCommerce 商店密不可分。

但这里有一件事非常关键。 图片对您的客户有好处，但它们也会不断占用空间。 结果，太多的图像需要更大的服务器和更长的加载时间。 它会妨碍您的页面加载速度。

此外，一个缓慢的站点在移动设备上变得更慢。 此外，如果高分辨率图像未针对小屏幕进行优化，您的客户将只能看到图像的片段或模糊版本。

摆脱这个问题的最好方法是使用图像优化工具。 对于我们的网站，我们使用非常简单且功能强大的照片优化器 Tiny PNG。

但是，还有许多其他方法可以为您的 WooCommerce on Mobile 应用图像优化。 您可以安装自动图像优化器 WordPress 插件。 此外，您还可以从延迟加载中获得帮助。 当您的任何访问者访问您的网站时，该功能会告诉用户的浏览器在必要时不要加载任何图像。 这有助于用户体验更快的着陆页，并且图像获得适当的加载时间。

您会在 WordPress 存储库中找到一些可靠的延迟加载插件。

3. 重新考虑您的潜在客户生成弹出窗口

弹出窗口是引领一代的成熟方法。 而且，这可能是增加注册和时事通讯转换的最常用渠道之一。 但是，如果您对网站访问者进行调查，无论他们喜欢与否，他们很可能会告诉您：弹出窗口很烦人。 尽管如此，前 10% 表现最好的弹出窗口的平均转化率为 9.28%。

所以，你应该使用弹出窗口。 但是有一个计划。 因为它们也会使您的网站变重。 因此，在移动屏幕上，弹出窗口会影响用户体验，最终导致高跳出率。

您可能已经在使用手机访问网站时体验过这种情况。 有时这完全是一团糟，当弹出窗口完全阻止您查看内容时，它们也会表现得很奇怪。 例如，您尝试删除它们，但它们不会或者您甚至找不到删除它们的选项。

这就是为什么如果您的 WooCommerce 网站的弹出窗口数量较少会是一件好事。 此外，您应该使用简约的。 此外，为了使您的网站更适合移动设备，您可以删除弹出窗口，并将其作为粘性表格放置在网页底部。

4. 开始使用适合移动设备的 WordPress 主题

这是 WordPress 如此受欢迎的优势之一。 它是开放的，您几乎可以做任何事情来使您的网站灵活。 因此，如果您在 WordPress 上构建 WooCommerce 商店，则有很多选项可以使其支持移动设备。

最好的方法之一是选择适合移动设备的 WordPress 主题。 在设计您的在线商店时，您会发现一个 WordPress 主题的移动外观比其他主题更好。

WordPress 现在有成群的响应式主题。 即使那些没有，或缺乏其设计，定期发布更新。 因此，如果您当前的 WordPress 主题不是移动响应式的，请首先检查最新的更新。 如果仍然如此，它们在移动设备上看起来很糟糕，那么现在是您应该选择更适合移动设备的轻量级 WordPress 主题的时候了。

5. 开发一个简单的菜单，使您的 WooCommerce 网站支持移动设备

在电话屏幕上，导航复杂的菜单有点困难，或者不太舒服。 例如，检查下面网站的两种不同外观。

第一个屏幕是移动就绪的。 所以你看到导航菜单在右上角。 它只会在任何访问者单击它时展开。 另一方面，第二个屏幕保留了浏览器可以向我们展示的几乎所有元素。 所有的标签都占据了屏幕，大量的内容充斥着着陆页，等等。

你可以简单地看看上面的图片。 菜单被简化了。 您只需单击它，您就会看到所有必要的页面。 但是，您可以根据需要设计您的 WooCommerce 商店。 但是保持你的菜单和导航简单会让你的网站变成一个移动友好的网站。

6. 使用移动优化 WordPress 插件

移动优化插件可帮助您的在线商店更加适合移动设备。 也许这是为移动用户改善用户体验的最简单方法之一。 此外，您可以通过上述方式采取的所有操作，此类插件只会让您的工作更轻松。

如果您已经在使用移动响应式 WordPress 主题，您仍然可能会遇到一些问题。 存在对齐问题、加载缓慢、整体响应不一致。 发生这种情况是因为更新是一个复杂的过程。 有时，他们不会像为 WordPress 主题设计的那样行事，并且需要时间来解决这些问题。

因此，为了支持 WooCommerce 商店的移动就绪外观，您可以安装并激活移动优化插件。 此外，这些类型的工具可以处理您在移动设备上的社交分享、跟踪移动用户交互等等。

因此，您会发现很多这方面的插件。 一些流行的名字是——Jetpack、WordPress Mobile Pack、AMP for WP、Responsive Mobile Menu 等。

7. 提高移动用户的页面速度

速度绝对是一个排名因素？ 是的。

约翰·穆勒，谷歌

您应该直接采取措施来提高 WooCommerce 商店的页面速度。 如果加载时间超过 3 秒，平均有 53% 的移动访问者会离开网站。 另一种观点认为，延迟 2 秒可以将跳出率提高高达 87%。

因此，显然人们在使用手机访问网站时很匆忙。 而且，如果您的页面速度与理想的加载时间不兼容，您应该尽快采取必要的步骤。

要开始测量在线商店的页面速度，您可以使用以下合适的工具 –

谷歌 PageSpeed 洞察力

在该工具分析您的页面速度后，您将看到一份详细报告，其中会给出综合分数、平均加载时间、每毫升每秒首次和最大内容绘制时间等。此外，它还会提供制作页面的建议快点。

在这里，你必须记住两件事。 第一，分数越高，您的页面速度就越好。 但只有轻量级网站才能获得更高的分数。 第二，您的网站使用的数据库越大，得分也会越低。 您必须根据 WooCommere 商店的规模采取措施。

GTMetrix

当您使用它分析您的 WooCommerce 网站时，此工具会为您提供更广泛的数据集。 它可能是 Google PageSpeed Insights 的兼容替代品。

8. 保持网站设计简单

除了我们上面给出的所有提示外，这是最关键的一步。 “最简单的事情是最难完成的”，这句话您可能记得很清楚。 然而，您越是让您的网站设计易于导航、减少废话、删除额外元素并只专注于您的目标，您的 WooCommerce 网站就越适合移动设备。

为此，您可以遵循以下提示 –

• 访问并检查全球所有主要的 WooCommerce 网站。
• 尽可能选择最简单的 WordPress 主题。
• 您的布局不应过度饱和。
• 选择主题颜色，并保持基调。
• 使您的网站将访问者引导为客户。 不要创建一个促销的。

因此，我们的建议是您不应遵循 Amazon 或 eBay 的设计。 因为他们是巨头，拥有自己的网络和资源，可以使他们过度饱和的网站更快地加载。 此外，他们有自己的商业道德和制度，你更难掌握或适应。

因此，您比任何人都更了解您的业务和前景。 这使您值得开发自己的设计模式，这种模式很简单，可以帮助您实现目标。

您可能还喜欢：使用 WooCommerce 进行电子商务的顶级网站

9. 您需要最简单的结帐流程来支持移动 WooCommerce

结帐过程通常会给用户带来困难。 根据 Baymard 的一份报告，18% 的用户由于结账过程冗长而放弃了购物车。 而 7% 的用户在找不到足够的支付方式时也会这样做。 除此之外，17% 的受访者还抱怨无法预先计算或查看订单成本。 由于结帐过程的复杂性，将近 50% 的用户离开了购物车。

因此，当您希望用户通过他们的手机结帐时，该过程应该更容易。 您可以按照提示为移动就绪的 WooCommerce 网站制作一个简单的结帐流程 –

透明结帐流程的基础知识

• 选择可见且诱人的 CTA 按钮。 在这部分，你当然可以关注亚马逊。
• 尽量提供足够的产品细节和信息，以便客户在继续之前了解一切。
• 保持您的交易过程透明。 这意味着您要显示客户将要支付的成本的详细明细，例如运费、增值税和税款等。

开发适合移动设备的电子商务结账系统

Clique 的创意总监和 Smash Magazine 的撰稿人 Derek Nelson 发现了一些方法可以帮助您为移动用户的 WooCommerce 开发更好的结账流程。

他建议，您应该在结帐过程中要求提供最少的信息。 它允许您仅包含重要字段。

然后，批准客人付款选项会带来更好的结果。 这意味着随机访问者应该直接从您的 WooCommerce 网站购买，甚至无需注册。 这可以为您的业务带来重大增长。 因为，注册按钮通常会阻碍交易，而 UIE 测试了一个主要电子商务品牌的案例，仅删除注册按钮就可以使该品牌的销售额大幅增长。

此外，您应该将信息放在流程中，并删除所有分散注意力的信息，例如结帐页面中的小纸条或广告。 并一步步向客户展示付款进度将是更值得信赖的想法。

但是，要创建强大的移动就绪结账流程，您可以阅读我们经过深入研究的博客，了解减少购物车放弃的有效方法。

为开发移动就绪的 WooCommerce 网站做准备

从您的 WooCommerce 企业一开始，您就应该保持移动就绪网站的想法。 如果你这样做，它会节省你的时间和金钱。 因此，您可以按照提示一项一项地进行，并定期进行这方面的研究。

但是，我们相信现在您可以理解构建移动用户高度可访问的 WooCommerce 商店的重要性。 为了帮助您打造移动就绪的 WooCommerce 网站，Dokan Multivendor 将是最强大的解决方案之一。 您可以查看一些使用 Dokan 成功运营电子商务商店的品牌。

如果您在应用我们的任何提示时遇到任何问题，请不要忘记通知我们。 我们在这里提供帮助。 总是。