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 演算法更新,使用者搜尋後將出現多樣性的網站內容

分享在 facebook
Facebook
分享在 google
Google+
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

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

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top