如何自定义您的 WooCommerce 产品页面
已发表: 2022-10-18任何电子商务网站上的产品页面都是最重要的部分。 因为它以有序的方式包含有关产品的所有详细信息以及相关产品等附加信息。
默认的 WooCommerce 产品页面适用于基本产品快速查看、添加到购物车和其他此类基本功能，但这在现代竞争激烈的电子商务环境中是不够的。 作为最重要的页面之一，产品页面在任何 WooCommerce 构建的业务平台中都起着至关重要的作用。 但是，默认页面并没有剪切它。
定制产品页面的重要性怎么强调都不为过。
通过自定义您的产品页面，您实际上是在为您的客户提供独特的购物体验，这对于留住访客和增加销售数量也很重要。
在这篇文章中，我们将指导您完成如何使用 WooCommerce 产品页面编辑器和自定义 WooCommerce 小部件来创建有吸引力的产品页面等。
目录
自定义 WooCommerce 产品页面所需的工具？
首先，您需要在服务器上安装最新版本的 WordPress ，最重要的是，必须安装 WooCommerce 插件以适应所有商店/商店页面功能。
您还需要一个功能驱动的电子商务 WordPress 主题，最后但同样重要的是，您需要一个WooCommerce Elementor Shop Builder插件。 使用 Elementor 商店构建器插件，您将能够完全控制和自定义各个商店页面和市场产品网格、产品列表、产品比较块等。
如何自定义 WooCommerce 产品页面
我们希望您的服务器上已经安装了 WordPress 的有效安装和正常运行的电子商务主题。 现在，让我们从所需的其他 WordPress 资源和工具开始逐步完成产品页面定制的过程。
第 1 步：安装 Elementor WooCommerce 附加插件
在这个使用各种元素和 WooCommerce 产品变体样本自定义 WooCommerce 产品页面的实时示例中，应该向客户展示现代产品页面，我们将使用类似于WooCommerce 产品页面构建器可视化作曲家的东西 - 称为 ShopReady。
ShopReady Elementor 商店构建器是一个令人惊叹的包罗万象的捆绑工具，用于创建强大的电子商务商店网站。 该插件附带 105 多个专业制作的小部件，具有特定于用例的功能和工具。 例如，使用此电子商务插件，您可以创建一个功能性 WooCommerce 产品过滤器，该过滤器能够过滤具有价格、尺寸、重量、颜色、评级、运输等的产品。
要开始使用此 WooCommerce 插件插件，请先下载它。 为此，请登录您的WordPress 仪表板，前往然后点击安装按钮。
等到插件安装成功，然后点击激活。
ShopReady 菜单将出现在您的 WordPress 仪表板上。 从这里，您可以访问 Shop 页面定制器插件提供的所有小部件、模块和预设内容。
从这个简单的菜单中，您可以启用/禁用小部件、创建模板以及为各种功能插入 API 密钥。
该插件的另一个重要功能是其用于 WooCommerce 功能的货币切换器。 要启用此功能，您需要按照以下说明进行操作。
要添加由Exchangerate创建的货币 API 密钥，请单击 API 选项卡。
登录您的 Exchangerate 帐户仪表板并复制您的 API 密钥以获取它。 粘贴您的 API 密钥后，转到您的WordPress 仪表板 > ShopReady > API并单击第 2 步：使用预设的产品页面模板，或从头开始创建一个
下一步是开始在产品页面上工作，但在此之前，您需要将产品添加到您的 WooCommerce 网站。 如果您不知道如何操作，可以按照本指南 -如何 WooCommerce 快速添加产品。
现在开始为产品展示定制页面，使用 ShopReady – WooCommerce Builder 通过转到插件仪表板并单击模板选项卡来创建一个简单的产品页面。 启用产品模板类别并查找单一产品设置。 现在单击编辑图标。
您将被重定向到Elementor Editor屏幕。 现在开始自定义页面，单击加号以添加 Elementor 部分。 根据您希望页面的外观以及您希望使用的小部件，您可以将各种类型的 Elementor 部分添加到页面中。
第 3 步：使用 Elementor 小部件自定义 WooCommerce 产品页面
- 添加产品标题
现在，由于您已经为 WooCommerce 产品页面放置了基本的 Elementor 部分结构，您可以从添加产品标题开始。 为此，您需要在产品页面上拖放产品标题小部件。
要显示适当的产品标题，请单击“内容”选项卡，在该选项卡下您将找到“编辑器刷新”选项。 从演示产品选项中选择适当的产品名称。
您必须从WooCommerce 产品仪表板添加或编辑适当的产品信息，以便此数据显示适当的产品标题。
- 将特色图片添加到产品页面
接下来，您将需要产品图片库和产品特色图片。 为此，您可以使用多合一 Elementor电子商务插件提供的多个图像小部件中的任何一个。
对于这个例子，我们将使用 ShopReady Thumbnail with Zoom 小部件，它的功能与标题所暗示的一样。 使用此小部件，当客户将鼠标悬停在您的产品图片上时，您可以向他们展示您的产品图片的 WooCommerce 产品悬停缩放版本。
和以前一样，您可以从演示产品选项的内容选项卡中选择正确的产品图像。
- 为定价小部件添加块
电子商务产品页面上的另一个重要项目是产品定价块。 为此，您需要使用正确的更新来更新 WooCommerce 产品属性，并使用 ShopReady价格小部件，该小部件必须放在产品标题下。
要显示正确的价格，请从“内容”选项卡下的“演示产品”选项中选择产品标题。
- 添加产品描述
您还可以使用此 WooCommerce 产品附加组件产品描述小部件添加高度可定制的产品描述。 在样式选项卡中，您可以选择自定义产品描述对大众的显示方式。
- 添加添加到购物车功能
添加到购物车是另一个非常重要的功能，允许您的客户在进入结帐页面之前在他们的购物车页面上拥有多个产品。
要在您的电子商务商店页面上拥有强大的添加到购物车功能，您可以使用 ShopReady 添加到购物车小部件。 使用此小部件，您可以让您的客户直接从“添加到购物车”块中增加和减少他们的购物车产品数量。
您还可以从 WooCommerce 产品样式Elementor Style选项卡排版、颜色、背景、边距、填充等自定义 Elementor 添加到购物车按钮。
- 将元数据添加到产品页面
为了为您的客户提供更好的购物体验，您应该使用您在向 WooCommerce 添加产品时添加的元数据和产品属性实施 WooCommerce 产品过滤器。
要在您的产品页面上展示这些数据，请搜索ShopReady Meta小部件并将其放在添加到购物车按钮下。
当您从“内容”选项卡下的“演示产品”选项中选择正确的产品标题时，您的产品标签和元数据应该会正确显示。
- 将社交媒体分享按钮添加到产品页面
您的客户还可以使用简单的社交媒体分享按钮块直接从您的 WooCommerce 产品页面在社交媒体上分享您的产品帖子。 您可以通过简单地使用拖放 Elementor Social Share 小部件来创建它。
可以直接从“内容”选项卡使用任何社交媒体图标、文本和可共享链接自定义该块。 并且还可以自定义以从 Elementor Style选项卡更改社交分享块的外观。
你已经完成了 WooCommerce 产品页面定制的基础知识。
第 4 步：将相关产品添加到 WooCommerce 产品页面
促进在线销售的一个好方法是使用 WooCommerce 产品附加组件相关产品小部件在您的产品页面上展示相关产品。 使用 ShopReady相关产品小部件，您可以分段创建令人惊叹的产品滑块块。
要使用小部件，您只需将小部件拖放到单个产品块下，然后分别选择要在单个产品页面下展示的每个产品。
综上所述
我们希望这份内容丰富的指南能帮助您更广泛地了解 WooCommerce 产品页面模板定制以及如何利用这些出色的工具为您的电子商务网站增添更好的功能。
通过 WooCommerce 弹出产品详细信息到产品比较表，电子商务市场所需的一切，ShopReady 都可以提供。 如果您对此主题有任何疑问，请随时在下方的评论部分与我们联系。