如何使用PowerPack Elementor插件编辑WooCommerce产品页面

已发表: 2025-01-30

如果您正在经营WooCommerce商店,则可能知道拥有精心设计的产品页面有多重要。一个很棒的产品页面不仅使您的商店看起来很专业,而且还可以帮助访客转换为客户。这就是PowerPack Woobuilder的来源。凭借其简单的拖放界面和各种各样的WooCommerce小部件,您可以在不编写代码的情况下设计出惊人的产品页面。

在本指南中,我们将深入研究如何使用PowerPack Woobuilder,WooCommerce和Elementor创建单个产品页面和产品档案页面


为什么选择PowerPack WooCommerce Buolder?

在进入实际过程之前,让我们谈谈为什么PowerPack Woobuilder是WooCommerce商店的游戏规则改变者。

  • 超级易于使用:无需编码 - 只是拖动,掉落和自定义!
  • 广泛的小部件:访问WooCommerce特定的小部件,例如产品图像,定价,添加卡特按钮,评论等。
  • 自定义布局:完全控制产品页面的外观和感觉。
  • 与Elementor的无缝集成:与Elementor的魅力一样工作,因此您可以在视觉上构建页面。
  • 更好的购物体验:精心设计的产品页面使客户更容易找到信息并进行购买。

现在,您知道为什么PowerPack WooCommerce Builder值得您关注,让我们开始创建一个产品页面。


第1部分:使用PowerPack WooCommerce Builder创建单个产品页面

步骤1:安装所需的插件

在开始之前,请确保您在WordPress网站上安装了以下插件:

  • Elementor
  • WooCommerce
  • Elementor的PowerPack插件

步骤2:创建一个新的单个产品模板

  1. 转到仪表板>>模板,然后单击“添加新”
  2. 选择“页面”作为模板类型。
  3. 给您的模板一个名称(例如“自定义单产品页面” )。
  4. 单击创建模板
创建新模板

步骤3:自定义布局

一旦创建了模板:

  1. 选择帆布布局以进行全宽设计,或者如果您喜欢标准外观,请使用默认布局。要更改页面布局,请单击面板顶部的设置图标。从那里,您可以选择适合您设计需求的布局。
  2. 单击发布以保存更改。
更改页面布局

步骤4:启用Woobuilder

现在,让我们打开Woobuilder,以便我们可以开始设计。

  1. 返回您的WordPress仪表板。
  2. 导航到Elementor >> PowerPack
  3. 单击WooCommerce Builder选项卡,然后启用WooCommerce Builder上切换。
启用WooCommerce Buolder

步骤5:分配单个产品模板

启用WooCommerce Builder切换后,将出现两个新选项:单产品模板产品档案页面模板。

在本节中,我们正在创建一个单个产品页面,因此请在单页模板选项下从下拉菜单中创建刚创建的模板。

不要忘记单击“保存更改”按钮。

保存更改单个产品模板

步骤6:使用WooCommerce小部件设计单产品页面

  1. 单击单个产品模板下的编辑
  2. 单击该选项将带您回到Elementor编辑器,您可以在其中开始自定义单个产品模板。
  3. 您可以拖放小部件,例如:
    • 产品标题
    • 产品图像
    • 产品价格
    • 添加到购物车按钮
    • 产品描述
    • 产品评论
    • 相关产品
  4. 自定义每个小部件的设计以匹配您的品牌。
PowerPack WooCommerce小部件

提示:看不到Woo小部件?转到Elementor >> PowerPack >>元素并确保它们已启用。

要详细了解如何使用每个PowerPack Woo(要创建单个产品模板)的元素,请查看我们的分步指南,以了解如何使用Elementor创建WooCommerce单个产品页面。

步骤7:发布并应用更改

一旦您对设计感到满意,请单击发布并瞧!您的自定义单产品页面已直播,并准备给您的客户留下深刻的印象。


第2部分:使用PowerPack WooCommerce Builder创建产品档案页面

产品档案页面是所有产品以有组织和干净的布局显示的地方。让我们建立一个吧!

步骤1:创建一个新产品存档页面模板

  1. 转到仪表板>>模板
  2. 单击“添加新”。
  3. 选择页面作为模板类型。
  4. 命名(例如,“自定义产品存档页面”)。
  5. 单击创建模板
创建新产品档案模板

步骤2:自定义布局

  1. 为标准外观选择帆布以进行全宽度显示或默认显示
  2. 单击发布以保存更改。
档案模板的页面布局

步骤3:启用Woobuilder

就像以前一样:

  1. 转到Elementor >> PowerPack。
  2. 单击WooCommerce Builder。
  3. 切换它
启用WooCommerce Buolder

步骤4:分配产品存档页面模板

  1. 启用WooCommerce构建器切换后,您需要分配产品存档页面。
  2. 在本节中,我们正在创建一个产品存档页面,因此请在产品存档页面模板选项下从下拉菜单中创建的模板。
  3. 单击“保存更改”
选择产品档案模板

步骤5:使用WooCommerce小部件设计产品档案页面

  1. 单击“产品存档页面”模板下的编辑
  2. 拖放PowerPack - WooCommerce小部件,例如:
    • 产品网格
    • 产品类别
    • 产品轮播
    • 搜索和过滤小部件
    • 添加到推车按钮
  3. 自定义所有与您的品牌相匹配的一切。

步骤6:发布并应用更改

当您对所有外观满意时,单击发布,您的产品档案页面将上线!


总结!

借助PowerPack Woobuilder和Elementor,您可以完全控制WooCommerce商店的设计。精心制作的单产品页面和产品档案页不仅使您的商店在视觉上吸引人,而且可以改善用户体验并增加转化率。

通过遵循本指南,您可以创建一家在比赛中脱颖而出的令人惊叹的WooCommerce商店。现在,继续开始设计!

如果您找到此有用的指南,请分享!另外,请加入我们的Twitter,Facebook和YouTube。

有问题还是需要帮助?在下面发表评论!

编辑团队的图片

编辑团队

留下评论取消回复

上一篇以前的如何在Elementor中单击的列和部分? (自由的)