专注国内外云服务器
分享建站技术教程

如何自定义WooCommerce产品页面

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

您是否使用WooCommerce来设计您的在线商店?那么你应该知道超过300万个网站也在这样做。

那么这是否意味着它们看起来都一样?

好吧,如果您的网站有默认的WooCommerce模板,那么可以。您的在线商店将看起来像成千上万的其他商店。

您的独特产品值得拥有独特的定制WooCommerce产品页面。不仅是产品页面,您还需要自定义WooCommerce商店和其他页面以获得更好的用户体验。幸运的是,这不需要任何复杂的代码或过程。您可以通过编辑您的WooCommerce单一产品页面来执行简单的调整以改进您的页面设计以补充您的产品。

在本文中,即使您没有编码知识,我也将解释如何自定义WooCommerce产品页面。

您需要什么来自定义WooCommerce产品页面?

您一定想知道为在线业务定制WooCommerce单一产品页面需要什么。好吧,我将展示的产品定制WooCommerce的过程不需要您购买数十个付费插件或扩展。

除了安装和激活WooCommerce之外,您还需要在 WordPress 网站上激活以下两个插件才能漂亮地编辑您的WooCommerce产品页面::

  1. Elementor页面构建器
  2. ShopEngine

这两个插件都可以与WooCommerce插件顺利配合使用,并帮助您开始为所有新产品和旧产品设计和自定义单个产品页面。使用ShopEngine可以更轻松地更改WooCommerce产品页面或单个产品页面布局。因为您将在ShopEngine中获得WooCommerce商店页面模板,您可以在几分钟内创建和编辑WooCommerce商店页面。

逐步自定义WooCommerce产品页面

默认产品页面的定制和调整没有止境。不同类型的产品需要不同类型的定制。但是,在这个分步指南中,我将解释您可以对WooCommerce产品页面进行的关键自定义,以便您从所有产品页面获得更多销售额。

安装Elementor和ShopEngine

安装Elementor和ShopEngine

由于我们将使用Elementor和ShopEngine自定义默认WooCommerce产品页面,因此第一步是从WordPress安装插件。在这里了解如何安装Elementor和ShopEngine以更改WooCommerce产品页面或列表布局。

Elementor安装过程 ShopEngine 安装过程
1. 转到您的WordPress仪表盘。点击插件➜ 安装插件
2. 在搜索框中,输入Elementor,然后选择要安装的Elementor Website Builder插件。
3. 安装后,点击启用
1. 转到您的WordPress仪表盘。点击插件➜ 安装插件
2. 在搜索框中,输入ShopEngine,然后选择ShopEngine插件进行安装。
3. 安装后,点击启用

创建Woocommerce单一产品页面模板

  1. 转到ShopEngine ➜ 模板➜Add New
  2. 为模板Name
  3. 选择类型:Single
  4. 将模板设置为默认(YES
  5. 单击使用Elementor编辑

创建Woocommerce单一产品页面模板

在这个产品定制WooCommerce教程中,我将展示如何从头开始构建WooCommerce产品页面。这就是我选择空白模板的原因。但是,ShopEngine提供了9 种以上专业外观的预建单品模板,您可以导入和使用这些模板。

选择结构以更改您的WooCommerce单一产品页面布局

从Elementor中选择您喜欢的结构,开始制作您商店的单个Elementor WooCommerce产品页面。

选择结构后,您可以根据自己的喜好以任意顺序拖放任何小工具。创建自定义WooCommerce产品页面ShopEngine提供了20多个小工具 ,包括产品图片、产品标题、产品价格、产品库存、产品标签等。

注意:在开始构建产品页面之前,请确保您要使用的小工具已启用。您可以从ShopEngine ⇒ Widgets ⇒ Single中执行此操作,打开您需要的小工具并单击save changes

在这里,我将向您展示如何使用一些单品小工具。您可以按照相同的步骤使用相同的小工具或一组不同的小工具。

自定义产品价格

在Elementor上搜索“Product Price”小工具。从“ShopEngine Single Product”区块拖放产品价格小工具以制作WooCommerce自定义产品页面。

自定义WooCommerce产品价格

此价格区块小工具将帮助您:

自定义WooCommerce产品标题

自定义WooCommerce产品标题

在Elementor上搜索“Product Title”小工具。从“ShopEngine Single Product”区块拖放产品标题小工具以制作和自定义您的WooCommerce产品页面。这些对WooCommerce单一产品页面的简单编辑可以通过提供更好的用户体验来实现巨大的转换。

从产品标题栏的样式设置中,您可以进行以下自定义:

添加面包屑

使用ShopEngine添加面包屑

面包屑会让购物者知道他们在您网站上的位置。将面包屑添加到您的产品页面是一个明智的决定。添加面包屑的方法如下:

在Elementor上搜索“Breadcrumbs”小工具。将面包屑小工具从“ShopEngine Single Product”区块拖放到Elementor内容区域。

在样式设置选项卡中,您可以:

自定义产品附加信息

自定义产品附加信息

简短的描述可能不适合您的产品。当简短的描述不够时,额外的产品信息将增加更多销售的可能性。

在Elementor上搜索“Product Additional Information”小工具以编辑WooCommerce产品页面。将小工具从“ShopEngine Single Product”块拖放到内容区域以更改WooCommerce产品页面布局。

以下是您可以利用小工具控制的内容的列表:

利用产品追加销售

自定义产品加售

产品追加销售小工具将帮助您向买家推荐更多产品。追加销售产品将激发您的买家从您的商店购买更多产品,从而有助于增加利润。

在Elementor上搜索“Product Upsells”小工具。从“ShopEngine Single Product”区块中拖放小工具。这个经过编辑的WooCommerce产品页面布局将大大提高您的转化率。

在内容和样式选项卡中,您可以:

通过更改您的WooCommerce产品或类别页面布局,这些所有自定义项将使您的产品页面对您的客户更具吸引力。

自定义产品评级

自定义产品评级

在您的产品页面上显示产品评分将帮助您的访问者根据用户评分找到最佳产品。

利用ShopEngine中的Show Product Rating小工具并进行以下任何更改:

自定义产品元

自定义WooCommerce产品元

只需将产品元小工具拖放到Elementor内容区域即可开始自定义您的产品元设置。

使用产品元小工具,您可以显示或隐藏产品SKU、类别和标签。最重要的是,您还可以在几分钟内更改布局、对齐方式、填充、排版、链接悬停颜色和内容颜色。

更新产品描述样式

更新产品描述样式

拖放ShopEngine的产品描述小工具,对描述的颜色、排版和对齐方式进行任何您喜欢的更改。

自定义添加到购物车按钮

自定义添加到购物车按钮

确保您的产品页面具有出色的添加到购物车按钮。这肯定会在很大程度上提高转化率。

使用Elementor上ShopEngine的添加到购物车小工具,您可以更改数量图标、按钮位置等。

此外,您可以使用样式设置执行A/B测试,以找出最适合您更改后的WooCommerce产品页面布局的方法。

添加产品分享选项

添加产品分享选项

在您的WooCommerce产品页面上添加产品共享按钮是您现在可以实施的好主意。当购物者与他们的亲朋好友分享产品数据时,您将获得更多来自新用户的销售,而无需任何付费广告。

利用ShopEngine的产品分享小工具将可自定义的产品共享选项添加到您的WooCommerce产品页面。但是,您必须使用像WP Social这样的社交分享插件才能享受此选项。

自定义产品评论小工具

自定义产品评论小工具

将产品评论小工具放在产品页面的正确位置,以便产品用户可以留下他们的评分和评论。它还可以完美地推广您的品牌。

使用Elementor区块中的ShopEngine“Product Review”小工具,您可以对产品评论部分进行以下更改:

自定义产品库存状态

自定义产品库存状态

使用ShopEngine的“Product Stock”小工具,您可以自定义库存或现有产品文本和图标以及WooCommerce产品页面的颜色、排版和对齐方式。

最重要的是,您可以完全自由地设置“缺货”和“可用于延期交货状态”的图标、对齐方式、颜色和排版。

添加和自定义产品选项卡

添加和自定义产品选项卡

添加产品选项卡可让您的客户提供有关您在WooCommerce商店销售的产品的更多信息。使用ShopEngine,您可以添加自定义选项卡并对其进行自定义以满足您的需求。

只需从Elementor上的ShopEngine单一产品区块拖放“Product Tabs”小工具,您编辑的WooCommerce产品页面就可以使用了。您可以使用小工具控制产品选项卡的以下方面:

显示相关产品

显示相关产品

显示相关产品供您的客户购买是您可以在您的电子商务网站上实施的一个了不起的想法。WooCommerce产品页面的ShopEngine“Related Product”小工具将帮助您显示具有以下设置的相关产品:

预览响应模式的设置或更改

响应模式下的预览设置

由于现在大多数客户都使用移动设备从在线商店购买,因此请确保您商店的产品页面可以无缝地为移动设备和平板电脑查看器工作。

利用Elementor标记为响应模式的按钮来查看全宽产品页面的更改在移动和桌面设备上的外观。

如果您发现移动设备和平板电脑视图存在一些不一致或问题,请修复这些问题以供移动设备查看。

完成为WooCommerce产品页面添加和自定义所需的小工具并预览设备的产品页面布局后,单击Elementor的“更新”按钮。

而已!按照我在此产品定制WooCommerce教程中分享的步骤进行操作。

答对了!您编辑的WooCommerce产品页面现在已针对移动设备进行了优化并准备上线。

优化产品页面以提高转化率的5种方法

自定义WooCommerce产品页面后,就该优化页面了。优化良好的产品页面可以立即促进销售。

为了获得良好的转化率,重要的是通过更改WooCommerce产品页面布局来优化产品页面。以下是您可以遵循的 5 种方法,以最大限度地提高在线商店的转化率和收入。

维护信息层次结构

WooCommerce产品页面中的信息层次结构

确保您设计了维护信息层次结构的WooCommerce单一产品页面。

例如,将面包屑放在所有信息的顶部是一种常见的做法。面包屑通常后跟产品标题和其他与产品相关的信息,如评论或描述。在大多数在线商店中,您会在页面左侧看到带有图标以查看放大视图的图像。

此外,请确保您在新编辑的WooCommerce产品页面上提供的信息让购物者对您要出售的产品有一个完整的了解。

使用高质量图像

使用高质量的产品图片

除非您巧妙地将它们展示给您的客户,否则只有拥有好的产品才能为您的口袋带来更多的钱。产品图片是在产品页面和商店页面内向目标受众展示产品的绝佳方式。

但是,如果您的图片平庸、晦涩或角度错误,您就不能对它们抱有太大期望。当您发布产品图片时,请确保它们清晰、以产品为中心并且从正确的角度拍摄。

添加上下文产品图像可以在适当的环境中展示您的产品。例如,捕捉厨房中厨房电器的图片,向您的客户展示这些电器与他们厨房的完美匹配程度。

聘请专业摄影师为产品图库拍摄详细的产品图像。如果是实物产品,最好从各个角度捕捉同一产品。它将帮助客户更清楚地看到产品零件。最重要的是,它使客户对购买充满信心。

最后但并非最不重要的一点是,我建议使用高分辨率的产品图库图片。尽管图像可能会使您的WooCommerce产品页面变慢一点,但您可以使用任何免费的图像优化插件(如Smush )将影响降到最低。

WordPress的图像优化插件

写一个杀手级产品描述

令人信服且适当的产品细节或描述在在线销售中起着重要作用。确保产品描述提及关键产品信息。顺便说一句,这还不够。这些信息也应该易于阅读和切中要害。您可以使用项目符号格式来一一显示信息。

记住,你不需要一直很正式。如果它适合产品类别,您可以使用有趣、平易近人且令人愉快的另类声音来编辑产品页面WooCommerce。

这是来自Picky Bars的早餐热狗套餐的吸引人的描述:

杀手级产品描述示例

最后的建议是,在您编写产品描述时,请注意产品的各种使用选项。它将帮助潜在客户了解产品是否能满足他们的需求,或者他们是否需要其他东西。

以正确的方式定价

无论您销售什么类型的产品,价格始终是您客户的一个重要因素。定价以及将其放置在自定义WooCommerce产品页面上的方式会影响他们的购买决定。

为了使您的定价易于查看,您可以使用大字体。使定价文本加粗或使用对比色也可能适合您。

突出显示折扣并显示正常价格,然后显示新价格。这种定制和更改的WooCommerce产品页面布局将提供易于查看的用户体验。

以下是Picky Bars如何做到这一点的示例:

如何在您的WooCommerce产品页面上定价

如果您的客户无法清楚地看到价格,您应该重新考虑您为编辑WooCommerce产品页面所做的设计定制。

使用页面SEO优化WooCommerce产品页面

为了让您的WooCommerce产品页面获得更多自然流量,使用页面SEO技术非常重要。使用正确的标题标签、元描述、产品图片的替代标签、关键字、描述和其他页面SEO因素来获得更多客户,从而提高转化率。

关键的页面SEO因素

更多指南:

需要更多WooCommerce页面定制指南?阅读以下博客以自定义和更改您的WooCommerce商店和其他页面:

通过这些博客,您将了解如何设置和更改WooCommerce自定义商店、购物车、我的帐户、结帐页面。

小结

无论您如何自定义在线商店的WooCommerce产品页面。无论是Elementor WooCommerce产品页面还是默认页面,请确保您所做的更改是用户友好且直观的。在自定义和编辑产品页面WooCommerce时,请确保遵循一致性、相关性和上下文。但是,您编辑和更改的WooCommerce产品页面布局需要针对设备进行高度优化。

一开始,自定义您的WooCommerce单一产品页面似乎是一项艰巨的任务。但是,如果您有Elementor页面构建器和ShopEngine,您应该没有压力。

文章来源于互联网:如何自定义WooCommerce产品页面

赞(0)
未经允许不得转载:吾上云 » 如何自定义WooCommerce产品页面
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们