如何修改 WooCommerce 插件的模版

优质
小牛编辑
131浏览
2023-12-01

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官方文档中列出了模版的目录结构,请移步查看。