在 WooCommerce 商店中，商品圖片是用戶關注的重點。如果想要打造更具吸引力和交互性的產(chǎn)品頁，對于不想使用Elementor Pro這個付費的插件，那么 Essential Addons 就是你的理想選擇。

本教程將帶你們了解如何在 WordPress 中使用 Elementor 免費版和 Essential Addons 插件，輕松實現(xiàn)商品圖片的自定義展示，包括輪播、縮略圖排列、彈出查看等高級視覺效果。

一、插件準備工作

在開始之前，請確保你已完成以下設置：

• 已安裝并激活：
  • WooCommerce 插件
  • Elementor（免費版）
  • Essential Addons for Elementor 插件
• 商店產(chǎn)品已添加，確保產(chǎn)品有圖片

二、啟用 Woo Product Images 小工具

• 進入后臺，點擊「 Essential Addons > Elements 」

• 滾動到 WooCommerce Elements 區(qū)域，啟用「 Woo Product Images 」小工具

• 點擊頁面底部的「Save Settings（保存設置）」

三、創(chuàng)建并編輯產(chǎn)品頁面模板

• 進入「Templat > Theme Builder（主題構建器）」

• 點擊「Product Single（單個產(chǎn)品）」標簽頁

• 可選擇現(xiàn)有模板進行編輯，或點擊「Add New Template（添加新模板）」

• 設置如下參數(shù)：
  • 編輯器選擇：Elementor
  • 模板類型：Product Single
  • 命名模板并點擊「Create Template」

模板創(chuàng)建完成后，點擊「Edit with Elementor」進入編輯器。

四、添加并自定義商品圖片展示

添加組件：

• 在 Elementor 中搜索「Woo Product Images」

• 將該組件拖動至頁面中合適的位置

內(nèi)容設置（Content Tab）：

可以進行以下設置：

• 調(diào)整 圖片尺寸（Image Resolution）
• 開啟/關閉 分頁（Pagination）
• 設置 縮略圖數(shù)量與位置
• 設置 圖片導航樣式、循環(huán)切換（Loop）
• 啟用 彈窗查看大圖（Image Popup）

樣式設置（Style Tab）：

進一步美化商品圖片：

• 圖片背景色、邊框樣式、間距
• 縮略圖之間的間隔
• 鼠標懸停時的樣式變化
• 彈窗樣式與尺寸設置

高級設置（Advanced Tab）：

可通過調(diào)整以下選項精細優(yōu)化圖片顯示：

• Margin（外邊距）
• Padding（內(nèi)邊距）
• 響應式設置與 Z-index 層級

五、設置顯示條件并發(fā)布模板

• 點擊右下角的「Publish（發(fā)布）」

• 在彈出的窗口中點擊「Add Condition（添加條件）」
• 設置顯示邏輯如下：
  • 第一項：Include
  • 第二項：Singular
  • 第三項：Product

• 點擊「Save & Close（保存并關閉）」

這樣模板就會自動應用于所有 WooCommerce 單個產(chǎn)品頁面。

六、查看效果

訪問任意一個商品頁面，就能看到剛剛設置的商品圖片展示效果，整體更美觀、專業(yè)，也提升了用戶瀏覽體驗。

七、Essential Addons 套餐介紹

Essential Addons 為 Elementor 用戶提供多個強大的功能套餐，可以以滿足不同需求。

以下是官方套餐價格表：

套餐	價格	時長	網(wǎng)站激活	支持與更新	小工具	擴展功能	Templatley PRO 免費訪問
Lifetime Unlimited	$199.98 $249	無限制	?	?	85+ 小工具	15 個擴展	?
Unlimited	$79.98 $99	1 年	?	?	85+ 小工具	15 個擴展	?
1 Website	$39.98 $49	1 年	?	?	85+ 小工具	15 個擴展	?

可以看到官方Unlimited套餐是79美金，價格還是相對較貴的，由于我們網(wǎng)站和Essential Addons官方合作推廣，拿到了官方優(yōu)惠價格，請點擊此鏈接咨詢和購買。

總結

使用 Essential Addons for Elementor 插件，可以在不購買 Elementor Pro 的前提下，靈活地自定義WooCommerce 商品頁面中的圖片展示區(qū)域，包括縮略圖、彈出預覽、分頁導航等功能，讓你的產(chǎn)品頁更具視覺沖擊力。想了解更多WordPress相關的教程和資訊，請關注光子波動網(wǎng)，擁有最全的WordPress教程和最活躍的WordPress交流社區(qū)。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息