【WordPress】WooCommerceのレビューに画像を追加…だけじゃない!「Photo Reviews for WooCommerce」




こんにちは、プロクラスの中山です!
プロクラスの講師・スタッフなどのメンバーが増えたので当番がなかなか回ってこなくなり、お久しぶりのブログでございます。

ウーコマース

さて、今日はWordPressの中級〜上級の皆様向けの内容となります。WordPressをオンラインショップにするためのプラグイン「WooCommerce(ウーコマース)」をさらに便利にするプラグイン、「Photo Reviews for WooCommerce」のご紹介です!
…なので、すでに「WooCommerce」を使っている、またはこれからオンラインショップにしてみようかなという人向けの内容です。

「まずはホームページの作り方からだわ」という方はプロクラスの「簡単ホームページ作成!はじめてのWordPress講座」をご覧ください。オンライン講座なら全国どこからでも受講できますよ〜!

WooCommerceとは

まずはWooCommerceについてご紹介いたします。すでにご存知の方やECサイトをご検討の方向けの内容なので、簡単にご紹介します。

WooCommerceとは、WordPressをオンラインショップにするための機能が一つに詰まったプラグインです。
オンラインショップのプラグインは「Welcart」か「WooCommerce」を使われる場合が多いですね。

Welcart

Welcart

Welcart」は日本製のプラグインなので、国内向けの基本的なオンラインショップ機能であればこちらの方がオススメです。なぜなら「WooCommerce」は海外製のプラグインなので「自動翻訳っぽい変な日本語だな」という部分がちょこちょこあったりするのですが、プログラムなどをカスタマイズする知識がない方だとそれを直すのが大変だからです。
※日本での販売に対応するためのプラグイン「Japanized For WooCommerce」などもあります。

WooCommerce

WooCommerce

WooCommerceは海外製だけあって使っている人が多く、カスタムして機能を増やしていくための方法がたくさん用意されています。世界中のプログラマーが様々な機能を開発しているのです。
普通のオンラインショップではなく、例えば「日やシーズンによって違う金額で予約できる宿泊予約機能をつけたい」や「購入の前に見積もり依頼をしたい」など、多岐にわたる機能を加えた強力なサイトを作ることが可能です。

その他、メルマガプラグイン「MailPoet(メールポエット)」を使って「この商品を買った人に対してメールを送りたい」など、他のプラグインと組み合わせてさらに便利に使えるようになっていたりなど可能性は無限大です。

このWooCommerceを使って様々なサイトをカスタムする中で、こんな希望が出てきました。

商品のレビュー(口コミ)に写真投稿機能をつけたい!

「販売した商品の感想をサイトに寄せていただき紹介したい」ということでただのコメントだけではなく、せっかくなので写真もアップしてもらおうではないかということになりました。
実際に商品を使っているシーンや、旅行プランの予約などであれば実際に行って見た景色などをアップしてもらえたら次の購入者の人にも嬉しいですよね。

でもデフォルトのレビュー機能は文章のみ。WooCommerceに加えてちょっとプラグインを足さないと実現することはできません。

「Photo Reviews for WooCommerce」を使おう

このプラグインは商品レビューに写真投稿ボタンを追加してくれます。
使い方は、プラグインを有効化するだけでOK!無料版だと最大2枚写真をアップすることができます。

残念ながら設定画面は英語です…が、プラグインの名前でGoogle検索すれば使い方を紹介してくれているブログがたくさんあるので安心です。

Photo Reviews for WooCommerce設定画面

※WooCommerceに対応しているテーマでないと商品レビューのタブが表示できません。
自作のテンプレートの方はfunctions.phpに「WooCommerceに対応しています」というコードを足すようにしましょう!

でも、写真アップロードボタンを追加できるだけではないんです
なんと、商品を購入した後に「購入ありがとうございました、ぜひ感想をお寄せください」のような、コメント記入をお願いするメールを自動送信してくれるんです。自発的にコメントを書いてくれる人ばかりだといいのですが、商品を買った後だと忘れてしまう人が多いのでこのリマインド機能は最高ですね!

さらに、「コメントを書いてくれたらクーポンをプレゼントします!」という設定まで可能です。「商品購入完了の◯日後にメールを送る」といった細かい設定も可能。グレイト!ほんまにめっちゃ便利やん。

そして、星による評価を有効化している場合は星の平均値を表示してくれるという親切さ。作った人ありがとう。
無料版で十分に便利なのですが、有料版だともっと細かい設定ができるようです。

コメントの表示デザインは2種類!

デザインの選択画面

「Masonry(メイソンリー)」というタイル状にコメントを並べるものと、「Nomal」の通常のコメントのデザインの2種類があります。

まずは「Nomal」。

ノーマル表示

上部に星の表示がつきますが、コメントは普通に並ぶ感じです。
CSSが得意な方はこれを元に編集いただくと写真をかっこよく見せられるかも?写真はクリックしたら拡大してくれます!

※コメントを絞り込み表示するためのボタンも本当は出てくるのですが、下記のキャプチャでは不要だったのでCSSで隠してしまっています。

続いて、「Masonry(メイソンリー)」です。
こちらは画像のサイズやコメントの長さに合わせてタイルのように敷き詰めていくデザインです。

masonry表示

各コメントをクリックしたら拡大して表示されます。
すごいね〜。

コメント拡大表示

いかがでしょうか?とっても便利ですよね。
私としては、「画像がつけられるだけだろと思っていたら、レビュー投稿のリマインドメールが送れるのか!」という点が感動ポイントでした。

コロナ禍で対面ビジネスが難しくなった方や、今後オンラインでのビジネスを広げていきたい!という方はこのような仕組みを使って自分のホームページを作ってみるのはいかがでしょうか。
新たなビジネスの幅が広がりますよ!

マンツーマンレッスンも可能ですので、ご不明な点やお困りのことがありましたらお気軽にプロクラスへお問い合わせくださいね

それでは、また!