「Webサイトにカート機能を付けて商品を売りたい！ときのWelcart 導入編」では、WordPressのプラグイン Welcart を使って、カートシステムを導入するあたりについて書きました。
商品を登録して表示できるようにしましたが、そもそも的にWebサイトでものを売るときのWebサイトのデザインとか、商品を複数登録してどのように見せるかとかについてをショップ構築編として書いてみたいと思います。
Welcartをインストール、設定して商品登録した時点での表示
前回の
[ryus_blogcard url=”https://usortblog.com/welcart-dounyu”]
ではWelcartをインストール、設定して商品を1つ登録し、それを表示するというところまでを行いました。
今回はWebサイト全体をショップとして使えるように、見栄えなどを調整したり、商品も複数登録してよりECサイトっぽいものにしていこうと思っています。
ということでまずはWebサイトの見栄えを変えたいと思います。
WordPressをインストールしてそのまま作っているので、テーマはTwentySixteenです。トップページは
こんな感じ。。ちっともお店に見えませんね(^_^;。タイトルをクリックしてようやく
こんな風に値段が出たりしてちょっとだけ売ってる感じがしますが、いまいちピンときません。
Welcart専用のテーマに変更してみる
既存のWebサイトにカート機能を追加する場合はテーマを変更することはなかなか難しいので、カスタマイズしようと思った場合は、カート部分のテンプレートをカスタマイズする方法で変えないといけませんが、たとえば今回想定しているのは全体的に「ものを売るためのサイト」と考えてます。そういうときはテーマをWelcart向きのものにしてしまえばいいのではないかなと思います。
Welcartをインストールするとついてくるテーマがあるのですが、ちょっと試したところ残念ながらレスポンシブテーマではないみたいなので別のテーマにしたいと思います。
Collne Inc.さんのサイトで配布されている無料のテーマ Welcart Basic を使ってみます。
こちらのページで カートに入れる をクリック。これ自体がWelcartの仕組みなんですね、きっと。。。
カートの中 ページで 次へ をクリック
登録をしないといけないみたいなので、新規ご入会はこちら をクリック
新規入会フォームが表示されるので 必須 をすべて入力して
送信する をクリック
利用規約に同意する にチェックを入れて 次へ をクリック
内容確認 ページの
一番下の 上記内容で注文する をクリック
完了ページにある ダウンロード をクリックしてzipファイルを保存します。
ダッシュボード 外観＞テーマ をクリックして、
新規追加 をクリック
テーマのアップロード をクリックして、
先ほどダウンロードしたzipファイルを指定して、今すぐインストール をクリック
有効化をクリック。これで
トップページ
商品ページ
こんな感じにぐっとショップらしくなりました(^^)/
商品を複数登録してカテゴリーに分けてみる
商品を複数追加してみました。
このショップにに商品ジャンルを追加してみます。
ダッシュボード 投稿＞カテゴリー をクリック
このように 親：商品ジャンル として、カテゴリーを入力して、
新規カテゴリーを追加 をクリック。これを繰り返して必要なジャンルを追加します。
ダッシュボード Welcart Shop>商品マスター の一覧で商品の 編集 をクリック
商品に当てはまる商品ジャンルにチェックをして 更新 をクリック。
ウィジェットを整理してショップらしくする
トップページをもっとショップらしくするためにウィジェットを整理します。
トップページはこんな感じの構成になっています。
ダッシュボード 外観＞ウィジェット をクリック
ウィジェットの構成はこのようになっています。トップページの ホーム ウィジェットエリア（左）以外にはなにもウィジェットが指定されていません。このテーマでは何もウィジェットが指定していなければ表示されるウィジェットが入っています。この辺が少しわかりにくいかもしれません。
トップページの ホーム ウィジェットエリア（左） には Welcartカテゴリー だけを表示したいので、
ウィジェットを左にドラッグ＆ドロップして、空にします。
そして、
Welcartカテゴリー をクリックして、ホーム ウィジェットエリア（左） をチェックし、ウィジェットを追加 をクリックします
タイトルを 商品カテゴリー として、保存 をクリックします。
トップページを見てみます。
こんな風に変わりました。
トップページの画像は wp-content\themes\welcart_basic\images\image-top.jpg を入れ替えました。それ以外は、今まで説明したカテゴリーの指定と、ウィジェットの変更でこのように変わります。
商品詳細ページは
こんな感じの表示になりました！
まとめ：まだまだ手を入れたいところはありますが
色を変えたいとかショップ名をロゴにしたいとか色々変えたいところはありますが、その辺は後々修正するとして、次はお店側として商品が売れたときの管理画面はどんな感じになっているかとか、どうやって購入者に連絡をするか、納品するときの納品書とかはどうなっているか？あたりについて書きたいと思います(^^)/
コメント