您想了解如何创建个性化的商店页面吗？ WooCommerce 与 Elementor？
如您所知，Elementor Pro 带有构建器功能 WooCommerce 让您 创建一个网站 个性化电子商务的 WooCommerce 无需编码。 此功能允许您使用 Elementor 的可视化编辑器创建自定义 WooCommerce 页面，该编辑器提供直观的界面。
另请参见： 如何在WordPress上安装Elementor
在撰写本文时，您可以为商店页面、产品页面和产品存档页面（标签和类别）创建自定义页面。 很快，您还可以为结帐页面和购物车页面创建自定义页面。
在本文中，我们将向您展示如何使用 Elementor Pro 的 WooCommerce 构建器功能创建自定义 WooCommerce 商店页面。
商店页面本身是 WooCommerce 中的默认页面之一。 此页面用作展示您的产品的展示柜。 您可以通过以下方式访问此页面 yoursite.com/store. 默认情况下，WooCommerce 商店页面仅显示 WooCommerce 产品。
通过使用 Elementor Pro 创建自定义商店页面，您可以添加元素以使您的店面更具吸引力。
如何使用 Elementor 创建 WooCommerce 商店的自定义页面
至少有两个 Elementor 小部件可用于创建 WooCommerce 商店的自定义页面： 存档产品 和 产品。
在本例中，我们使用后者。
小部件的功能 热销产品 与小部件的非常相似 帖子。 不同之处在于 Products 小部件用于显示 WooCommerce 产品，而 Posts 小部件用于显示博客文章。
请注意，您只能在安装并激活 WooCommerce 插件后才能找到产品小部件。
要开始使用 Elementor Pro 创建自定义 WooCommerce 商店页面，请转到 第一 à 模板 -> 主题生成器 在您的 WordPress 仪表板上。 单击选项卡 热销产品 档案 的 Theme Builder 页面，然后单击按钮 添加 产品档案。
为您的模型命名并单击按钮 创建模型。
如果您想从模板创建自定义商店页面，您可以从三个自定义商店页面模板中进行选择。 如果您想从头开始构建自定义商店页面，您只需关闭模板库即可。
在此示例中，我们将从头开始创建自定义商店页面。 如上所述，我们将使用产品小部件来显示产品。
在将产品小部件添加到编辑框之前，您可以通过添加部分和列来定义布局。 布局准备好后，您只需将 Products 小部件拖到编辑框中即可。
如您所见，产品小部件会自动加载并显示最新的 WooCommerce 产品。 您可以通过打开块来修改查询 询问 标签下 包装内容 从设置面板。 有五个选项可供选择：
- 当前查询 - 当前查询
- 最新产品 - 最新产品
- 销售 - 销售
- 精选 - 精选
- 手动选择 - 手动选择
您还可以设置产品的显示顺序或排除某些
要设置列数和行数，可以打开块 内容 标签下 内容。 从此块中，您还可以激活 分页.
您可以使用设置面板，直到获得“产品”小部件的最佳设置。 完成产品小部件后，您可以向页面添加更多小部件。
完成页面编辑后，您可以单击按钮 PUBLISH 在设置面板的底部。
单击按钮添加显示条件 添加条件。 由于您要创建自定义商店页面，请选择该选项 商城 页面。 点击按钮 保存并关闭 以保存更改。
到目前为止，您已使用 Elementor Pro 成功创建了自定义 WooCommerce 商店页面。 你可以走了 在您的 site.com/store 检查结果。
自定义产品小部件
在发布页面之前，您可以自定义产品小部件以使其更具吸引力。 为此，请单击编辑框中的小部件并导航到选项卡 样式 从设置面板。 您可以打开四个块，如下所示：
热销产品
您可以打开此块来定义列和行之间的间隙。 从此块中，您还可以设置排版（字体系列、字体大小等）以及产品元素的文本颜色，例如产品标题、产品价格、产品评级、产品等……。 您还可以设置产品图片的边框，
- 盒子
在这种情况下，Box 指的是每个产品的容器。 你可以打开方块 盒子 定义容器的边框宽度，边框半径， 盒子的影子、背景颜色、边框颜色等。
- 分页
如果您激活该选项 分页 来自街区 快乐的， 你可以打开方块 分页 标签下 样式 自定义分页。 您可以设置间距、边框颜色、背景颜色等。
您还可以为每个状态（正常、指向和活动）定义不同的参数。
- 销售快讯
当您在 WooCommerce 中添加新产品时，您可以设置销售价格属性以向访问者显示相关产品已打折。 为了强调这一点，您可以在商店页面上显示促销属性，以便打折产品具有促销徽章。
你可以打开方块 销售快讯 个性化销售徽章。 您可以定义文本颜色、背景颜色、排版、边框半径、大小（宽度和高度）、距离等元素。
最后
WooCommerce Builder 是 Elementor Pro 提供的功能之一。 它允许您 创建一个网站 具有 WooCommerce 且无需编码的个性化且独特的电子商务平台。 无需安装 WordPress主题 它声称是为 WooCommerce 设计的。 相反，您可以使用 Elementor 的可视化编辑器自己创建自定义 WooCommerce 页面。
另请参阅： 如何添加分隔线以在 Elementor 中创建部分
在 3.2.2 版本之前，Elementor Pro 仅允许您创建自定义商店页面、自定义单个产品页面和自定义产品存档页面。 但是 Elementor 宣布，在 Elementor Pro 的下一版本中，您还可以创建自定义购物车页面、自定义结帐页面和自定义客户帐户页面。
立即获取Elementor Pro！
结论
这里 ！ 这篇文章就是这样，向您展示如何使用 Elementor 为 WooCommerce 商店创建自定义页面. 如果您对如何到达那里有任何疑问 f让我们知道 评论.
但是，您也可以咨询 我们的资源，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
