WordPressにWooCommerceをインストールして
オンラインショップをしていて商品画像に少し飾りたくなりませんか。
ただの写真よりも額縁を付けたり影、エフェクトなどがあるとキレイですよね。
そこでWooCommerceでのデフォルト商品写真にエフェクトを付ける
プラグイン「Product Image Hover Effects」の紹介です。
商品画像にマウスが当たると揺れるなど
楽しいエフェクトが入っていますよ。
ここでは画像付きで設定、使い方を説明してるので参考にしてみてください。
Product Image Hover Effects WOOCとは
WooCommerceで作成した商品ページにある
商品画像に額縁、影を付けたり
マウスオーバーエフェクトを付与するプラグインです。
設定項目がとてもシンプルなので
気軽に商品画像を飾ることができるようになっています。
＊WooCommerceのデフォルトだと少しシンプルなのでおすすめします。
プラグイン「Product Image Hover Effects WOOC」のインストール
それでは始めていきましょう。
WordPressにログインしたら
ダッシュボードから「プラグイン」→「新規追加」へとクリックします。
プラグインを追加のページが表示されたら
キーワード検索欄に「Product Image Hover Effects WOOC」と入力しましょう。
検索結果は、自動で反映されます。
Product Image Hover Effects WOOCを見付けたら
「今すぐインストール」をクリックします。
＊下の方や右側、または違うページにある場合があります。
インストールが終わると「有効化」をクリックしましょう。
有効化すると自動でインストール済みプラグインのページに移動します。
もし、WordPressバージョンの違いで移動しない場合は
自分で「プラグイン」→「インストール済みプラグイン」に移動しましょう。
これでProduct Image Hover Effects WOOCのインストールは終わりです。
商品画像に額縁、影、エフェクトの設定
ここでは商品画像に影などを設定していきます。
設定ページで設定すると後は自動で一括処理されるので簡単ですよ。
ではさっそく管理メニューから
「WooCommerce」→「Configure Piew」をクリックしましょう。
すると設定ページが開くので
上から順番に設定していきましょう。
各項目の説明は画像の下にあるので参考にしてみてください。
Hover Effecs： 商品画像でのマウスオーバー時のエフェクトを選びます。
ここでは定番の写真がふわぁとなる「Fade」にしています。
Gallery show： 複数写真を設置している場合は
商品画像内にギャラリーとして小さく画像を表示します。
少しごちゃごちゃするのでチェックしていません。
Product border： 商品画像の額縁のありなしになります。
ここはチェックを入れています。
Product border color： 額縁の色を指定します。
ここでは「オレンジ色」にしました。
Product shadow： 商品画像の影のありなしになります。
ここはチェックを入れています。
最後に「変更を保存」をクリックしましょう。
これで初期設定は終わりです。
商品画像のエフェクト確認
それでは実際のどのように商品画像が表示されるのか
「店舗へ移動」から確認してみましょう。
するとこのように商品画像の額縁、影、エフェクトが付きますよ。
画像ではわからないので動画を再生して確認してみてください。
WooCommerceのデフォルトと比べて
明らかに印象が良くなりましたね。
これでProduct Image Hover Effects WOOCの紹介は終わりです。
オンラインショップ、ネットショップなどのECサイトを作成・運営できる
WooCommerceに興味のある方は一度導入して試してみてはどうでしょうか。
また、オンライン決算ができるPayPalビジネスアカウントも持っておくといいですよ。
無料でビジネスアカウントはとても心強いですよ。
まとめ
WooCommerceで作成したストア内の商品画像に
額縁、影、エフェクトを付与するプラグインでした。
この商品写真の影などは
ストアを作成してすぐに使いたくなるプラグインではないでしょうか。
やはり商品画像にマウスが当たると揺れたりすると楽しいですよね。
WooCommerceでストアを運営しようとしている方は
一度プレビューなどで試してみてはどうでしょうか。
そこでこれをやらなきゃ損をするということで
ブログ維持のためにアフィリエイトを始めてみませんか。
大きく稼ぐには全力で挑む必要がありますが
ブログ維持費なら片手間でも大丈夫！
気になる方はここよりアフィリエイト会社(ASP)の紹介を見てみましょう。
