标准的 WooCommerce 产品页面功能强大且外观精美！但我们可以做得更好，尤其是结合 WooCommerce 和 Elementor！
在本指南中，我们将向您展示如何构建自定义（且美观）的 WooCommerce 产品页面以“吸引”您的客户并产生更多销售额。
如何使用@elemntor 创建漂亮的#WooCommerce #Product 页面#WordPress ??️
点击发推
您需要什么
除了您已经拥有的，最重要的是 WordPress 安装和 WooCommerce - 您需要 Elements 页面构建器插件。
Elementor 有两种版本——免费和付费。虽然 Elementor 中的 WooCommerce 有一些免费的自定义功能，但要获得真正的好东西，您需要升级到专业版。一个网站的价格为 49 美元。
注意； Elementor 不是唯一与 WooCommerce 配合使用并允许您构建自定义 WooCommerce 产品页面的页面构建器。如果您想探索那里还有什么，这里有一些选择。也就是说，Elementor 是我们最喜欢的 WooCommerce 定制解决方案。
开始工作之前，您必须从您的网站安装 Elementor 免费插件和 Elementor pro 插件：
- 免费安装 Elementor 很容易。只需转到插件 → 添加新插件，然后在搜索框中键入 Elementor。安装并激活。
- 要安装 Elementor pro，您必须先在 Elementor.com 上完成购买。您可以从您的用户配置文件下载 Elementor pro 软件包 - 它是一个 ZIP 文件。转到插件 → 添加新项目，然后单击上传插件按钮。从桌面选择 Elementor ZIP 并将其上传到您的站点。激活插件。
Elementor 会在一切正常运行之前要求您验证您的许可证。
使用 Elementor 创建一个新的 WooCommerce 产品页面
首先，转到模板并单击添加新的。
从列表中选择“单一产品”。
Elementor会显示一些Ready - 立即使用的 WooCommerce 产品页面模板。对于大多数用户来说，最好选择看起来最接近您想要的路径。从头开始创建产品模板通常需要更多时间。修改现有模板更容易。单击模板插入。
你会看到模板添加到 Elementor 画布。现在您可以根据自己的喜好自定义模板——在页面上添加新元素、自定义当前元素、删除不需要的内容等等。
在左侧边栏，您会注意到一系列 WooCommerce 元素，例如产品标题、产品图片、产品价格以及 WooCommerce 显示的有关您产品的所有其他数据。
您可以将所有这些元素拖到画布上您需要它们的确切位置。
您可以先进行一些自定义：
添加您的品牌和颜色
库存的 Elementor 产品模板看起来很棒，但它们可能与您的品牌不匹配不完全匹配。我们可以修复的一项快速更改是调整背景颜色、字体颜色和各种排版常规设置。
要调整页面上任何图块的大小，请单击图块右上角的铅笔图标。
然后，左边在边栏中，切换到“样式”选项卡。您可以在此处执行所有与样式和外观相关的自定义。例如，对于“产品标题”块，您可以更改文本的颜色、字体和阴影。
我们点击“布局” .这将打开另一个框，您可以在其中更改字体及其所有参数。
逐一浏览所有文本并进行编辑，直到它们看起来像您想要的那样。特别注意价格块的外观——价格块必须清晰可见，以免混淆顾客。
Rescale/Move产品说明
WooCommerce 在几个地方显示您的产品描述。我们不需要立即了解所有详细信息，只需关注两件事：
- 简短说明
- 您的产品数据标签
简短的描述是它的发音。 WooCommerce 从“简短描述”框中获取此文本（创建新产品时填写的字段之一）。简短描述最好显示在产品页面顶部附近。
您可以将 Elementor 的“简短描述”块拖放到您想要的位置。
商品数据标签为实际上是存放商品主要信息的模块。确保它在新的 WooCommerce 产品页面模板中可见。
别忘了添加这些方块的颜色和排版样式。
调整“添加到购物车”按钮
“添加到购物车”按钮是任何电子商务网站上最重要的单个按钮。您真的希望它脱颖而出并吸引客户的注意力。
您可以为 Elementor 中的“添加到购物车”按钮使用两种不同的块类型。有添加到购物车块和自定义添加到购物车块。
两个都做实验看看哪个效果更好。单击铅笔图标，查看边栏中针对给定块设置的可用内容。
只需点击几下即可使按钮看起来更好。
添加/删除商品评分
显示产品评分是让客户最终购买您的产品的好方法。唯一的问题是，您需要先获得一些评级。 ♂♂️
如果您的店铺是全新的，您还没有任何评分，最好不要在页面上显示评分。右键单击 Product Ratings 元素并将其删除。
以后可以再- 添加方块，甚至自定义其外观。您可以更改的一些内容是星星的颜色和事物的间距。
针对手机和平板进行调整浏览量
如今，更多的人通过智能手机访问网络，而不是台式机和笔记本电脑。因此，您的商店必须针对移动浏览进行优化，否则您将失去销售额！
WooCommerce 已经针对移动设备进行了优化，但由于我们正在创建自定义产品页面，因此我们需要确保您的新产品模板也看起来不错。
在 Elementor 界面的左下角，有一个标有“响应模式”的按钮。
当你点击它时，您将能够在桌面、平板电脑和移动设备视图之间切换。选择其中之一并根据需要调整设计。
这里很酷的一点是，您可以更改块的显示设置，使其仅在手机或平板电脑上生效。例如，如果您认为移动设备上的价格应该更高，请点击价格栏中的铅笔图标，然后点击编辑字体，最后切换到字体大小旁边的“移动设备”：
如果现在更改字体大小，只会影响移动视图。
逐个模板检查，直到为移动设备和平板电脑查看器配置好所有内容。
发布自定义 WooCommerce 产品页面
准备好新产品模板后，单击 Elementor 界面左下角的“发布”按钮。
Elementor 会要求您添加何时使用模板的条件。
将模板用于所有产品，只需从列表中选择“产品”，如下所示：
点击保存并关闭完成所有操作。
没错！ 🔥完成后，您的自定义 WooCommerce 产品页面已保存并替换为默认产品页面。
当您访问商店中的任何产品时，您都可以看到活动的产品页面。
如何使用@elemntor ？ ?️ 创建漂亮的#WooCommerce #Product Pages #WordPress
点击发推
