為 WooCommerce 商品說明頁啟用 Gutenberg 區塊編輯器

WordPress 的預設編輯器:Gutenberg 區塊編輯器

2018 年 11 月,WordPress 發佈了 5.0 版,Gutenberg 區塊編輯器也正式取代了「傳統編輯器;Classic Editor」,成為 WordPress 的預設編輯器。

雖然在初期可能還有一些不穩定或是功能不夠完整的狀態;但到了 2024 年、WordPress 也演進到 6.4.x 的現在,「區塊編輯器」儼然已是 WordPress 好用又簡潔的預設編輯器了,身為 WordPress 的愛用者,沒有不用不熟練區塊編輯器的理由。

而真的缺一些想要的功能或是呈現手法時,也有好幾個非常優秀的 add-on 來補強你需要的區塊功能,如:

區塊編輯器 add-on : Spectra

Spectra

由 Brainstorm Force 開發

區塊編輯器 add-on : Stackable

Stackable

由 Gambit Technologies, Inc 開發

區塊編輯器 add-on : Premium Blocks

Premium Blocks

由 Leap13 開發

區塊編輯器 add-on : Essential Blocks

Essential Blocks

由 WPDeveloper 開發

上面這四個 add-on 外掛,免費版本的功能足以應付八成以上的需求;同時也有付費版本可以提供更深入的應用,都值得推薦用用看。

而 WooCommerce 的商品頁面還在用傳統編輯器?

坦白說,WooCommerce 基於什麼樣的理由,讓商品說明頁的編輯器還在使用過去的「傳統編輯器;Classic Editor」,遲遲未採用區塊編輯器為預設編輯器,也真是讓人摸不清… 明明區塊編輯器加上 add-on,就能完成更多彩多姿的商品說明文案了。

WooCommerce 商品說明頁預設為「傳統編輯器」
使用「傳統編輯器」作為預設編輯器的 WooCommerce,有種復古味

為 WooCommerce 啟用區塊編輯器

此時,只要在 functions.php 或是透過 Code Snippets 外掛,加上一段程式碼,就能快樂地使用 Gutenberg 區塊編輯器來編輯商品說明頁了:

// Disable new WooCommerce product template (from Version 7.7.0)
function bp_reset_product_template($post_type_args) {
    if (array_key_exists('template', $post_type_args)) {
        unset($post_type_args['template']);
    }
    return $post_type_args;
}
add_filter('woocommerce_register_post_type_product', 'bp_reset_product_template');

// Enable Gutenberg editor for WooCommerce
function bp_activate_gutenberg_product($can_edit, $post_type) {
    if ($post_type == 'product') {
        $can_edit = true;
    }
    return $can_edit;
}
add_filter('use_block_editor_for_post_type', 'bp_activate_gutenberg_product', 10, 2);

// Enable taxonomy fields for woocommerce with gutenberg on
function bp_enable_taxonomy_rest($args) {
    $args['show_in_rest'] = true;
    return $args;
}
add_filter('woocommerce_taxonomy_args_product_cat', 'bp_enable_taxonomy_rest');
add_filter('woocommerce_taxonomy_args_product_tag', 'bp_enable_taxonomy_rest');;
為 WooCommerce 商品說明頁啟用「Gutenberg 區塊編輯器」
啟用「區塊編輯器」之後的 WooCommerce,當然 add-on 們也能派上用場了

參考資料

原文標題:Activate the Gutenberg Editor for WooCommerce Products

https://bloggerpilot.com/en/gutenberg-for-woocommerce/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *