标准的WooCommerce产品详情页是相当实用的，但是不容易定制！我们可以将WooCommerce和Elementor Pro结合起来制作更专业漂亮的页面。

你需要什么

WordPress和WooCommerce和Elementor Pro。

Elementor有两种版本--普通版本和专业版。虽然在Elementor普通版中有一些可用于WooCommerce的定制功能，但要获得真正的好东西和使用Elementor的专业模板，你需要升级到Elementor Pro。这将花费你一个网站$49.00。

如果嫌贵可以看看这篇文章，绝对省钱。

注意：Elementor并不是唯一能与WooCommerce合作并让你建立自定义WooCommerce产品页面的页面生成器。如果你想探索一下还有什么其他方法，也有其它一些替代品。但目前Elementor是我们最喜欢的WooCommerce定制解决方案。

在你开始工作之前，你必须在你的网站上安装Elementor免费插件和Elementor专业插件。

安装 Elementor 普通插件很简单。只需进入插件→添加新插件，在搜索框中输入Elementor。安装并激活。

要安装 Elementor pro，你首先要在 Elementor.com 上完成购买。你可以从你的用户资料中下载 Elementor pro 包--它是一个 ZIP 文件。进入插件→添加新插件，点击上传插件按钮。从你的桌面上选择 Elementor ZIP，并将其上传到你的网站。激活该插件。

Elementor会要求你在一切运作之前验证你的许可证。

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

首先，进入模板，点击添加新的。

从列表中选择单一产品.

Elementor会显示一些现成的WooCommerce产品页面模板，你可以开始使用。对于大多数用户来说，选择一个看起来最接近你想要的东西是最好的途径。从头开始创建一个产品模板一般会花费更多的时间。只是修改一个现有的模板更容易。点击 "插入 "来获取模板。

你会看到你的模板被添加到 Elementor 画布上。你现在可以按你认为合适的方式定制模板--向页面添加新元素，定制当前的元素，删除你不需要的东西，等等。

在左边的侧边栏，你会注意到一系列的WooCommerce元素，如产品标题、产品图片、产品价格，以及WooCommerce显示的关于你的产品的每一个其他数据。

你可以把这些元素中的每一个，拖到你需要它们的确切位置上。

这里有一些你可以先做的定制工作:

添加您的品牌和颜色

Elementor的产品模板看起来不错，但它们可能与你的品牌不完全匹配。为了解决这个问题，我们可以做的一个快速改变是调整背景颜色、字体颜色和各种排版设置。

要调整页面上的任何块，点击块右上角的铅笔图标。

然后，在左边的侧边栏，切换到风格标签。在这里，你可以执行所有与风格和外观有关的定制。例如，对于产品标题块，你可以改变文本的颜色、排版和阴影。

让我们点击 "排版"。这将显示另一个框，你可以改变字体和所有参数。

一个接一个地处理所有的文本，并编辑它们，直到它们看起来像你想要的那样。要特别注意价格块的样子--它需要清晰可见，这样才不会让客户感到困惑。

重新调整/移动产品描述

WooCommerce在少数几个地方显示你的产品描述。我们现在不需要讨论所有的具体细节，但让我们只关注两件事。

简短的描述

你的产品数据标签

简短描述和它听起来一样。WooCommerce从简短描述框（您在创建新产品时填写的字段之一）中获取该文本。让简短描述显示在产品页面顶部的某个地方是个好主意。

你可以使用Elementor的简短描述块，把它拖放到你需要的地方。

产品数据标签实际上是容纳产品主要信息的块。确保它在你的新WooCommerce产品页面模板中处于可见位置。

不要忘了对这些块的颜色和排版也进行调整。

调整你的 "添加到购物车 "按钮

添加到购物车 "按钮是任何电子商务网站上最重要的一个按钮。你真的希望它能脱颖而出，吸引客户的目光。

在Elementor中，你可以为 "添加到购物车 "按钮使用两种不同的块类型。一种是 "添加到购物车 "块，另一种是 "自定义添加到购物车 "块。

实验一下这两种方法，看看哪种方法对你的情况更好。点击铅笔图标，看看在侧边栏中，当涉及到给定块的设置时，有哪些可用的东西。

只需点击几下，你就可以让你的按钮看起来更漂亮。

添加/删除产品评级

显示产品评级可以是一个很好的方式，给你的客户最后的推动力来购买你的东西。唯一的问题是，你首先需要有一些评级。

当你的商店是全新的，而且你还没有任何评级，最好不要在页面上有评级块。在产品评级元素上点击右键，删除它。

稍后，你可以把那个区块加回去，甚至可以定制它的外观。你可以改变的一些东西是星星的颜色和事物的间距。

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

这些天，更多的人通过智能手机访问网络，而不是通过台式电脑和笔记本电脑。出于这个原因，你的商店必须为移动浏览进行优化，否则你将失去销售机会

WooCommerce已经进行了移动优化，但由于我们正在创建一个自定义产品页面，我们需要确保你的新产品模板看起来也不错。

在Elementor界面的左下角，有一个按钮，标有响应模式。

当你点击它时，你将能够在桌面、平板和移动视图之间切换。选择其中一个，如果需要的话，可以调整设计。

这里最酷的是，你可以改变你的块的显示设置，使它们只在手机或平板电脑上生效。例如，如果你认为价格在手机上应该更大，点击价格块中的铅笔图标，然后点击编辑排版，最后在字体大小旁边切换到手机。

如果你现在改变字体大小，只有移动视图会受到影响。

逐一检查你的模板元素，直到你为手机和平板电脑浏览者配置好全部内容。

发布自定义的WooCommerce产品页面

当你的新产品模板准备好了，点击Elementor界面左下角的发布按钮。

Elementor会要求你为模板的使用时间添加一个条件。

要让模板用于所有产品，只需从列表中选择 "产品"，像这样。

点击 "保存并关闭 "以最终确定一切。

这样一来，你的自定义WooCommerce产品页面已经被保存并取代了默认的产品页面。

当你访问你商店里的任何产品时，你可以看到你的产品页面在运行。