使用Astra主题和Elementor插件搭建WooCommerce商城网站图文教程-千百度社区

想自己搭建一个WooCommerce商城并开始在互联网上销售产品？虽然你可以在网上找到大量的教程，但创建一个真正看起来不错的商店的整个过程往往看起来有点复杂。那么如果我们告诉你，你可以在一个小时内建立一个漂亮的电子商务商店呢？

方法就是通过Elementor、WooCommerce插件和Astra主题的组合，操作非常简单。在这篇文章中，搬主题将介绍你需要采取的确切步骤，以便在短时间内建立和运行你自己的商店。

在Elementor WooCommerce主题中需要注意的问题

尽管使用WooCommerce和Elementor开始你的网店是令人激动的，但找到一个合适的主题来配合它也同样重要。

在缩小你的理想WordPress主题的范围时，你必须考虑哪些关键因素呢？

1. 速度

这一切都归结为你的网站加载速度有多快，当你有产品在你的WooCommerce商店销售时，它就更加重要了。

页面加载速度不仅仅是一个必要条件，它是你成功的前提，你知道吗，如果你的网站加载时间超过4秒，每4个访问者中就有1个会放弃你的网站？即使是一秒钟的延迟也会使客户满意度降低16%。

随着页面加载时间的延长，你的客户有更多的机会在没有看到你的商店所提供的东西就离开。这意味着更高的跳出率。这对搜索引擎来说并不好，只会使你的网站排名下降。

在每天结束时，它归结为用户体验。用户体验越好，你的商店转化率就越高。

2. 自定义

想完全控制你的网店的外观和感觉吗？那就考虑一个你可以轻松自定义的主题。

当创建一个网上商店时，我们的想法是要创建一个比你的竞争对手更好的商店。你的logo、字体、颜色都必须反映你的品牌形象。那为什么要拘泥于主题的默认设置？

你能够通过自定义器或使用Elementor插件来定制主题的每个元素，虽然大多数主题都给你这种灵活性，但在早期检查这一点是有帮助的。

3. 演示模板

当你可以利用一些现成的商店模板时，为什么要在一张空白的站点上开始？

如果直接套用模板的话，不是更容易创建一个网上商店吗？寻找那些为你提供灵活使用预建WooCommerce商店模板的主题，这些模板可以使用Elementor轻松定制。

4. 针对移动端销售的优化

来自移动设备的销售在不断上升。报告显示，2021年移动设备的销售额预计将达到3.56万亿美元，比2020年的销售额多出22.3%。

你的商店是否进行了移动优化？你的主题是响应性的，它在所有设备上都能很好地工作吗？如果不是，我们建议你认真考虑一下这个问题。

5. 更快的结账过程

让我们用一些数据说话，报告显示：

平均购物车放弃率接近70%（准确地说，是69.57%），而当涉及到移动用户时，这一比率高达85.65%。
从加入购物车到放弃购买，电子商务品牌每年损失高达180亿美元的销售收入。

好消息是同一报告还指出，通过优化结账体验，转化率有35.62%的增长。虽然头号原因是包含额外费用，但26%的人认为结账时结账过程太长。

所有这些数据都证明了一个精心设计的结账页面的重要性。除非你想看到你的销售收入有明显的下降，否则你要确保你的主题有一个转换优化的结帐过程。

6. 优秀的支持

偶尔有一点支持不是很有帮助吗？还有什么比拥有一个支持团队，就在你需要他们的时候更好的方法呢？虽然大多数主题都通过文档提供支持，但如果一个WordPress主题能提供友好的人工支持，那就更好了。

7. 安全

最后但并非最不重要的是，要选择一个稳定和安全的主题。一个允许你安装任何WooCommerce和Elementor插件而不用担心破坏你的商店。

这里我们推荐Astra这样的主题！ ?

你需要哪些工具来制作你的WooCommerce商店

正如这篇文章的标题所示，除了核心的WooCommerce插件之外，你还需要两个主要工具来建立你的商店。

Astra主题–这是一个免费的WordPress主题，包括深度定制选项，以及一个内置的WooCommerce集成和演示网站。
Elementor – 这是一个免费的页面生成器，将帮助你在你的商店定制各种页面，如你的主页和关于页面。

在本教程中，我们唯一的假设是你已经安装了WooCommerce–我们将涵盖关于使你的商店看起来和功能很棒的其他一切。

当然，搬主题本站提供了Astra Pro主题及Elementor Pro插件的汉化中文版的下载：

一旦你安装了WooCommerce，以下是如何使你的商店看起来很棒的方法：

第一部分：在10分钟内建立一个WooCommerce网站

除了一般的轻量级设计和定制选项外，Astra还在两个主要方面专门帮助你处理WooCommerce。

你可以：

导入免费的Elementor WooCommerce模板，以及WordPress Customizer设置，快速创建一个漂亮的WooCommerce商店。
使用Astra专门的WooCommerce集成，通过实时的WordPress定制器定制你的商店的重要方面。

下面是如何使用Astra来设置你的WooCommerce商店的核心：

第1步：主题和插件

要开始，你需要安装一个主题和一个插件。两者都列在WordPress.org上，这意味着你可以从你的WordPress仪表板上直接安装它们。

比如Astra主题安装

第2步：导入Astra WooCommerce Starter网站

一旦你安装了Astra主题和入门模板插件，在你的WordPress仪表板中进入外观→入门模板，导入你的演示网站。

这将启动启动器模板向导，在你的网站上安装预建模板。点击 “立即建立你的网站”按钮。

然后，选择Elementor页面生成器。

然后，您可以使用过滤选项来寻找各种电子商务Elementor模板。

其中一些模板是免费的，而其他标记为 “Premium”的模板则需要Premium Starter Templates插件，这是Astra Essential Bundle和Growth Bundle的一部分。

请自由选择任何吸引你眼球的演示网站。但在本教程中，我们将使用免费的品牌商店演示网站。

一旦你点击你想要的演示网站，它将打开一个新的页面，你可以上传你网站的标志和颜色方案。这使你的生活更容易，因为你将不必第二次添加标志或挑选颜色。

然而如果你的logo和颜色还没有准备好，你可以直接跳过这一步。对于本教程，请点击 “跳过并继续”。

接下来，你会遇到一个方框，要求你填写你的详细资料（你可以选择留白），并安装添加到网站的自定义数据。

所以在这一步，只要点击提交和建立我的网站。

一旦你点击提交和建立我的网站按钮，它将开始导入网站。现在，你已经准备好做你自己的事情了。

第3步：使用WordPress定制器来制作你自己的东西

Astra使用本地的WordPress定制器来帮助你定制你的商店的外观。这个工具可以让你对你的商店的各个方面进行无代码的修改，并在实时预览中立即看到结果。

要访问WordPress定制器，请在你的WordPress仪表板上进入外观→定制。

除了这里的WooCommerce特定设置外，Astra还包括帮助你定制网站其他方面的选项，如字体、颜色、标识等等。

关于这些设置的完整解释，你可以浏览自定义设置支持文章。不过在本教程中，搬主题主要介绍Astra的WooCommerce集成。

这些可以让你控制你的商店的各个方面，比如：

你的产品列表页面如何运作
你的购物车页面上的追加销售
你的产品图片
其他较小的设置

大多数WooCommerce的设置都位于两个主要区域。

WooCommerce设置

要访问这组选项，请到WordPress定制器侧边栏的WooCommerce。在这里，你会看到以下区域：

产品目录 – 让你控制在你的商店页面上显示多少产品，以及显示什么信息和显示多少列产品。
单一产品 – 让你禁用面包屑。
购物车 – 让你在你的购物车页面启用产品追加销售。额外销售可以通过显示与已经在用户购物车中的产品相关的目标产品来帮助提高你的销售额。
商店通知 – 让你启用全店通知，并自定义其文本。

例如，如果你启用商店通知，你会得到这个漂亮的全站通知横幅。

这个功能对于促进销售或特价商品是非常好的。将 “商店栏”改为 “4”，可以在每行增加一个产品。

除了WooCommerce部分，你还可以在以下地方找到WooCommerce设置：

全局 → 容器 – 让你控制你的WooCommerce页面所占区域的宽度。
侧边栏 – 让你控制WooCommerce页面上侧边栏的位置。例如，把它从左边改为右边，你的产品类别列表将转移到右边。

用Elementor和Astra主题建立一个WooCommerce网站的步骤。

第二部分：使用Elementor页面生成器来定制你的商店页面

Astra帮助你定制你的商店和产品页面，以及你的导航菜单和侧边栏。但当涉及到调整你的主页和关于我们的页面时，这就是免费的Elementor页面生成器插件的作用。

当然，搬主题本站提供了Astra Pro主题及Elementor Pro插件的汉化中文版的下载：

要编辑你的主页，请点击用Elementor编辑。Elementor让您可以轻松实现：

改变文本和图像
使用拖放方式移动设计元素
添加新的设计元素

例如，要编辑您主页上的标题，您只需点击并输入。

如果你需要一些帮助来使用 Elementor 页面生成器来编辑你的商店的核心页面，搜索搬主题本站有一些教程。如果你是一个完全的新手，那么你应该先熟悉一下Elementor页面生成器。

你知道吗，你只需使用一个简码就可以创建整个购物车、结账页、客户账户页等等。可以参考教程

2022年WooCommerce简码大全及最新使用方法全介绍

千百度

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。