WordPress的Divi主题如何自定义设计woocommerce产品详情页布局?

word-image-43-e1586315568324

很多外贸企业主在使用WordPress和woocommerce的来搭建营销型外贸网站的时候,

往往会有时候想要定制一个高端的产品详情页样式。

如果使用一般的WordPress主题,你是没有办法定制自己的产品详情页。

虽然woocommerce默认的产品详情页已经能满足99%的国外买家需求了,

但是通过divi主题来定制过的产品详情页,能够让你的产品有多种方式呈现给网站访客,

优质的产品landing page能够大幅度地提升WordPress网站转化率。

在这篇文章中,将会深入讲解如何使用divi主题来为你的woocommerce商城定制产品详情页的方法。

拿好小本子,开始学习吧!

什么是woocommerce产品详情页

如果你的WordPress网站安装好了woocommerce插件之后,

你会发现在WordPress的后台会出现一个product/产品 的栏目,

这时候你就可以在上面发布产品信息了。

一旦你填充完毕所有产品信息之后,

就能看到一个标准的产品详情页了。

举个例子,

我们看一下使用flatsome主题的产品详情页默认的样式:

acs-779x1024

如果使用divi主题,

除了可以拥有类似这种默认的产品详情页样式以外,

还能通过divi的可视化模块拖拽设计的方法,

自定义一个精美的产品详情页:

word-image-29-1024x718

设计一个精美的产品详情页需要花费大量的精力和时间,

所以我们只为预算充足的客户提供产品详情页的定制服务,

一般基础建站套餐客户使用默认的woocommerce产品详情页也能满足需求。

如何使用DIVI自定义产品详情页

使用divi主题的可视化模块来设计产品的详情页真的很方便。视频播放器00:0000:20

在WordPress的divi主题后台中,

如果你安装好woocommerce商城拓展插件后,

在后台找到products/产品栏目,

就能正常地添加和上传产品资料了。

word-image-30-1024x639

进入产品编辑页面,

你也能看到一个只有divi主题特有的可视化编辑器模块的按钮:

word-image-31-1024x784

先确保你按照要求填写完产品的基本信息后,再进入divi的可视化编辑器。

一个woocommerce产品的基本信息包括:

  • 产品标题
  • 产品描述
  • 产品短描述
  • 产品价格
  • 产品封面
  • 产品画册
  • 产品分类
  • 产品标签

尽量填写完这些信息,

如果缺少某些信息,

请联系客户或者主管咨询,

让他们补充。

填写好详细的产品信息,

有利于之后woocommerce的产品页面在谷歌上获得较高的谷歌SEO排名。

好的,点击那个紫色的按钮use the divi builder/使用divi可视化编辑器 之后,

你会看到这个页面:

word-image-32-1024x632

这个界面是divi可视化编辑器的‘后台’样式,

很多人看的一头雾水。

没有关系,

我们直接点击Build On The Front End 按钮,开启divi编辑器的前台页面,

你就可以看到熟悉的divi前台可视化编辑页面了:

word-image-33-1024x508

注意看右边有一个侧边栏,

我们不是很喜欢。

因为如果要自定义产品详情页的话,

往往是全宽full width会比较好,

所以我们点击左上角的edit product编辑产品 按钮:

word-image-34-1024x732

进入后台编辑器,

然后找到右边的divi page settings 页面设置栏目,

在page layout页面布局中选择Fullwidth 全宽,

点击保存页面。

word-image-35-1024x594

这时候你就会发现产品详情页的侧边栏不见啦!


word-image-36-1024x499

然后开始添加和拖拽divi的相关模块,

自定义woocommerce的产品详情页吧!

woocommerce产品专属DIVI模块

如果你的WordPress网站安装并且激活了woocommerce插件,视频播放器

那么在divi的可视化编辑器的模块选项中,

会多出一些woocommerce相关的模块。

word-image-37-1024x773

这些模块都非常重要,我们在这里罗列出常用的woocommerce产品模块:

  • Woo add to cart 添加到购物车按钮
  • Woo additional info 产品附加信息
  • Woo breadcrumb 产品导航路径
  • Woo cart notice 产品添加到购物车后的提示框
  • Woo description 产品长描述
  • Woo gallery 产品多图画廊
  • Woo images 产品封面图
  • Woo meta 产品附加信息(分类、标签)
  • Woo price 产品价格
  • Woo rating 产品评分(有评分了才会显示)
  • Woo related product 相关产品列表
  • Woo reviews 产品评论
  • Woo stock 产品库存量
  • Woo tabs 产品选项卡栏目
  • Woo title 产品标题
  • Woo upsell 推荐产品列表

现成divi产品详情页模板

对于divi主题的初学者来说,

如果直接使用divi可视化拖拽模块来设计woocommerce产品的详情页,

效果将会非常糟糕。

毕竟很多初学者对divi可视化模块不熟悉,做出来的页面效果也不是很理想。

但是没关系!

word-image-38-1024x629

divi主题有许多预先设计好的内置模板,方便初学者一键导入,立刻做出好看的页面!

点击图片可以直接查看预览demo页面。

旅行包产品详情页模板

word-image-39-1024x701

家具类网站产品详情页

word-image-40-1024x797

精油类产品详情页模板

word-image-41-1024x676

植物盆栽类产品详情页

word-image-42-1024x682

灯具类产品详情页

word-image-43-1024x738

服装类衣服产品详情页

word-image-44-1024x702

食品类产品详情页

word-image-45-1024x736

手表类产品详情页

word-image-46-1024x786

咖啡类产品详情页

word-image-47-1024x811

WP花园结语

使用WordPress的divi主题真的能够让自己网站大幅度提升美感!

我们WP花园也一直使用WordPress的正版主题和插件为客户提供优质的WordPress建站服务。

所以如果你想在跨境电商领域战胜市场,

有一个精美的产品详情页着陆页landing page是非常不错的选择!

divi有很多现成的产品详情页模板可以让大家使用,

初级设计师可以多学习和使用这些模板。

高级设计师也能通过自己自定义拖拽divi的可视化模块,

原创产品详情页的样式。

本文由 8源码吧 作者:liaolong 发表,其版权均为 8源码吧 所有,文章内容系作者个人观点,不代表 8源码吧 对观点赞同或支持。如需转载,请注明文章来源。

发表评论