5分钟生成10篇英文软文article forge软件试用

标准的 WooCommerce 产品页面非常实用,而且看起来也很漂亮! 但我们可以做得更好,尤其是通过结合 WooCommerce 和 Elementor!

google广告开户

在本指南中,我们将向您展示如何构建自定义(且美观)的 WooCommerce 产品页面以“惊叹”您的客户并产生更多销售额。

你需要什么

除了你已经拥有的——一个工作的 WordPress 安装和在此之上添加的 WooCommerce——你需要 Elementor 页面构建器插件。

Elementor 有两种口味——免费和付费。 虽然 Elementor 免费提供了一些可用于 WooCommerce 的自定义设置,但要获得真正的好东西并访问预构建的 Elementor Pro 模板,您需要升级到专业版。 这将花费您 49 美元购买一个网站。

笔记; Elementor 不是唯一与 WooCommerce 一起使用的页面构建器,它可以让您构建自定义的 WooCommerce 产品页面。 如果您想探索还有什么,这里有一些替代方案。 也就是说,Elementor 是我们最喜欢的 WooCommerce 定制解决方案。

在开始工作之前,您必须在您的网站上安装 Elementor free 和 Elementor pro 插件:

  • 免费安装 Elementor 很简单。 只是去 插件 → 添加新 并输入 元素 进入搜索框。 安装并激活。
  • 要安装 Elementor pro,您首先必须在 Elementor.com 上完成购买。 您将能够从您的用户个人资料中下载 Elementor pro 包——它是一个 ZIP 文件。 去 插件 → 添加新 并点击 上传插件 按钮。 从您的桌面选择 Elementor ZIP 并将其上传到您的站点。 激活插件。

Elementor 将要求您在一切正常运行之前验证您的许可证。

使用 Elementor 创建一个新的 WooCommerce 产品页面

首先,转到 模板 然后点击 添新.

WooCommerce 产品页面的 Elementor 模板

从列表中,选择 单一产品.

单一产品

Elementor 将展示一些现成的 WooCommerce 产品页面模板,您可以从这些模板开始。 选择一个看起来最接近你想要的东西是大多数用户的最佳选择。 从头开始创建产品模板通常需要更多时间。 修改现有模板更容易。 点击 插入 获取模板。

WordPress divi主题
Elementor 产品模板

您将看到您的模板已添加到 Elementor 画布上。 您现在可以自定义您认为合适的模板——向页面添加新元素、自定义当前元素、删除不需要的内容等。

Elementor WooCommerce 仪表板

在左侧边栏中,您会注意到一系列 WooCommerce 元素,例如 产品名称, 产品图片, 产品价格,以及 WooCommerce 显示的有关您的产品的所有其他数据。

您可以获取这些元素中的每一个并将它们拖到画布上您需要它们的确切位置。

以下是您可以首先进行的一些自定义:

添加您的品牌和颜色

库存的 Elementor 产品模板看起来不错,但它们可能与您的品牌不完全匹配。 我们可以做的一项快速更改是调整背景颜色、字体颜色和各种排版设置。

要调整页面上的任何块,请单击 铅笔 块右上角的图标。

铅笔

然后,在左侧边栏中,切换到 风格 标签。 您可以在此处执行所有与样式和外观相关的自定义。 例如,对于 产品名称 块,您可以更改文本的颜色、排版和阴影。

WooCommerce 产品页面的样式选项卡

让我们点击 排版. 这将显示另一个框,您可以在其中更改字体及其所有参数。

逐一阅读所有文本并对其进行编辑,直到它们看起来像您想要的那样。 特别注意价格块的外观——它需要清晰可见,以免混淆客户。

更改 WooCommerce 产品页面上的排版

重新调整/移动产品描述

WooCommerce 在几个地方显示您的产品描述。 我们现在不需要深入了解所有细节,但让我们只关注两件事:

fiverr建站WordPress程序员
  • 简短的介绍
  • 你的 产品数据选项卡

简短的介绍 听起来就是这样。 WooCommerce 从 简短的介绍 框(您在创建新产品时填写的字段之一)。 将简短描述显示在产品页面顶部附近的某处是个好主意。

你可以拿 Elementor 的 简短的介绍 阻止并将其拖放到您需要的地方。

在 WooCommerce 产品页面上显示的简短说明

产品数据选项卡 实际上是包含有关产品的主要信息的块。 确保它位于新的 WooCommerce 产品页面模板中的可见位置。

WooCommerce 产品页面的数据选项卡

不要忘记为这些块的颜色和排版设置样式。

调整您的“添加到购物车”按钮

“添加到购物车”按钮是任何电子商务网站上最重要的一个按钮。 您真的希望它脱颖而出并吸引客户的眼球。

独立站选品工具

您可以为 Elementor 中的“添加到购物车”按钮使用两种不同的块类型。 有 添加到购物车 块,并且 自定义添加到购物车 堵塞。

自定义添加到购物车

对他们两个进行试验,看看哪个更适合你的情况。 点击 铅笔 图标并查看在给定块设置方面的侧边栏中可用的内容。

添加到购物车选项

只需单击几下,您就可以让您的按钮看起来更好。

最后一个按钮

添加/删除产品评级

显示产品评级可能是让您的客户最终推动购买您的东西的好方法。 唯一的问题是你首先需要有一些评级。 🤷‍♂️

当您的商店是全新的并且您还没有任何评分时,最好不要在页面上设置评分块。 右键单击 产品评级 元素并将其删除。

高质量外链购买
从 WooCommerce 产品页面中删除评级

稍后,您可以重新添加该块,甚至自定义它的外观。 您可以更改的一些内容是星星的颜色和事物的间距。

收视风格

调整手机和平板电脑的视图

如今,更多的人通过智能手机访问网络,而不是台式电脑和笔记本电脑。 因此,您的商店必须针对移动查看进行优化,否则您将失去销售!

WooCommerce 已经针对移动设备进行了优化,但是由于我们正在创建自定义产品页面,因此我们需要确保您的新产品模板看起来也不错。

在 Elementor 界面的左下角有一个标记为的按钮 响应模式.

WooCommerce 产品页面的响应模式

当你点击它时,你将能够在 桌面, 药片, 和 移动的 意见。 选择其中一个并根据需要调整设计。

JasperAI 10000字免费额度试用

这里很酷的是,您可以更改块的显示设置,使其仅在移动设备或平板电脑上生效。 例如,如果您认为移动设备上的价格应该更大,请单击价格块中的铅笔图标,然后单击以编辑排版,最后切换到 移动的 字体大小旁边:

移动字体

如果您现在更改字体大小,则只有移动视图会受到影响。

逐个元素地浏览您的模板,直到您为移动设备和平板电脑查看器配置了整个内容。

发布自定义 WooCommerce 产品页面

准备好新产品模板后,单击 发布 Elementor 界面左下角的按钮。

Elementor 会要求您为何时应使用模板添加条件。

WordPress备份工具updrafplus
显示条件

要将模板用于所有产品,只需从列表中选择“产品”,如下所示:

为产品启用

点击 保存并关闭 完成一切。

这就对了! 🍾 完成此操作后,您的自定义 WooCommerce 产品页面已保存并替换默认产品页面。

当您访问商店中的任何产品时,您可以看到正在运行的产品页面。

使用 Elementor 的最终自定义 WooCommerce 产品页面
免费指南

加快速度的 5 个基本技巧
您的 WordPress 网站

将加载时间缩短 50-80%
只需遵循简单的提示。

5分钟生成10篇英文软文article forge软件试用
tiktok