如何通过 2 个简单的步骤自定义 WooCommerce 商店页面
已发表: 2021-10-14WooCommerce 将为您的虚拟商店提供默认商店页面。 但是,它们的自定义选项有限。 此外,WooCommerce 的预建商店页面并未针对您的转化率进行优化。 良好的转换伴随着精心设计的 WooCommerce 商店页面。
你知道只有22% 的行业对他们的转化率感到满意吗?
现在我想问你一个问题。 你想成为 22% 快乐行业的一份子,还是 78% 不快乐行业的一份子? 决定权在你。 如果是,则需要使用编码或使用 WooCommerce 构建器来自定义您的商店页面。 我们在这里不要使用编码,因为您需要具备良好的编码知识。 因此,请继续使用 WooCommerce 构建器来定制您的商店页面。 这是另一个任务,选择最好的 WooCommerce 构建器。
ShopEngine是您的 WooCommerce 页面的完整解决方案,因为使用此插件后,您不需要其他插件。 这个插件将为您的产品比较、变化样本、愿望清单、快速查看、快速结帐、延期交货、徽章、销售通知、部分付款等提供解决方案。 此外,您可以完全自定义这些选项。 这就是为什么使用此插件具有成本效益且用户友好的原因。
因此,在本博客中,我将讨论如何使用ShopEngine创建 WooCommerce 自定义商店页面,这是 WordPress 的最佳免费工具。
什么是 WooCommerce 商店页面?

WooCommerce 商店页面是您网站上最重要的页面,您将在其中展示您的所有产品或服务。 当任何客户登陆您的网站购买产品或服务时,他们将直接访问您的商店页面。
您可以说它是您网站的核心,因为您的成功将取决于此页面。 因为在访问此页面并查看产品后,他们将决定是否购买您的产品。 这就是为什么您的 WooCommerce 商店页面需要用户友好且设计良好的原因。
您的默认 WooCommerce 商店页面有什么问题?
您的 WooCommerce 商店页面对于提高转化率起着至关重要的作用。 因此,您需要始终牢记,您的商店页面需要得到很好的优化。 这是使用默认 WooCommerce 商店页面的问题。 因为默认的 WooCommerce 商店页面没有针对提高转化率进行很好的优化。
想象自己站在客户的位置。 作为客户,您在购买产品时希望从网站获得什么?
当然,一个简单而干净的设计,您可以使用它轻松搜索和查找产品。 您的默认 WooCommerce 商店页面不适合它。
76% 的客户想要一个简单的设计网站,而不是复杂且令人困惑的设计。 来源名称- HubSpot.com
这证明了它对您的客户的重要性。 现在看看你的默认 WooCommerce 页面并检查它。 它是否为您带来了目标收入? 如果没有,请准备好使用 Elementor 和 WooCommerce 商店页面插件自定义您的 WooCommerce 商店页面ShopEngine 。
但是,在此之前,让我们看看更改 WooCommerce 商店页面后您将获得哪些好处。
您将从新定制的 WooCommerce 商店页面中获得的好处
在投入时间和辛勤工作之前,是时候检查一下好处了。 看看为什么需要自定义 WooCommerce 商店页面:
- 一个高转化率的商店页面,将显着改变您的投资回报率。
- 出色的用户体验。
- 针对 SEO 和不同设备进行了优化。
- 增加用户的机会。
- 在竞争激烈的电子商务世界中脱颖而出的商店页面。
- 快速加载商店页面。
这些是您将从优化的商店页面中获得的好处。 现在您知道了好处,是时候带您进入主题了。 如何编辑 WooCommerce 商店页面以获得更好的用户体验?
继续挖掘以找出答案。
如何使用 ShopEngine 自定义 WooCommerce 商店页面
当 WooCommerce 页面定制出现时,没有什么能打败 ShopEngine。 ShopEngine 是 WordPress 中可用的终极拖放 WooCommerce 页面构建器插件。 它因其用户友好且完全可定制的功能而闻名。 此外,它还提供了适合无需编码即可构建网站的高级模块和小部件。
这意味着您无需费心以编程方式自定义 WooCommerce 商店页面。 现在您可能会想在哪里可以找到 WooCommerce 商店页面模板?
ShopEngine 还附带 WooCommerce 商店页面模板,您可以再次创建它们。 所以,不用担心。 只需按照以下步骤使用 ShopEngine(最简单、最有效的 WooCommerce 页面构建器)编辑您的 WooCommerce 商店页面:
步骤#1:创建商店页面模板。
要自定义 WooCommerce 商店页面,您需要创建商店页面模板。 转到 ShopEngine>> 构建器模板以创建新的 WooCommerce 商店页面模板。

之后,单击添加新按钮,然后将出现一个弹出模板设置栏。 您需要输入以下信息来设置您的店铺页面模板:
- 名称:在这里输入您为 WooCommerce 商店页面选择的 Woo 商店名称。
- 类型:在这个间隙中,您需要选择要创建的模板类型。 在创建商店页面模板时,您必须选择商店。
- 设置默认值:如果要添加默认模板,请启用默认按钮。 我正在启用它,因为我将使用默认的那个。
- 样品设计:在这里您将有两种设计。 如果您选择左侧,您可以从头开始编辑您的 WooCommerce 商店页面。 而且,如果您选择正确的,那么您将获得商店页面模板的默认设计。 您无需从头开始编辑它。 在这里,我选择了默认的样本设计。 最后,要对其进行编辑,请单击“使用 Elementor 编辑”按钮。

现在,创建您的商店页面模板已完成。 因此,是时候进入实际的定制部分了。
第 2 步:使用 ShopEngine 自定义您的 WooCommerce 商店页面模板。
创建商店页面模板后,现在是时候对其进行编辑了。 要对其进行编辑,请单击存档标题并根据您的需要自定义以下选项:
- HTML 标签:选择要用于存档标题的标签。
- 对齐方式:您可以从此处选择存档标题的对齐方式。
- 颜色:为您的档案标题选择正确的颜色。
- 版式:编辑档案标题的版式。 您可以从这里更改系列、字体大小、行高、粗细、变换。

之后,自定义下一个存档页面小部件,即每页产品过滤器。 您可以为您的产品每页过滤器自定义以下区域:
- 列表:在商店页面上键入您的页面数。
- 排版:为您的产品每页过滤器编辑排版。
- 间距:自定义数字之间的间距。
- 对齐方式:为您的产品每页过滤器选择对齐方式。
- 颜色:您可以在此处为小部件选择颜色。
- 活动颜色:您可以为活动页面选择不同的颜色。

现在是时候编辑存档产品的布局了。 在这里您可以编辑:
- 布局设置:您可以启用或禁用存档产品的布局设置。
- 每行产品:选择要在每行显示的产品数量。
- 每页行数:选择要在每页上显示的行数。

之后,您可以为存档产品启用和禁用许多选项。 例如:
- 闪购徽章。
- 显示类别。
- 显示说明。
- 评分。
- 显示正常价格。
- 炫耀价格标签。
- 按钮组。
- 悬停样式的页脚。
如果您启用这些选项,那么这些选项将与您的存档产品一起显示。

然后编辑产品容器,如:
- 结盟。
- 背景颜色。
- 边框类型。
- 宽度。
- 边框颜色。
- 产品差距。
- 悬停时的框阴影。
- 行间距。
- 填充。

您还可以编辑存档产品的以下区域:
- 产品图片。
- 产品类别。
- 产品名称。
- 产品价格。
- 产品描述。
- 关闭标签。
- 添加到购物车按钮。
- 评分。
- 闪购。
- 按钮组等

您还可以通过拖放左侧显示的小部件来自定义更多。 最后,在拖放小部件并对其进行自定义后,单击更新按钮。

要知道的事情:
在开始定制之前,您需要确保已将产品添加到您的网站。 如果不添加这些产品,您将看不到任何产品。 如果您不知道怎么做,请阅读如何在 WooCommerce 中添加产品。

现在,看看您定制的 WooCommerce 商店页面:

笔记:
想深入了解 ShopEngine Pro? 阅读文章介绍 ShopEngine Pro:革命性的 WooCommerce 构建器。
为什么使用 ShopEngine 作为 WooCommerce 页面构建器?
在了解了简单的过程之后,您仍然可以有另一个问题。 为什么要使用 ShopEngine 来自定义您的商店页面而不使用其他 WooCommerce 页面构建器?
答案是 ShopEngine 将通过其即将推出的版本 ( ShopEngine Pro ) 解锁许多新功能,如果您使用其他 WooCommerce 构建器,您将无法获得这些新功能。 不仅如此,ShopEngine 还提供了许多其他功能,为您提供最佳的用户体验。 在这里,下面给出了与其他 WooCommerce 构建器的快速比较:
特征 | 商店引擎 | ShopEngine Pro | WooLentor | JetWooBuilder |
产品对比 | ||||
闪购倒计时 | ||||
产品类别 | ||||
产品描述 | ||||
愿望清单 | ||||
快速浏览 | ||||
色板 | ||||
延期交货 | ||||
徽章 | ||||
销售通知 | ||||
部分付款 | ||||
预购 | ||||
快速结帐 | ||||
附加结帐字段 | ||||
添加到购物车 | ||||
面包屑 | ||||
产品摘录 | ||||
产品过滤器 | ||||
帐户详细资料 | ||||
产品标签 | ||||
档案标题 | ||||
存档结果计数 | ||||
账户导航 |
在哪里可以搜索 WooCommerce 商店页面模板?
在 ShopEngine 中,您会找到一个现成的 WooCommerce 商店页面模板。 您还可以创建商店页面模板并根据需要进行自定义。 无需自定义这些模板,因为 ShopEngine 提供了所有自定义选项。
此外,您将获得 WooCommerce 产品页面模板以及其他多种类型的模板。 这些将让您在几秒钟内构建 WooCommerce 产品、类别、购物车等页面,这令人难以置信。
最好的部分是 ShopEngine 的免费版本提供了现成的模板。 您可以轻松地使用它来制作您的 WooCommerce 商店页面。 查看 ShopEngine 提供的免费 WooCommerce 商店页面模板:

包起来:
您的 WooCommerce 商店页面是您的 WooCommerce 页面中最重要的页面。 收入将取决于您在商店页面上展示产品的方式。 为了获得良好的演示,您必须自定义此页面。 由于 WooCommerce 上的自定义选项有限,您需要另一个工具。
ShopEngine是您可以试用的最灵活的工具。 几乎没有任何工具可以为您提供如此大量的定制。 此外,还发布了新版 ShopEngine pro。 在这里,您可以使用 63 多个小部件、12 个模块从头开始自定义您的页面,让您的页面在这个竞争激烈的世界中顺利运行。
此外,您会找到 16 个页面模板,并且很快就会为您的 WooCommerce 产品、购物车、类别和其他页面发布更有吸引力的模板。 通过使用这些,您可以轻松自定义您的商店页面并帮助您的网站成功脱颖而出。