如何修改WooCommerce插件的模版

2013 年 3 月 6 日

WooCommerce是一款非常灵活的电子商务WordPress插件，喜欢它的原因很多，除了漂亮的界面、人性化的后台、很少的数据表等等，还有一个重要的原因是修改功能比较方便，比如修改WooCommerce的默认模版。

WooCommerce提供两种修改模版的方法，一个是通过钩子函数，这也是WordPress中最常见的修改方式；另一个方法是“覆盖”模版。

覆盖这种方式在WordPress插件中也比较常见，中心思想是如果用户在主题目录下放置了一个和某插件模版文件名称相同的文件，某插件就会先调用这个文件。

WooCommerce也支持这种方式，下面具体介绍。

WooCommerce的默认模版文件位于插件的templates目录（/wp-content/plugins/woocommerce/templates）下，打开模版文件，可以发现里面有很多hooks（eg. do_action('woocommerce_before_main_content'); ），所以修改模版应该遵循以下原则：

可以用hooks完成的修改，尽量使用hooks
针对某个文件有大量的修改，或者仅使用hooks无法完成修改，则使用模版覆盖的方式

通过这两种方式所做的修改都不会在升级时丢失。

例一：修改My Account页面

在当前主题目录下创建woocommerce目录
在woocommerce目录下再创建一个myaccount目录
把plugins/woocommerce/templates/myaccount/my-account.php文件拷贝到yourtheme/woocommerce/myaccount/目录下，对应关系如下
```
plugins/woocommerce/templates/myaccount/my-account.php
```
=>
```
yourtheme/woocommerce/myaccount/my-account.php
```
这时主题下的my-account.php拥有更高的优先级，会覆盖插件目录下的my-account.php，修改这个文件即可。

例二：覆盖所有模版

覆盖所有模版，需要把所有模版文件拷贝到主题中，并保留目录结构。也就是要把

plugins/woocommerce/templates/

这个目录下所有文件复制到

yourtheme/woocommerce/

WooCommerce模版目录结构

WooCommerce官方文档中列出了模版的目录结构，请移步查看。

19条评论

xxxky说道：
2015 年 10 月 7 日 22:19
我使用的是自己的主题,在主题根目录下woocommerce.php文件中按照这个要求插入
,商城首页和查看单个商品都有商品显示(虽然没有样式,有点乱),
但是添加购物车后, 购物车页面什么也没有显示,我的账户页面没有显示,没有头绪…
第一次使用这个插件,请指教,谢谢!
lionera说道：
2014 年 7 月 3 日 23:31
我也请教下solagirl，就是我的网站启用了多说评论，但是在woocommerce中评分功能没有了，所以我想单独调用评分功能这个需要怎么做啊
1. Sola说道：
  2014 年 7 月 4 日 13:10
  抱歉很久不用多说了，记得多说会把评论存到自己的服务器上再同步回来，修改wordpress评论框时和woocommerce很可能有冲突，最好不要和woocommerce一起使用，如果你只是想要个分享功能，别的插件也可以实现吧。
  1. lionera说道：
    2014 年 7 月 4 日 18:41
    多谢回复，其实用多说一个是分享问题，还有一个是社会化登录，能给推荐几个比较好点儿的插件吗，一般的社会化登录做的都不是太好，水脉烟香的那个得用灯鹭还是不太方便
    1. Sola说道：
      2014 年 7 月 4 日 19:30
      不好意思，这方面我了解不多。如果你比较看重多说的社会化登陆，那不如去问问作者怎么在产品页禁用多说。
someone说道：
2014 年 5 月 18 日 21:21
版主啊我在修改woocommerce的时候文件里没有header.php文件它却自己调用了一个头文件
版主知道他调用的哪里的头文件么
1. Sola说道：
  2014 年 5 月 19 日 14:06
  woocommerce没有自己的header.php，那是wordpress自带的，作为不写header.php主题的fallback文件，路径是wp-includes/theme-compat/header.php
  这个文件会在未来版本中删除，所以建议给主题写上header.php
wuyangxu说道：
2014 年 5 月 12 日 17:02
Solagirl 再次回头看了你的这个文章。。。主要讲解的还是覆盖希望solagirl有时间能讲解一下钩子的自定义方法
1. Sola说道：
  2014 年 5 月 13 日 12:58
  钩子的用法主要靠理解，如果你明白add_action就是让一个函数在do_action的位置执行，那只要你去读代码里的do_action，就知道怎么添加自定义的钩子函数了。
  1. wuyangxu说道：
    2014 年 5 月 18 日 21:18
    谢版主经过这几天的琢磨已经开始入门了
wuyangxu说道：
2014 年 4 月 8 日 01:09
关注您的博客很久了也解决了我的很多疑问谢谢您的分享我有一个疑问一直困扰这我
我用的方法比较简单直接在主题目录下创建woocommerce.php文件在里面写入商品页的模版基本功能可以实现但是用hools却不能调用商品单页一直搞不清为什么
1. Sola说道：
  2014 年 4 月 8 日 11:27
  请问用hooks调用商品单页是什么意思，我不太明白。
redir说道：
2013 年 11 月 20 日 20:32
看了下，貌似调用了mytheme/index.php文件
redir说道：
2013 年 11 月 20 日 19:40
请教下solagirl，我在现有的网站上安装了WooCommerce，样式都没有加载，我在我的theme目录下新建了woocommerce目录，然后把plugins/woocommerce/templates/目录的文件都拷过来了，发现加载的还是theme目录下的文件。求指教。
1. Sola说道：
  2013 年 11 月 21 日 11:26
  你按照这个顺序检查下
  1. WooCommerce -> Settings -> General中的 Enable WooCommerce CSS是否开启
  2. 主题的header.php中有没有wp_head()，footer.php中有没有wp_footer()
  3. 主题是否支持WooCommerce，如果不支持，会有一条提示。为了排除是否是主题的问题，请切换到默认主题看看样式能否加载。
  1. visvis说道：
    2014 年 10 月 13 日 16:54
    姐，我的也是这个问题，样式加载不出来，但是切换到默认的主题，样式就都可以加载，主题应该支持了应为没有提示，我查看了页面的代码，也看见确实加载的woocommerce的CSS。但是就没没有样式，非常奇怪！！还有什么原因会导致样式加载不出来么？
    1. Sola说道：
      2014 年 10 月 13 日 20:37
      样式不正确，是woocommerce相关的样式不对，还是跟用firebug禁用css一样的效果？
      加载的woocommerce css是位于插件目录还是主题目录？
      css文件内容是否正确？
      有地址吗，这问题并不常见，最好能看实际站点。
    2. visvis说道：
      2014 年 10 月 14 日 11:12
      准备让网站上线看看吧，自己搞不定，默认的样式加载不出来，我切换2012的主题就可以看见样式，排版也是正常。网站上线了我要是还搞不定我再请教姐，辛苦了。姐姐老好人！！
    3. Sola说道：
      2014 年 10 月 14 日 11:43
      既然默认主题可以，那就是你那个主题有问题了。有没有主题兼容性提醒只是一句话，如果主题很久没更新了，那不兼容woocommerce的可能性也很大。

评论已关闭。