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 官方文檔中列出了模版的目錄結構,請移步查看。