Products
GG网络技术分享 2025-03-18 16:13 0
很多外贸企业主在使用WordPress和woocommerce的来搭建营销型外贸网站的时候，
往往会有时候想要定制一个高端的产品详情页样式。
如果使用一般的WordPress主题，你是没有办法定制自己的产品详情页。
虽然woocommerce默认的产品详情页已经能满足99%的国外买家需求了，
但是通过divi主题来定制过的产品详情页，能够让你的产品有多种方式呈现给网站访客，
优质的产品landing page能够大幅度地提升WordPress网站转化率。
在这篇文章中，
WP花园将会深入讲解如何使用divi主题来为你的woocommerce商城定制产品详情页的方法。
拿好小本子，
开始学习吧！
如果你的WordPress网站安装好了woocommerce插件之后，
你会发现在WordPress的后台会出现一个product/产品 的栏目，
这时候你就可以在上面发布产品信息了。
WP花园里有一篇文章，
介绍了如何在woocommerce上发布一个简单的产品的教程，
具体可以参照一下。
一旦你填充完毕所有产品信息之后，
就能看到一个标准的产品详情页了。
举个例子，
我们看一下使用flatsome主题的产品详情页默认的样式：
如果使用divi主题，
除了可以拥有类似这种默认的产品详情页样式以外，
还能通过divi的可视化模块拖拽设计的方法，
自定义一个精美的产品详情页：
设计一个精美的产品详情页需要花费大量的精力和时间，
所以我们只为预算充足的客户提供产品详情页的定制服务，
一般基础建站套餐客户使用默认的woocommerce产品详情页也能满足需求。
使用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的产品详情页吧！
如果你的WordPress网站安装并且激活了woocommerce插件，
那么在divi的可视化编辑器的模块选项中，
会多出一些woocommerce相关的模块。
这些模块都非常重要，我们在这里罗列出常用的woocommerce产品模块：
对于divi主题的初学者来说，
如果直接使用divi可视化拖拽模块来设计woocommerce产品的详情页，
效果将会非常糟糕。
毕竟很多初学者对divi可视化模块不熟悉，做出来的页面效果也不是很理想。
但是没关系！
divi主题有许多预先设计好的内置模板，方便初学者一键导入，立刻做出好看的页面！
点击图片可以直接查看预览demo页面。
使用WordPress的divi主题真的能够让自己网站大幅度提升美感！
我们WP花园也一直使用WordPress的正版主题和插件为客户提供优质的WordPress建站服务。
所以如果你想在跨境电商领域战胜市场，
有一个精美的产品详情页着陆页landing page是非常不错的选择！
divi有很多现成的产品详情页模板可以让大家使用，
初级设计师可以多学习和使用这些模板。
高级设计师也能通过自己自定义拖拽divi的可视化模块，
原创产品详情页的样式。
关于DIVI主题的使用教程，如果你有更多问题，欢迎和我们联系！
你有没有不小心误点发布按钮而发表一篇文章吗? 如果你使用了社交类插件，误发布的同时会共享到社交网络上，甚至可能被搜索引擎收录，那么如何为WordPress文章发布按钮添加确认对话框？接下来一段代码将有效防止误操作的发生。
将下面的代码添加到您的当前主题的 functions.php 文件:
// This is the confirmation message that will appear.
$c_message = \'Are you SURE you want to publish this post?\';
function confirm_publish(){
global $c_message;
echo \'<script type=\"text/javascript\"><!--
var publish = document.getElementById(\"publish\");
if (publish !== null) publish.onclick = function(){
return confirm(\"\'.$c_message.\'\");
};
// --></script>\';
}
add_action(\'admin_footer\', \'confirm_publish\');
Demand feedback
