WooCommerce 商品圖片設定 – 使用 Product Image Flipper 外掛自動切換圖片

WooCommerce 商品圖片設定

WooCommerce 商品圖片設定 內容綱要:

1. Product Image Flipper 外掛安裝與使用

WooCommerce 商品圖片設定 在產品圖片預設顯示中,當使用者將滑鼠游標移到圖片上時,有部分主題會出現快速瀏覽的按鈕,有些主題是不會顯示任何效果,而其中有一種是製作 WooCommerce 商店時,會讓商品項目在游標懸浮時會出現不同的商品圖片,也就是製作網頁時所謂的 “圖片翻轉” 效果,對特定商品類型而言,讓使用者在商店頁面透過簡單的滑鼠操控,就能預先得知商品更多外觀與樣式,是非常有利於使用者挑選商品的。

因此在本篇教學中,就是要介紹加入產品圖片翻轉效果的外掛 – WooCommerce Product Image Flipper ,這個外掛在使用上非常簡單,只需要安裝外掛就能完成功能建立。

WooCommerce Product Image Flipper 外掛下載:https://wordpress.org/plugins/woocommerce-product-image-flipper/

WooCommerce 外掛技術支援論壇:https://wordpress.org/support/plugin/woocommerce-product-image-flipper/

• 使用 Product Image Flipper 外掛自動切換圖片

第一步:在文章開頭提供的外掛下載連結中會顯示外掛的版本、更新時間等,要注意到如果外掛更新時間超過一年以上,那麼就不建議使用此外掛,容易與最新的 WooCommerce 程式發生衝突。在右上角的按鈕可以直接下載外掛壓縮檔,在網站中使用上傳外掛的方式安裝。

WooCommerce 商品圖片設定

第二步:也可以在安裝外掛介面直接輸入外掛名稱,如下圖所示連續點擊立即安裝與啟用。

WooCommerce 商品圖片設定

第三步:在商品圖片以及商品圖庫必須要設定不一樣的圖片,如果商品圖庫沒有設定圖片,將不會顯示產品圖片翻轉效果。

WooCommerce 商品圖片設定

第四步:外掛安裝完成就會直接呈現產品翻轉效果,如下圖所示。

WooCommerce 商品圖片設定

 

結語:

Product Image Flipper 使用時有一個注意事項,就是商品建立必須要是使用 WooCommerce 預設的頁面所建立,翻轉圖片效果才能運作,如果是使用像 Elementor 商品彙整小工具建立的頁面,由於程式碼來源不同,就無法達到產品圖片切換的效果,這一點向大家做個提醒。

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

WooCommerce 教學相關文章:

WooCommerce 加入結帳費用 – Checkout Add-Ons 附加結帳費用教學

WooCommerce 自訂運送付款條件 ,客製化結帳流程外掛教學

WooCommerce 自訂郵件樣式 – YITH Email Templates 外掛教學

WooCommerce 新增訂單狀態外掛教學,提升訂單管理效率

WooCommerce 免運費設定 – Advanced Free Shipping 外掛教學

WooCommerce 訂單匯出 外掛教學,自訂區間條件及選擇檔案格式

WooCommerce 詢價車 – YITH Request A Quote 外掛設定教學

WooCommerce 預訂商品教學 – Pre-Orders 外掛加入預訂服務

網站架設知識推薦閱讀:

Elementor 網頁編輯器 突破 300 萬下載次數,最受歡迎的外掛!

Google FAQ 結構化資料啟用,讓問與答在搜尋結果中直接呈現

Google 演算法更新,使用者搜尋後將出現多樣性的網站內容

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Scroll to Top