BASEでは商品一覧が無限スクロールするスキンをよく見かけます。Woocommerceでも同じように商品一覧ページを無限スクロールすることができます。ただし、プラグインを使う必要があります。
この記事では、BASEなどでお馴染みの商品一覧無限スクロールを、Woocommerceで実現する無料プラグインをご紹介します。
Load More Products for WooCommerceが便利
商品一覧無限スクロールを実現できるプラグインの名前は、Load More Products for WooCommerceです。
インストールして有効化するだけで基本使えます。
特徴
- Infinite Scroll for WooCommerce Products
Woocommerce商品ページの無限スクロール - Load More Products Button or AJAX pagination
Load More ProductボタンかAJAX paginationの選択 - Custom button text
ボタンテキストのカスタマイズ - JavaScript hooks for custom code
Javascriptのカスタムコードの追加
有料プラグインじゃないと使えない機能
- Lazy Load for images
画像の遅延読み込み - 40 Animations for Lazy Load
画像の遅延読み込みの40種類のアニメーション - Customization for Load More Button
Load More Buttonのカスタマイズ - Customizable Loading Image
Loading Imageのカスタマイズ - Different Products Load Type for Mobile Devices and Other
画面サイズによって異なる読み込み方法 - JavaScript Before and After AJAX Update
AJAX更新前後にjavascriptを追加 - ‘Loading…’, ‘No more products’, etc messages customization
No more productsの表記カスタマイズ
まとめ
無限スクロールする必要があるかないかは、サイトの性質次第だと思いますが、スマホの場合はいちいちページネーションされていると訪問者のUXは下がる感じはします。
そういう背景もあって、BASEでは無限スクロールが実装されているスキンが多いのかなと思います。
BASEからWoocommerceにサイトを移転した時に無限スクロールさせたいと思ったときにはこのプラグインを思い出してください。
