零科技 · 軟體、電腦技巧與網站架設的實用筆記

[WordPress] 如何在 WooCommerce 的商品描述使用 Gutenberg 來編輯內容

網站架設›WordPress閱讀約 1 分鐘
這篇文章撰寫於 5 年前。軟體介面與設定步驟可能已經改變,請搭配官方文件確認。

自從 WordPress 5.0 之後官方就已經把預設的文章編輯器改成新的編輯器~—~Gutenberg。這個改動也讓很多人漸漸習慣新的編輯器撰寫文章的方式,區塊的編輯很直覺確實可以讓人在撰寫文章有很好的體驗,再加上近期的版本官方都有一直改善使用上的問題,所以還沒使用 Gutenberg 編輯的讀者們都可以嘗試去使用看看。

但有使用過 WooCommerce 上架新產品的人就知道, WooCommerce 目前編輯商品描述是無法使用 Gutenberg 來編輯的,還是只能依照舊版的 編輯器來編輯。對於已經習慣 Gutenberg 的我來說是一件很痛苦的事,突然很簡單的排版都變得很複雜。為了要讓 Gutenberg 在 WooCommerce 中使用,這邊來分享一下如何做到這件事情吧!

但有使用過 WooCommerce 上架新產品的人就知道, WooCommerce 目前編輯商品描述是無法使用 Gutenberg 來編輯的,還是只能依照舊…

教學開始

整體步驟並不複雜,只需要使用 WordPress 「頁面」來撰寫商品描述,再利用 PHP Include 讓頁面嵌入到商品的描述頁中,就可以達到想要的效果囉。

首先,先在 WordPress 頁面中新增頁面,在新增的頁面中去編輯你想要呈現的商品描述。

首先,先在 WordPress 頁面中新增頁面,在新增的頁面中去編輯你想要呈現的商品描述
[WordPress] 如何在 WooCommerce 的商品描述使用 Gutenberg 來編輯內容(圖 3)

再利用之前介紹的 PHP include~—~「利用PHP include讓頁面模組化 重複內容不用再一個一個改」。使用短網址以及該文章的 ID 貼在你的商品中的描述裡面。

再利用之前介紹的 PHP include~—~「利用PHP include讓頁面模組化 重複內容不用再一個一個改」

直接預覽就可以看到剛剛在頁面編輯的商品描述嵌入到商品裡面囉。

直接預覽就可以看到剛剛在頁面編輯的商品描述嵌入到商品裡面囉
[WordPress] 如何在 WooCommerce 的商品描述使用 Gutenberg 來編輯內容(圖 6)
廣告