给我购物:结合 Elementor 和 WooCommerce 打造令人惊叹的在线商店

技术教程 2021年11月6日
1635 0

您想开设第一家 WooCommerce 商店吗?或者，您可能已经为客户建立了 WooCommerce 商店，但想要建立更好的自定义电子商务商店?

您拥有令人惊叹的产品，迫不及待想要向客户展示.幸运的是，您可以立即开始营业.

在这篇文章中，我将介绍如何建立 WooCommerce 商店使用 Elementor WooCommerce Builder.这是一个可视化的拖放式 WordPress 页面构建器，可让您完全控制您的商店和产品页面设计.

我将涉及的领域是:

无论是您的第一家商店还是您的第五十家，您都会发现一个更简单的工作流程，无需直接编辑 WooCommerce 模板文件或获取你的手被钩子弄脏了.呜呼！

Elementor and WooCommerce Dev Man
开发人员对他的新店非常兴奋.

什么是 Elementor 和 WooCommerce?

首先，如果您不知道(尽管您怎么不知道?)，下面是 Elementor 和 WooCommerce 的简要概述.

元素是"终极 &免费的 WordPress 页面构建器."

它可以让您以最快的方式创建一个非常漂亮的网站.您可以通过实时设计和在 WordPress 网站的前端设计来达到高水平的设计.

它是目前唯一(也是第一个)允许无限设计可能性的前端页面构建器.

WooCommerce 是一个免费的 WordPress 插件，它结合了电子商务功能您的网站，以便您可以拥有在线商店.

它可以轻松与您现有的 WordPress 网站集成，让您可以在几分钟内创建可定制的商店、获得安全付款、可配置的运输选项等等.

Elementor WooCommerce Builder 如何帮助您创建电子商务商店

免费的核心 Elementor 插件允许您使用可视化的拖放界面来设计 WordPress 内容.

您可以使用小部件向您的网站添加内容并控制设计布局和样式的几乎所有方面.

使用 Elementor Pro，您就可以访问 Elementor WooCommerce Builder ，让您可以使用同一个可视化编辑器为产品档案和单个产品页面设计动态模板.

使用 WooCommerce Builder，您可以轻松构建完全自定义的 WooCommerce 商店，而无需直接使用 PHP 模板文件 或 WooCommerce 挂钩.

使用 Elementor WooCommerce Builder 的优势

  • 视觉、拖放式设计:您可以按照访问者所见精确设计您的 WooCommerce 商店.您甚至可以预览不同的产品，看看它们在您的设计中的外观.
  • 无 PHP/代码:您可以从 Elementor 界面设计所有内容，而不是直接使用 PHP 和/或模板文件.
  • 专用的 WooCommerce 小部件:您将获得专用的小部件，其中包含所有重要的 WooCommerce 信息，甚至包括追加销售和相关产品.
  • 条件模板显示:您可以根据需要创建任意数量的产品档案和单个模板，并使用条件规则来控制在何处使用每个模板.例如，您可以为"A 类"中的产品创建一个产品单一设计，为"B 类"中的产品创建另一个.
  • 预建模板:您可以访问预建的产品档案和单个模板，您可以对其进行自定义以满足您的需求.或者，您可以从头开始构建自己的设计.

有什么是您无法使用 Elementor WooCommerce Builder 设计的吗?

您可以使用 Elementor WooCommerce Builder 来设计您的产品档案和单个模板，其中包含您商店的大部分内容.您还可以设计其余的 WordPress 内容，甚至包括页眉和页脚的模板.

但是，目前有两个 WooCommerce 页面无法帮助您:

  • 购物车
  • 结帐

您可以使用 Elementor 在 WooCommerce 购物车和结帐内容周围添加内容，但您无法自定义实际内容本身.

但是，要控制购物车的设计和结帐内容，有几个选项.

首先，您可以使用与 Elementor 完美搭配的灵活基本主题，同时还可以为您提供控制购物车和结帐页面的设置.这里有一些不错的选择:

  1. 阿斯特拉
  2. OceanWP
  3. GeneratePress
  4. Neve

其次，如果您熟悉 CSS，您可以添加自己的样式来控制购物车和结帐页面.

最后，您可以使用修改结帐流程的插件.

例如，CartFlows 插件可让您使用 Elementor 构建自定义结帐流程.但是，与"传统"电子商务商店相比，CartFlows 更适合销售漏斗，因此它并非在所有情况下都适用.

您还可以使用我们自己的 Forminator 等插件来创建定制的结账流程.

如何使用 Elementor 设计您的 WooCommerce 商店

现在，卷起袖子，使用 Elementor Pro 和 WooCommerce Builder 亲自动手设计您的商店.

让我们一步一步创建一个商店.

设置和配置 WooCommerce

如果您还没有，您需要先设置和配置 WooCommerce 商店的基础知识.这些基本设置步骤不是本教程的主要重点，因此我们不会太深入.

但总的来说，您需要:

  1. 从 WordPress.org 安装并激活免费的 WooCommerce 插件.
  2. 运行 WooCommerce 设置向导以配置重要的基础知识.
  3. 添加您的产品.
  4. 在 WooCommerce 设置区域配置任何其他相关设置.

如果您需要入门帮助，请参阅有关如何执行此操作的更多信息 可以在这里找到.

设计您的商店存档页面

现在，您已准备好开始构建您的商店，从产品档案的模板开始.

产品存档页面是列出您所有 WooCommerce 产品(或具有特定类别、标签等的产品)的页面.

要开始使用，请转到 模板 >主题生成器产品存档.然后，点击添加新产品存档按钮.

Theme builder template.
主题构建器模板.

给它取一个漂亮的名字，然后点击创建模板继续.

这将使您进入设计界面.您可以导入其中一个预制的产品存档模板或关闭模板库以从头开始构建您的设计.

Elementor design interface.
Elementor 设计界面.

从那里，您将能够使用可视化的拖放界面设计存档模板.

您可以使用专用的产品存档小部件来添加核心内容，例如所有产品的列表或存档页面的标题(例如类别名称 ).

Archives products.
档案产品.

编辑其中一个小部件可让您控制其外观和功能.您可以自定义从星级到销售徽章的所有内容.

Edit Archives Products.
编辑档案产品.

完成设计后，点击发布按钮以控制何时使用您的模板.

您可以根据需要混合搭配五种显示条件:

  1. 所有产品档案
  2. 商店页面
  3. 搜索结果
  4. 产品类别
  5. 产品标签

例如，要仅在您的主商店页面上显示模板，请选择商店页面.

对于某些情况，您将获得其他选项.例如，如果您选择产品类别，您可以将您的模板定位到所有产品类别存档页面或特定类别(或一组类别).

Publish Settings-Template display conditions.
设置在您的网站上显示模板的条件.

这些展示条件很有用，因为它们可让您根据需要创建尽可能多的独特模板，以最好地展示您销售的所有不同产品.

有时，一刀切的方法并不是最佳解决方案.WooCommerce Builder 可让您轻松创建新模板，而无需直接使用 PHP 模板文件.

设计您的单一产品页面

创建产品存档页面后，您可以使用相同的基本方法来为单个产品自定义 WooCommerce 产品页面模板.

要开始使用，请转到 模板 >主题生成器单一产品.然后，点击添加新的单一产品按钮并为其命名.

就像您的产品档案设计一样，您可以选择导入其中一个预制模板或从头开始构建您自己的产品页面模板.

Single products page.
单个产品页面.

现在，您将获得另一组专用小部件，用于显示产品单页上的所有信息，包括从产品名称到相关产品和追加销售的所有信息.

Single product page.
编辑添加到购物车小部件.

输入小部件之一的设置可让您配置其样式和位置.

Single product page.
在您的产品页面上配置小部件设置.

默认情况下，Elementor 会提取您的真实产品之一，以实时预览您的设计.但是，如果您希望查看您的设计在不同产品上的外观，请点击左下角的齿轮图标并编辑预览设置以使用您商店中的任何产品.

Preview your design before going live.
上线前预览您的设计.

完成后，点击发布按钮以选择在何处应用此产品单一模板.

在这里，您将获得另外五个选项:

  1. 所有产品
  2. 在类别中
  3. 在子类别中
  4. 在标签中
  5. 作者的产品

对于后一个选项，您将能够选择适用于该条件的特定项目(例如特定类别).

Where to display a product.
您可以设置非常具体的条件来显示您的模板.

与您的产品存档模板一样，您可以根据需要多次重复该过程，以确保每种类型的产品都具有经过优化的单一产品设计.

根据需要在其他设计中包含 WooCommerce 产品

除了让您设计产品档案和单个模板之外，Elementor Pro 还为您提供了可以在其他设计中使用的专用 WooCommerce 小部件.

例如，您可以使用它们在您正在撰写的博文中展示产品.您可以随时从 Elementor 界面的 WooCommerce 部分访问这些小部件.

Access and edit your site widgets in elementor.
随时轻松访问和编辑您的网站小部件.

如果您想展示产品，您可以创建自己的自定义查询来控制要展示的产品.

您甚至可以使用包含的 Elementor Popup Builder 功能来包含或在弹出窗口中推广产品.例如，您可以宣传特价商品并在弹出窗口中包含一个添加到购物车的按钮.

Special deal.
特价或促销示例.

推广特价和促销活动是一项很棒的功能.

开店时间

借助 Elementor Pro，您可以更快、更灵活地构建自定义 WooCommerce 商店.

如您所见，这是一个简单的过程.与其使用 hooks 或 模板文件，不如使用视觉、拖拽-and-drop 界面.

您可以获得专门的小部件来显示重要的 WooCommerce 产品信息，您还可以使用条件显示规则根据商店的需要创建尽可能多的单个产品和产品存档模板.

如果您真的想让您的网站大放异彩，请查看我们关于将电子商务添加到您的 WordPress 网站时的 8 个必备条件的文章.

此外，如果您四处寻找其他 WordPress 功能，我们提供专用托管、站点管理和24/7全天候支持.

所以，从今天开始，建立您自己的自定义 WooCommerce 商店.然后，将该标志转为"OPEN"并开始销售您的惊人产品.

elementor(5)WooCommerce(54)商店(14)
♥赞6

相关文章

发表回复