不囉嗦，先上外掛連結：
https://github.com/it-monk-team/-woo-refund-policy
外掛功能：在 WooCommerce 結帳頁面置入 退換貨政策 的說明。
這個禮拜去參加了 WordPress 的台北小聚。一方面是實在很想知道這領域小聚都都在做什麼，一方面尋找發文的靈感。唉，實在太多文章寫到一半失去動力或寫作的靈感…
後面的快速分享時段，有位 桓桓鄉寇 大大分享了他最近的作品 – WooCommerce 結帳頁面嵌入退換貨政策。
創作的動機是因為部分金流商規範客戶必須要在結帳頁面顯示退換貨政策。
大大是直接用新增一個頁面的方式來完成這個功能，然後把把頁面放到的標題和內容當成退換貨政策的內容。
比較可惜的是功能要生效，必須要把 code 貼到主題編輯器的 functions.php。這對沒有 coding 能力的朋友來說用起來會怕怕的，減少便利性。
因此，我這邊就站在這位巨人的肩膀上，秉持開源服務的精神，把這個功能改成外掛並附上說明讓大家享用～
<?php
/*
Plugin Name: woo-refund-policy
Author: huanyichuang, IT-MONK
Description: woocommerce "退貨政策" 的自訂欄位，在 WooCommerce 結帳頁顯示內容。
*/
// 註冊設定欄位
add_action( 'admin_init', 'woo_refund_policy_option_register' );
function woo_refund_policy_option_register(){
register_setting( 'woo_refund_policy', 'woo_refund_policy_title' );
register_setting( 'woo_refund_policy', 'woo_refund_policy' );
}
// 在 wordpress 的管理者目錄新增選項
add_action( 'admin_menu', 'woo_refund_policy_settings_page' );
function woo_refund_policy_settings_page() {
$title = esc_html__( 'woocommerce 退貨政策', "woo-refund-policy" );
add_menu_page( $title , $title, 'edit_posts', "woo-refund-policy", 'woo_refund_policy_ui' );
}
// 介面設計
function woo_refund_policy_ui() {
$woo_refund_policy_txt = get_option('woo_refund_policy');
$woo_refund_policy_title = get_option('woo_refund_policy_title');
?>
<div class="wrap">
<h1><?php echo _e( 'woocommerce 退貨政策設定', "woo-refund-policy" ); ?></h1>
<form method="post" action="options.php">
<?php settings_fields( 'woo_refund_policy' ); ?>
<table class="form-table" role="presentation">
<tbody>
<tr>
<th scope="row"><label for="blogname"><?php echo _e( 'woocommerce 退貨政策標題', "woo-refund-policy" ); ?></label></th>
<td>
<input name="woo_refund_policy_title" type="text" value="<?php echo $woo_refund_policy_title;?>" class="regular-text">
</td>
</tr>
<tr>
<th scope="row"><label for="blogname"><?php echo _e( 'woocommerce 退貨政策', "woo-refund-policy" ); ?></label></th>
<td>
<?php
wp_editor (
$woo_refund_policy_txt ,
'woo_refund_policy',
array ( "media_buttons" => true, 'textarea_name' => 'woo_refund_policy','textarea_rows' => 3 )
);
?>
</td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}
// 結帳頁面新增 policy 欄位
add_action( 'woocommerce_review_order_before_submit', 'hyc_refund', 99 );
if ( ! function_exists( 'hyc_refund' ) ) {
function hyc_refund() {
$refund_policy_txt = get_option('woo_refund_policy');
$woo_refund_policy_title = get_option('woo_refund_policy_title');
if ( $refund_policy_txt ) {
?>
<div id="refund" style="overflow-y: scroll; max-height: 10em; margin-bottom: 2em; background: #fff; padding: 15px;">
<?php
if($woo_refund_policy_title):
?>
<h3>
<?php echo $woo_refund_policy_title; ?>
</h3>
<?php
endif;
?>
<?php
//比照文章內容使用 filter ，讓 shortcode 也能正確顯示
echo apply_filters( 'the_content', $refund_policy_txt );
?>
</div>
<?php } }
}
// 如果沒有安裝 WooCommerce 跳出提示
add_action( 'admin_notices', 'pls_install_woocommerce' );
function pls_install_woocommerce() {
if(!class_exists( 'WooCommerce' )):
?>
<div class="notice notice-warning is-dismissible">
<p><?php _e( '兄弟 (姊妹)，<strong>woo-refund-policy</strong> 外掛要先安裝 WooCommerce! 才會生效', "woo-refund-policy" ); ?></p>
</div>
<?php
endif;
}關於 WP hook 這邊就不再贅述。可參考這篇：WordPress的Hook機制與原理
這邊用到了幾個功能，基本上要完成一個後台的設定頁面需要完成以下三個動作：
1. register_setting: 這是註冊這個選項的群組和細項，註冊之後，在 /wp-admin/options.php 底下產生可以編輯的選項，同時也能讓 get_option 這個功能取得裡面的值。
2. add_menu_page 或是 add_options_page: 兩者比較大的分別是 add_options_page 會出現在主選單 設定 欄位變成一個子選項。
稍微說明一下參數的意義好了。
$page_title : 網頁的 title ，出現在瀏覽器的標籤
$menu_tilte : 後台選單顯示的名稱
$capability : 權限，這個範例設置為 “edit_posts”，具備文章編輯能力的使用者。
$menu_slug : 目錄的代稱，跟後台網址和 hook 有關。
$function : 到這一頁要執行的功能，通常是拿來設置介面，或是轉跳到別的連結。
$icon_url : 小圖示。
$position : 優先性，越高顯示越前面。
3. 設置介面：這邊是我覺得蠻重要，且容易踩坑的部分。在完成 add_menu_page 之後，必須執行 $function 帶的功能。這個案例我帶的 function name 是 woo_refund_policy_ui，所以要增加一個 woo_refund_policy_ui 來設計輸入的介面。
介面表單的 action 路徑必須設置為 options.php。
此外在表單內要執行 settings_fields 功能。裡面的參數要帶之前在 register_setting 設置的群組。它會自動產出 option_page 和 action 兩個 hidden input。
到此，已經完成了可以正確存取設定的表單。
接下來就是在 woocommerce_review_order_before_submit 這個 hook 中取用我們設定的資料，這邊就是直接參考抄襲桓桓鄉寇大大的內容，把原本抓頁面標題和內文的部分改成對應的標題和內文。
另外，這邊還加了一點小功能。在沒有安裝 WooCommerce 時跳出提示。
// 如果沒有安裝 WooCommerce 跳出提示
add_action( 'admin_notices', 'pls_install_woocommerce' );
function pls_install_woocommerce() {
if(!class_exists( 'WooCommerce' )):
?>
<div class="notice notice-warning is-dismissible">
<p><?php _e( '兄弟 (姊妹)，<strong>woo-refund-policy</strong> 外掛要先安裝 WooCommerce! 才會生效', "woo-refund-policy" ); ?></p>
</div>
<?php
endif;
}
在功能內用 class_exists( ‘WooCommerce’ ) 判斷有沒有安裝 WooCommerce ，來決定是否跳出提示。
後記
其實我已經很久沒用 WooCommerce ，之前用大概是 5年前的事。我當時還為了不想使用 WooCommerce 自己寫了一個購物車外掛，主要是因為覺得它當時的結帳流程實在是太長、頁面設定很複雜、結帳表單很外國…。
我當時用原生的 php 做了一個訂單管理系統，然後在 WP 做商品管理和金流，這樣的結果就是每次客戶有新的金流要串，我就要去閱讀一次該金流商的 API，關於訂單通知的寄送和金流回傳的準確度也償還了不少技術債。
唯一的好處是自己對系統很熟悉，設定一些奇耙的優惠時 ( 例如有的客戶的優惠活動：滿 10 個打 9 折，如果包含 A 商品，滿 5 個折價 30 ，10個 折價 65… 這種連理解客戶在供三洨都有困難的需求 ) 可以不用一直去翻技術文件，不過也只有我自己會設定 XD。
這次小聚，發現大家很多問題都圍繞在架設購物車。重裝後，它的體驗已經比以前好上太多，未來應該要多花點時間研究研究。
