WooCommerce製品スライダーを作成する方法(2つの無料プラグイン)

製品カタログが大きくなるほど、訪問者が欲しいものを見つけることが難しくなります。正しいアイテムを見つけることを望んでいるページの次のページをブラウジングすることは面倒になる可能性があります。そこで役立つのが、製品スライダーです。.


商品スライダーを使用すると、1つのページに必要な数のアイテムを表示して、カタログ内を簡単に移動できます。スライダーは、選択したデザインに応じて、必要なスペースを最小限または多く占めることができます.

この記事では、eコマーススライダーのお気に入りの例をいくつか紹介します。次に、2つの異なるプラグインを使用してWooCommerce製品スライダーを作成する方法について説明します。どちらのプラグインも無料バージョンを提供しています.

始めましょう!

ストアで商品スライダーを使用するメリット

スライダーはウェブのいたるところにあります。多くのウェブサイトでは、ヒーローセクションの一部としてスライドギャラリーを使用しています。

スライダーが特徴のヒーローセクション。

レビューやクライアントの声を自慢したい場合は、スライダーも優れた選択肢です。

スライドの証言は、小さなスペースに大量の情報を詰め込むのに最適な方法です。

ただし、いくつかの種類のWebサイトでは、オンラインストアと同じくらいの効果を得ることができます。製品カタログの大きさによっては、訪問者が多くのページを閲覧して、必要なものを見つける必要がある場合があります。

複数の製品ページ。

その問題を回避する方法はたくさんあります。カテゴリ別にアイテムを分割し、より優れた検索機能を追加し、もちろん、製品のスライダーを使用できます。

製品スライダーの例。

適切なツールを使用して、注目度の高い商品スライダーを簡単に作成し、売れ筋商品をアピールできます。あなたのオプションが何であるかについて話しましょう.

オンラインのWordPressストアに製品スライダーを追加する2つの簡単な方法

WordPressにスライダーを追加するために使用できるプラグインはたくさんあります。ただし、オンラインストアの場合は、すぐにWooCommerceと互換性のあるオプションが必要になります。それを念頭に置いて、最高の2つのスライダープラグインオプションの使用方法を見てみましょう.

1. WooCommerceプラグインの製品スライダーを使用します

WooCommerceのProduct Sliderは、その名前で知る必要があるほとんどすべてのことを伝えるプラグインの1つです。このプラグインを使用すると、WooCommerce製品を取得してスライダー内に配置できます.

必要な数のスライダーを設定し、構成可能なショートコードを使用して、任意のページ、投稿、またはカスタムテンプレートに挿入できます。作成するすべての製品スライダーは完全にカスタマイズ可能です。つまり、外観、動作、自動再生に設定されているかどうか、モバイルデバイスでのスワイプをサポートしているかどうかなどを変更できます.

生活をさらにシンプルにするために、このプラグインには、スライダーをユニークに見せるために選択できる3つのテーマが含まれています。プレミアムライセンスを購入すると、他にも数十のオプションがあります.

新しく作成するスライダーについては、最初からテーマを選択するのではなく、テーマを選択する必要があります。次のチュートリアルでは、独自のものにするために選択を微調整し、その過程でプラグインがカスタマイズに関してどのように処理されるかを示します.

始める前に、少なくともいくつかの製品を含むWooCommerceストアが必要です。これが私たちのものです:

新しいWooCommerceストア。

次に、完成したスライダーを確認します。次に、その方法を示します。

製品スライダーの例。

WooCommerceの製品スライダーの設定

最初に行う必要があるのは、WooCommerceプラグイン用の製品スライダーを設定してアクティブにすることです。するとすぐに、新しい 製品スライダー ダッシュボードにタブが表示されます.

クリックすると 新しく追加する, 最初に表示されるのは、新しいスライダーをWebサイトに追加する方法の概要です。

新しいスライダーを追加します。

スライダーのタイトルを設定し、下にスクロールして 一般設定 範囲。ここで、使用するレイアウトとテーマとともに、作成するスライダーのタイプを構成できます。

スライダーのテーマを選択します。

Theme Oneはすっきりとしたミニマルなスタイルを提供するので、その選択に固執します.

次に、スライダーに表示する製品を構成できます。このプラグインの無料バージョンの欠点は、最新のアイテムのスライダーを作成することしかできないことです。

スライダー内に表示する製品を選択します。

次に、スライダーを構成して、デスクトップデバイスに4列、モバイルデバイスに1列を表示し、合計12製品を表示します。.

に移動します スライダーコントロール タブで、自動再生を無効にしてから、ナビゲーション矢印とページネーションを有効にします。

ページネーションとナビゲーション設定の構成。

後者の設定は、ブラウジングエクスペリエンスをより簡単にするため、これらもオンにしておくことをお勧めします。タッチスワイプとマウスドラッグを有効にして、ナビゲーションをさらに直感的にすることもできます。

スワイプとマウスドラッグを有効にします。

上に移動 表示オプション, スライダーのテキストを黒に設定します。また、違いをより明確にするために、割引価格に異なる色を設定しました。

スライダーのテキストオプションを構成します。

タイポグラフィオプションは、プラグインの無料バージョンでは使用できません。したがって、この時点で、スライダーは準備ができています。製品スライダーを公開するには、それを保存し、ショートコードをコピーして、構成画面の上部にある ショートコード 任意のページのブロック:

Shortcodeブロックを使用して製品スライダーを追加します。

全体として、WooCommerceのProduct Sliderを使用して完全に機能するスライダーを作成するには、数分しかかかりません。スタイリングオプションに関しては少し制限がありますが、このプラグインは、ミニマリストを探している場合に最適です.

2. WooCommerceのPickPlugins製品スライダーを使用して製品スライダーを作成する

次に、WooCommerceのPickPlugins Product Sliderは、製品スライダーでより多くの機能を探している場合に最適な代替手段です。このプラグインは、スライダーアニメーションに関して、カスタム速度、ホバー効果などの自動再生機能を含む、一連のオプション全体を提供します.

このプラグインの障害の1つは、スライダーのスタイルに多くのカスタマイズオプションが提供されていないことです。セール中の商品や割引価格の商品に追加できる要素がいくつか含まれています。ただし、製品のテキストの外観を制御することはできません。.

一方、このプラグインの利点は、カスタムCSSを製品スライダーに追加できることです。それはあなたを意味します できる CSSに慣れている限り、スライダーのデザインのあらゆる面をカスタマイズします.

このことを念頭に置いて、このプラグインを使用して簡単な製品スライダーを作成することにしました。私たちの目標は、前のセクションのスライダーに似たものを作成して、2つのプラグインの主な違いを示すことでした。

製品スライダーの例。

プラグインのセットアップ

プロセスはかなり単純でした。プラグインをアクティブ化すると、 WCPS>新しいWCPS タブをクリックして新しいスライダーを作成します。最初に行うことは、タイトルを設定することで、プラグインはスライダーのショートコードを表示します。

新しいスライダーの名前を設定します。

カスタマイズプロセスを開始するには、 オプション タブ。そこで、要素のデスクトップバージョンとモバイルバージョンに表示する列の数を選択できます。ここでも、それぞれ4列と1列を選択しました。

スライダーに表示する列の数を構成します。

次に進むと、自動再生を無効にし、「ループ」を有効にしました。これにより、訪問者は最後の要素から最初の要素に直接スワイプでき、その逆も可能です。これは、以前のプラグインに含まれていなかった便利な機能です。

スライダーのループを有効にします。

さらに、マウスをオンにして、ドラッグオプションをタッチしました。このプラグインが提供する便利な機能の1つに「遅延読み込み」があります。これは、ページ速度を上げるためにスライダー内の要素を段階的に読み込みます。

製品スライダーの遅延読み込みを有効にします。

これで、スライダーを使用して製品を選択する準備ができました。 クエリ製品 タブ。このプラグインには、最新の製品以外にも多くのオプションが含まれています。ただし、この例では、その設定を使用します。

スライダーが表示する製品を構成します。

下にスクロールすると、在庫切れの商品を非表示にしたり、セール中の商品を含めたりするためのオプションが表示されます。次に スタイル, スライダーのベースとして使用する4つのテーマの1つを選択できます。

製品スライダーのテンプレートを選択します。

このセクションには、「リボン」も含まれます。これは、割引やオファーを表示するために商品画像の上に表示されるオーバーレイです。最後に、 要素 スライダーに含める要素を選択できるタブ:

スライダーに含める要素を構成します。

最後のスライダーに似たものを作成したかったので、 カテゴリー そして セール数 要素。独自のカスタマイズ作業が完了したら、スライダーを保存し、そのショートコードをコピーして、 ショートコード ブロック.

私たちの考えを要約すると、WooCommerceのPickPlugins製品スライダーがスライダーのより実用的なカスタマイズオプションを提供していることを感謝しています。ただし、スタイルのカスタマイズとインターフェイス自体は多少不足しています。私たちのアドバイスは、両方のプラグインの無料バージョンを試して、どちらがあなたの固有のニーズに最も適しているかを確認することです.

結論

製品のスライダーはシンプルに見えるかもしれませんが、多くのクールな機能を詰め込むことができます。スライダーにトランジション効果を追加し、特定の製品カテゴリを参照するように設定したり、任意のデザインを使用したりできます。.

スタイルと機能の両方に関して適切な範囲のオプションを提供するプラグインが必要な場合は、WooCommerceのProduct Sliderが適しています。一方、WooCommerceのPickPlugins製品スライダーは、はるかに多くのアニメーションオプションと、表示する製品のより多くの制御を提供します(無料版で)、ただしスライダーのスタイルをそれほど調整することはできません.

最後に、ストアでのショッピング体験を向上させる他の方法を探している場合は、WooCommerce製品ページを最適化する方法に関するガイドと、必須のWooCommerceプラグインのコレクションをチェックしてください.

オンラインストアで製品スライダーを使用する方法について質問がありますか?以下のコメントセクションでそれらを見てみましょう!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map