WooCommerce 自訂商品頁籤 教學 ,加入更多商品詳細資訊

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – WooCommerce 自訂商品頁籤 主要目的是要讓網站商品頁可以有更清楚的資訊分類,在原本的商品頁籤設定中,只能顯示像商品長寬高此類的內容,如果將所有資訊都集中在商品描述欄位中,過多的內容文字會讓顧客必須不斷上下滾動畫面,帶來不好的使用者體驗。而客製化商品頁籤讓所有商品相關內容都集中在中一區域,只要透過頁籤的切換就能查看下一組商品相關介紹,無論在桌機版或行動版,對於顧客瀏覽操作而言是比較好的做法。

本篇教學中將為說明如何安裝 Custom Product Tabs for WooCommerce 外掛,設定全域商品頁籤以及在單一商品中自訂專屬頁籤等,外掛操作相當簡單,希望對大家有所幫助。讓我們開始學習吧!

Custom Product Tabs for WooCommerce 下載點
https://tw.wordpress.org/plugins/yikes-inc-easy-custom-woocommerce-product-tabs/
Custom Product Tabs for WooCommerce WordPress 外掛技術支援論壇
https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/

WooCommerce Custom Products Tabs 外掛安裝與新增頁籤

第一步:進入安裝外掛頁面,搜尋 Custom Products Tabs ,依序點選安裝與啟用。

WooCommerce 自訂商品頁籤

第二步:安裝完成後可以在工具欄中設定的下方找到自訂商品頁籤的項目,點擊進入設定畫面。

WooCommerce 自訂商品頁籤

第三步:選擇新增頁籤,此時建立的頁籤是屬於全域屬性,也就是在每一個商品都能夠新增。

WooCommerce 自訂商品頁籤

第四步:自訂頁籤標題與內容之後,點選儲存頁籤。

WooCommerce 自訂商品頁籤

第五步:到商品中選擇想要新增頁籤的商品點選編輯。

WooCommerce 自訂商品頁籤

第六步:在商品編輯頁面中找到商品資料區塊,在選項中點擊自訂頁籤,接者點選新增已存頁籤。

WooCommerce 自訂商品頁籤

第七步:選擇剛剛建立的新頁籤商品運送,點選加號按鈕。

WooCommerce 自訂商品頁籤

第八步:此時頁籤就會被加入到自訂頁籤中,勾選 Override Saved Tab 可以編輯此頁籤內容,請注意,如果在此修改頁籤文字,則只會在此商品中生效,部會影響到全域頁籤的內容。完成後記得更新商品。

WooCommerce 自訂商品頁籤

第九步商回到網站前台,在商品描述區塊就會多出剛剛設定的商品運送頁籤。

WooCommerce 自訂商品頁籤

單一商品編輯加入自訂頁籤操作方法

第一步:在自訂頁籤中點選新增頁籤按鈕。

WooCommerce 自訂商品頁籤

第二步:填入頁籤標題與內容,點選 Save Tabs 。

WooCommerce 自訂商品頁籤

第三步:如果要改變頁籤顯示順序,在 Move tab order 點選上下箭頭,就能改變頁籤顯示位置。

WooCommerce 自訂商品頁籤

第四步:下圖是完成後的顯示畫面,自訂頁籤上下順序已對換。

WooCommerce 自訂商品頁籤

結語:

自訂頁籤可以根據不同種類的商品特性,加入更多關於此商品的說明,在 WooCommerce 商品說明頁中常常都不會顯示運送相關的內容,此時就能利用自訂頁籤功能加入不同種類商品的運送條件,而不是只在結帳頁面顯示,提供顧客完整的資訊,才能增加下單機會。

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

站內相關文章:

網站資訊文章推薦

內容行銷到底要多久才能見效呢?撰寫內文時一定要遵循的潛規則!
重複內容 會影響SEO?如何正確把內容分享到社群平台!
購物網站架設 – 電子商務網站建置的細節與項目

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

返回頂端