如何自定义WooCommerce产品页面(无代码方法)

您是否正在寻找一种自定义WooCommerce产品页面的方法?通过微调您的WooCommerce产品页面,您可以获得更多销售额并提高商店的转化率。在本文中,我们将向您展示如何自定义WooCommerce产品页面,而无需编写任何代码。

为什么要在WordPress中自定义WooCommerce产品页面?

您的产品页面是在线商店中最有价值的内容之一。问题是默认的WooCommerce产品页面没有针对转化进行优化。

通过创建独特的产品页面,您通常可以以更高的速度将访问者转化为付费客户。这意味着您可以赚取更多的钱,而无需吸引更多访问者访问您的网站或改善您的WooCommerce SEO。

在开始自定义WooCommerce产品页面之前,您需要确保拥有最快的WooCommerce托管来支持您的在线商店,因为速度对转化率也有很大影响。

完成此操作后,让我们看一下如何在没有代码的情况下自定义WooCommerce产品页面。

如何在WordPress中自定义您的WooCommerce产品页面

创建自定义WooCommerce产品页面的最简单方法是使用SeedProd。

SeedProd 是最好的拖放式 WordPress 页面构建器,并带有 180 多个专业设计的模板。

更好的是,您可以使用SeedProd的高级主题构建器创建自定义WordPress主题,而无需编写任何代码。

您可以使用此拖放式主题构建器自定义在线商店的每个部分,包括产品页面。

SeedProd 甚至具有现成的 WooCommerce 模板和电子商务块,可让您快速创建高转化率的在线商店。

请注意,此方法将取代您当前的WooCommerce主题。

安装并激活种子产品

您需要做的第一件事是安装并激活 SeedProd 插件。

注意: 有一个免费版本的 种子生产 无论您的预算如何,它都可以让您创建令人惊叹的设计。但是,对于本指南,我们将使用WooCommerce块和主题构建器附带的高级插件。您需要购买 Pro 订阅或更高版本才能使用主题构建器。

激活后,转到种子生产>>设置并输入您的许可证密钥。

您可以在SeedProd网站上的帐户下找到此信息。输入许可证密钥后,单击"验证密钥"按钮。

选择一个伍商务模板套件

完成此操作后,是时候选择将用于在线商店的WooCommerce模板工具包了。只需前往 种子生产 >> 主题生成器,然后单击"主题模板套件"按钮。

由于我们正在创建自定义WooCommerce主题,请单击"WooCommerce"选项卡以查看所有不同的电子商务工具包。

要预览设计,只需将鼠标悬停在其上,然后单击放大镜即可。

这将在新选项卡中打开模板工具包。

这是一个实时预览,因此您可以通过单击链接、导航菜单、按钮和其他交互式内容来查看套件中的其他设计。

由于您正在创建自定义WooCommerce产品页面,因此请务必查看产品页面设计。

找到要使用的模板工具包后,将鼠标悬停在其上,然后在出现时单击复选标记。在本指南中,我们使用WooCommerce入门主题,但您可以使用所需的任何模板。

自定义WooCommerce产品页面模板

SeedProd 会将整个工具包导入您的 WordPress 网站,因此您可以使用该工具包创建自定义产品存档、商店页面、博客索引等。

要查看所有这些模板,请转到 种子生产 >> 主题生成器

安装模板后,您就可以开始自定义产品页面了。

要开始使用,请将鼠标悬停在产品页面模板上,然后在出现时单击"编辑设计"链接。

这将在SeedProd的拖放编辑器中打开模板,右侧是WooCommerce模板的预览,左侧是一些块设置。

SeedProd将使用来自WooCommerce产品之一的内容展示产品页面的外观示例。

所有WooCommerce模板都带有内置块,这是所有SeedProd设计的核心组件。

要自定义块,只需在页面预览中单击以选择它,然后在左侧菜单中进行任何更改。

例如,该模板附带一个内置的特色产品块,您可以通过几种不同的方式对其进行自定义。

首先,您可能希望使用左侧菜单中的设置更改块的大小和对齐方式。

您可以在"高级"标签中找到更多设置。在这里,您可以通过添加边框或阴影、添加 CSS 动画等来使图像真正脱颖而出。

当您进行更改时,实时预览将自动更新,因此您可以尝试不同的设置,以查看在线商店中的最佳外观。

WooCommerce模板还有一个添加到购物车号召性用语按钮。这允许购物者购买您的产品,因此您需要使按钮突出显示。

首先,您可以将"添加到购物车"替换为您自己的自定义消息,例如"立即购买"或"立即获取"。要进行此更改,只需选择"添加到购物车"按钮,然后在"按钮文本"字段中键入新文本。

您可能还希望向按钮添加图标字体,以帮助访问者一目了然地了解此按钮的作用。

SeedProd 附带一个内置库,其中包含 1400 多个字体真棒图标,您可以在产品页面上使用。在左侧菜单中,点击以展开"图标"部分。

现在,您可以选择是在按钮文本之前还是之后显示图标。

只需做出决定,然后单击"选择图标"按钮。

您现在将看到您可以使用的所有不同的字体真棒图标。当您找到喜欢的图标时,单击一下。

如果您对按钮的消息感到满意,可以通过单击"模板"选项卡来更改其外观。在这里,您将找到可以使用的不同按钮模板。

要使用任何这些设计,只需单击所需的设计即可。

选择模板后,您可以通过单击"高级"选项卡来微调按钮的外观。在这里,您可以更改按钮和数量框之间的间距,增加边框半径以创建弯曲的角等等。

另一种选择是打开"按钮样式"下拉列表,然后从列表中选择新样式。

大多数设置都是不言自明的,因此值得浏览它们以查看您可以创建哪些不同类型的效果。

另一个重要部分是"产品数据选项卡"块。这会向购物者显示详细信息,例如产品标签、属性和类别。

考虑到这一点,值得单击以选择块,然后在左侧菜单中查看可以进行哪些更改。例如,您可以更改背景颜色、文本颜色、增加填充等。

要删除任何默认块,只需将鼠标悬停在该块上即可。

然后,单击出现垃圾桶图标。

您还可以使用拖放在页面中移动块。

通过自定义WooCommerce产品页面获得更多销售

模板的内置块是一个很好的开始,但您可能希望添加自己的内容。

SeedProd有很多WooCommerce块,您可以使用它们来创建高转化率的在线市场或商店。为了帮助您,这里有一些您可能想要添加到您的WooCommerce产品页面的块。

显示相关商务产品

通过在产品页面上显示相关商品,您可以获得更多销售额并增加平均订单价值。这些可能是购物者经常一起购买的产品,也可能是相互补充的商品。

例如,如果客户购买笔记本电脑,那么他们也可能对笔记本电脑包感兴趣。

SeedProd带有一个现成的相关产品块。但是,为了充分利用此块,您需要在WooCommerce插件中设置链接的产品,如下图所示。

完成后,只需在 SeedProd 编辑器中找到"产品相关"块,然后将其拖到布局上即可。

默认情况下,该块在单个列中显示一个相关产品。

您可以通过在"列"和"每页帖子数"框中输入新数字或单击箭头按钮来展示更多产品。

如果您显示多个产品,则可以使用"订购方式"框更改这些项目的排列方式。例如,您可以先展示评分最高的商品,因为客户似乎最喜欢这些商品。

您还可以打开"订单"下拉菜单,然后选择是按升序 (ASC) 还是降序 (DESC) 顺序显示相关项目。

添加星级

为每件商品显示星级有助于让购物者放心,您的商品质量很好。也就是说,您可能希望将星级块拖到您的设计上。

为了获得最佳效果,我们建议在屏幕顶部显示星级,以便客户轻松发现。这可以帮助购物者更快地做出购买决定,因为他们可以立即看到其他购物者是否推荐产品。

通过显示产品库存来使用 FOMO

FOMO或"害怕错过"鼓励购物者立即采取行动。

如果您销售限量版商品或经常有少量库存,则可能需要显示剩余产品数量。这可以说服购物者立即购买,而不是等待并冒着产品售罄的风险。

要显示此信息,请将"产品库存"块拖到您的设计上。

默认情况下,该块显示剩余商品数量,后跟"有货"。您可能希望将自己的消息添加到此默认文本中。

为此,只需在左侧菜单中的小文本编辑器中输入即可。如果您确实添加了一些文本,请注意不要编辑"[sp_product_stock]"标记,因为这允许 SeedProd 显示剩余的项目总数。

将特色图片替换为产品

特色产品图片可让购物者查看他们在网上商店购买的商品。

但是,有时您可能希望将单个特色图片替换为产品厨房。例如,您可以从不同角度展示同一商品。一些商店甚至使用交互式360度图像,以便购物者可以更详细地探索产品。

如果您已将图库添加到WooCommerce产品中,那么将默认的产品特色图像块替换为图库块是有意义的。

为此,只需将鼠标悬停在特色产品块上,然后在垃圾桶图标出现时单击它。

然后,您可以在左侧菜单中找到产品库图像块并将其拖到页面布局上。

我们建议将此块添加到页面顶部,以便访问者可以立即看到他们购买的商品。

购物者可以通过将鼠标悬停在产品库上来放大图像。

默认情况下,缩放图标显示在当前特色图片的右上角,但您可以使用"位置顶部"和"位置右侧"滑块进行更改。

您还可以使用"字体大小"滑块放大或缩小放大镜图标,或更改其图标颜色和背景颜色。

您还可以使用"图像边框"和"缩略图"边框设置在不同图像周围添加边框。

使用共享按钮在社交媒体上创造嗡嗡声

如果购物者在社交媒体上分享您的产品,那么它可以吸引更多人访问您的在线商店。考虑到这一点,最好将社交分享按钮添加到您的产品页面。

SeedProd有一个支持Facebook,Twitter,LinkedIn和Pinterest的社交共享块。只需将此块拖放到您的页面上,它就会自动添加Facebook和Twitter共享按钮。

要添加更多社交网络,只需单击"添加新共享"按钮。

然后,您可以从下拉菜单中选择一个社交媒体网站。

添加要使用的所有网络后,您可以使用"大小"下拉菜单更改共享按钮的大小。

更大的社交分享按钮会更突出,尽管它可能会分散页面的其他内容的注意力,包括添加到购物车号召性用语。

显示客户评价和业务评论

WooCommerce允许客户查看您的个人产品,但您可能还希望显示客户推荐。这些可能是您最佳评论中的引用、关于您出色客户服务的评论或您想要突出显示的任何其他内容。

SeedProd的推荐块允许您创建旋转推荐,这是在少量空间内显示大量信息的好方法。

突出显示WooCommerce中最近查看的产品

"最近查看"部分鼓励客户重新访问他们最近看到但未添加到购物车的产品。这有助于客户比较产品并找到适合他们的商品。这也让他们有机会改变主意,购买他们最近访问过但没有添加到购物篮中的产品。

您可能希望将SeedProd的"最近产品"块添加到您的设计中。

添加块后,您可以使用左侧菜单中的设置更改列数。

如果您想显示许多不同的产品,那么您可以通过激活"分页"切换来添加分页。

如果您确实启用了"分页",那么您将可以访问一些额外的设置。

首先,您可以通过启用"显示项目计数"切换,在"最近使用的产品"块的顶部显示结果总数。

您可能还希望启用"显示顺序"滑块,因为这允许访问者对最近的产品进行排序。

如下图所示,这会向该区域添加"默认排序"下拉列表。

展示您最受欢迎的WooCommerce产品

您可能希望在产品页面上显示最畅销或评分最高的产品。由于这些商品已经表现良好,因此向更多人展示它们是获得更多销售的简单方法。

另一种选择是显示当前正在销售的产品。这可以激励购物者现在购买这些商品,以获得最优惠的价格。

SeedProd有几个块可以自动获取这些产品。如果您想展示最畅销的产品,请将"最畅销产品"块添加到您的设计中。

如果要显示星级最高的产品,则可以将"评分最高的产品"块拖到页面上。

最后,还有一个销售产品块,显示当前正在销售的所有项目。

无论您添加什么块,请单击以选择它,然后查看左侧菜单中的设置。所有这些设置都很简单,因此值得浏览一下它们,看看您可以创建哪些不同的效果。

如何发布您的自定义WooCommerce产品页面

当您对产品页面的外观感到满意时,就该保存更改了。只需继续并单击"保存"旁边的下拉箭头,然后选择"发布"选项。

在您激活整个自定义WooCommerce主题之前,自定义产品页面不会出现在您的在线商店中。这使您有机会查看主题套件中的其他设计,然后使用 SeedProd 的拖放构建器进行任何更改。

例如,您通常需要编辑页眉和页脚模板以显示您自己的导航菜单、商店的自定义徽标和其他内容。

要编辑任何其他模板,请转到 种子生产 >> 主题生成器。然后,将鼠标悬停在要自定义的模板上。

然后,您可以在出现"编辑设计"链接时单击它。

现在,只需通过添加更多块来更改设计,然后使用左侧菜单中的设置对其进行自定义。

只需继续重复这些步骤,直到您对所有模板的设置方式感到满意。

当您准备好使自定义WooCommerce主题上线时,请转到SeedProd >> Theme Builder。然后,您可以单击"启用种子生产主题"切换,使其显示"是"。

现在,如果您访问您的在线商店,您将看到自定义的WooCommerce产品页面。

相关推荐
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255022 小时前
前端常用算法集合
前端·算法
真的很上进2 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2343 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1233 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~4 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语4 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg4 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全