woocommerce产品选项卡描述_用divi主题设计与众不同的woocommerce的产品详情页！

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

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

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

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

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

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

在这篇文章中，

WP花园将会深入讲解如何使用divi主题来为你的woocommerce商城定制产品详情页的方法。

拿好小本子，

开始学习吧！

什么是woocommerce产品详情页

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

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

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

WP花园里有一篇文章，

介绍了如何在woocommerce上发布一个简单的产品的教程，

具体可以参照一下。

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

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

举个例子，

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

如果使用divi主题，

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

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

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

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

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

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

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

使用divi主题的可视化模块来设计产品的详情页真的很方便。

在WordPress的divi主题后台中，

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

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

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

进入产品编辑页面，

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

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

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

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

尽量填写完这些信息，

如果缺少某些信息，

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

让他们补充。

填写好详细的产品信息，

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

好的，

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

你会看到这个页面：

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

很多人看的一头雾水。

没有关系，

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

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

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

我们不是很喜欢。

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

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

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

进入后台编辑器，

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

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

点击保存页面。

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

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

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

woocommerce产品专属DIVI模块

如果你的WordPress网站安装并且激活了woocommerce插件，

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

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

这些模块都非常重要，我们在这里罗列出常用的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可视化模块不熟悉，做出来的页面效果也不是很理想。

但是没关系！

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

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

旅行包产品详情页模板

家具类网站产品详情页

精油类产品详情页模板

植物盆栽类产品详情页

灯具类产品详情页

服装类衣服产品详情页

食品类产品详情页

手表类产品详情页

咖啡类产品详情页

WP花园结语

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

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

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

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

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

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

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

原创产品详情页的样式。

关于DIVI主题的使用教程，如果你有更多问题，欢迎和我们联系！