Astra主題提供WooCommerce Product Gallery,即產品頁的產品輪播圖體驗不令人滿意,問題很明顯,沒有設計成Carousel,縮略圖多了斷行,切換不平滑,是個半吊子實現,對於這樣一個業內如此為人熟知的主題,實在是不應該的,如果要深究原因,恐怕和我在好的定制與壞的定制裡說的,Astra面對WooCommerce深度定制的巨大城牆前選擇了退守,這是可以理解的。

但該實現的東西總得實現,沒有店長願意給客戶半吊子體驗,尤其是產品詳情頁,上面的每個交互用例都影響轉化率,客戶不是傻子,沒吃過豬肉也見過豬跑,他們會下意識地和自己曾經訪問過的某個電商站(它很可能是amazon)的體驗來比對,如果你的實現讓他覺做出的情感判斷是Low的,那麼下單這回事有可能就沒戲了。

如何完成這個定制?

Product Gallery Slider for WooCommerce

這個插件的描述看,他應該是我們需要的:把產品輪播區域Carousel化。大致看過免費版的介紹以後,我們決定直接去它的付費版主頁,因為Mouse Dragging Option是我們不願放棄的,尤其是移動端,視頻支持、細粒度的LightBox控制也很nice,Elementor兼容性意味著客戶在需要的時候可以無技術人員干預下換配,這很不錯。

原來它的付費版叫Twist,這是一個讓人云裡霧裡的名字,wp.org頁上開發者上傳的截圖,隱隱讓我感到作者可能不是Designer出身,因為第一張截圖展示的是一種粗糙的Design Value … 但話說回來,“現在”這些東西都無傷大雅,也許我自己換配能讓它優雅起來,只要它能解決我的根本問題,如果它能讓我(和客戶)未來永遠不為這個功能寫一行代碼,那麼29美金是絕對值得的。

很不幸,我購買的上面的第一個插件,對,就是29美金的那個,在我們部署到生產站一個多月以後的某天,主題完成某個主要版本升級後,出現了嚴重兼容性問題:我們的PHP錯誤日誌里居然監測到了不少Memory Exhausted的致命錯誤,而錯誤的源頭就來自這個插件的某個文件,這讓我們措手不及。

我不得不再次對這個插件的代碼進行重新評估,和我的第一印像一樣,插件雖然把承諾的功能實現得不錯,但它的PHP代碼難以令人尊重。雖然作者承諾會解決問題,因為我們的Support並沒有過期,只不過他回郵件的間隔平均是3天以上,在強烈的直覺指引下,我還是決定換掉它,一個不夠好的插件可以改進,一個不夠好的程序員卻是項目的風險因素,他不會有第二次機會。

WooThumbs

IconicWP的WooThumbs被展示的方式顯然讓人更有信心,我喜歡在插件主頁看到客戶評價裡有“Polished”字樣,只不過如果這個4.73的平均分是TrustPilot的更好,但沒有什麼是完美的。價格是79美金每年,14天試用期,30天內無理由退款,這很好,Testmonial裡有WooCommerce業內人士的評語,如果businessbloomer的作者說這是一個有質量的插件,那麼它大概是的。

我們的目標仍然是實現一個完整的、優質的Product Gallery體驗。移動設備優化、視頻支持、款式多圖支持、縮放、全屏、響應速度配置…. 而且考慮了Accessibility,這一點讓我徹底放下了疑慮。

它在我幾個客戶的網站上工作得很好,我們和開發者的合作很順暢,客戶也很滿意這筆投資,因為在不到一個小時培訓之後,他們可以完全控制這個插件的行為,不必央求不解風情的程序員的干預,他居然還要按小時收服務費,過分!

調動Elementor,釜底抽薪

有時候設計師比客戶跟難滿足,這不,她這次改版決定徹底重製產品詳情頁,100%寬度的魚眼風Carousel最近是她的最愛,她已經給我看了設計稿,不可否認,看到新設計第一眼起,我就有點擊慾望,圖片顯示區域大了整整30%,桌面上3圖同顯讓縮略圖行不再必要,一切都一目了然,產品給人的觀感無疑更加活潑、自信且附有個性了。

很顯然我們需要Theme Builder,用它來製作Single Product的Template,這沒有問題,但如何實現這個自信的魚眼風?任何市場上的Elementor WooCommerce Widget都愛莫能助,前面提到的插件也無能為力,它們的能力僅限於做出一個漂亮的Carousel,但它們的作者可從來沒考慮過有人會要魚眼效果— 其實這是設計師同學喜歡用的表述,這不失貼切,其實也可以叫Coverflow。

只要對著Elementor主頁多祈禱幾次,或者在WooCommerce Support頁裝乖乖孩,問題就能在夢中解決:

add_shortcode('custom_coverflow_product_gallery', function ($atts) { global $product; $attachment_ids = $product->get_gallery_attachment_ids(); $slides = []; foreach( $attachment_ids as $attachment_id ) { $slides[] = [ 'image' => [ 'url' = > wp_get_attachment_image_src( $attachment_id, 'medium' )[0], 'id' => '', ], 'type' => 'image', 'image_link_to_type' => '', 'image_link_to' => '', ]; } $media_carousel = \Elementor\Plugin::instance()->elements_manager->create_element_instance( [ 'elType' => 'widget', 'widgetType' => 'media-carousel', 'settings' => [ 'skin' = > 'coverflow', 'slides' => $slides, ], ], [] ); $media_carousel->print_element(); });

如果沒有人託夢相助,你也可以在Elementor(及Elementor Pro)的源碼文件夾裡找到蛛絲馬跡。如果需求把我們逼到代碼這個牆角,也就只有置之死地而後生了。

哦對了,這一切,你的Shopify都做不到^^

我想寫上一段基於WooCommerce的templates/single-product定制的炫技結尾,但和WC源碼拼刺刀並不是我們用WC的目的,我以前也寫過,這不僅缺乏品位,而且危險,打住吧。

發現錯別字麻煩選中按Ctrl+Enter

類似帖子

5 1 vote
評價
guest
1 Comment
Inline Feedbacks
View all comments
cpbabyblue
cpbabyblue
23 days ago

發現proxy的模式下,WP叔叔網站的訪問速度更快。 。 。 。 。