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 页面

  1. 在当前主题目录下创建 WooCommerce 目录
  2. 在 WooCommerce 目录下再创建一个 myaccount 目录
  3. 把 plugins/WooCommerce/templates/myaccount/my-account.php 文件拷贝到 yourtheme/WooCommerce/myaccount/目录下,对应关系如下
    plugins/WooCommerce/templates/myaccount/my-account.php
    

    =>

    yourtheme/WooCommerce/myaccount/my-account.php
  4. 这时主题下的 my-account.php 拥有更高的优先级,会覆盖插件目录下的 my-account.php,修改这个文件即可。

例二:覆盖所有模版

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

plugins/WooCommerce/templates/

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

yourtheme/WooCommerce/

WooCommerce 模版目录结构

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