テーマVirtue(海外)を使ってみる16回目 ショッピングサイト作成11回目

 

今回はショッピングサイトの応用編の後半です。

 



 

前回の応用編の前半では、色やサイズを設定を用意しました。

今回の、後半では、その色やサイズを選択できるTシャツを用意することになります。

ダッシュボード > 商品 > 商品を追加

 

新しい商品の追加

 

名前を neo ロボット Tシャツ としました。

白い何も書いていないところには、商品の説明を書きます。

 



 

これからページの下にある商品データーを設定していきます。

ColorSizeです。

 

バリエーション追加

 

最初に、属性を選択します。画面が変わります。

「カスタム商品属性」の ▼ の部分を選択 Color を選びます。

「カスタム商品属性」の右側「追加」の部分をクリックします。


 



 

カラーのバリエーション 設定

 

まず上側にある商品データーをバリエーションのある商品に変更します。

以下にチェックを入れます。

■ 商品ページ上に表示される

■ バリエーションのために使用

 

次に、今回はすべてを選択をクリックします。

応用編の前半で 設定した グレーブラウンが今回の neo ロボット Tシャツ で、選択できるようになりました。

 

そして、カスタム商品属性で Size を選び 追加ボタンを押します。

 

サイズのバリエーション設定

 

先ほどのColorの設定と同じようにして、Sizeを設定します。

最後に、属性を保存を押します。

 



 

バリエーションのある商品 (初期設定)

 

左横にあるメニューを、バリエーションにします。

これからneo ロボット Tシャツの色やサイズのバリエーションを設定します。

表示を押します。以下のように表示されます。

 

バリエーションの追加

 

まず、はじめに

デフォルトなし Color…デフォルトなし Size…の部分ですが、

Shop(ショップ)の画面を開いたときに まず最初に どのカラーとサイズの組み合わせの商品を表示するかを決めます。

こちらでは カラーを グレー , サイズを Lサイズにします。

 

「すべての属性からバリエーションを作る」は、

neo ロボット Tシャツのバリエーションの種類を追加する いうことです。

カラーでは、グレーとブラウン 

サイズでは L M S

と、なりますので 合計で6パターンとなります。

「すべての属性からバリエーションを作る」の横にある 表示を1回押して下さい。以下のようになります。

 

バリエーションパターンの追加

 

確認できましたら、変更を保存ボタンを押して下さい。

 

バリエーションの詳細

 

そして、#893 のバリエーションを選択すると、右側に が表示されるので、そこを押します。

すると、以下の画面が開きます。

 

バリエーションの詳細

 

まず、青いマークをクリックします。

事前に用意していた グレーの neoロボット Tシャツの画像をを選択して貼りこみます。

次に、定価などの設定をします。
下側の残りのバリエーション(パターン)も同じように設定します。

設定がすべて終わりましたら、このページの一番下(現在画面外)、「変更を保存」ボタンを押します。

 

バリエーション完了画面

 

例えば、グレーのLサイズを このようにしました。

 



 

また、ページの画面右側(現在画面外)にある商品カテゴリーに カテゴリ名 neo ロボット Tシャツ を追加。

そしてページの右下側(現在画面外)にある商品画像にグレーの neoロボットTシャツ の画像を追加します。

 

商品画像

 




グレーのneoロボットTシャツにしたのは、一番はじめに表示する画像だからです。

確認をして問題がなければ、保存を押します。

そして、ページの上側にある、商品を見る をクリック。以下のようになります。

 



 

完成画面


neoロボットTシャツ
http://s-practice.sakura.ne.jp/flat_aroma/product/neo-robot/

 



 

もし、ショッピングサイトの上側に、

これはデモストアです — 注文は出来ません。など 書かれている場合は、

以下の方法により 対応ができます。

 

まずダッシュボ-ド に戻ります。

WooCommerce > 設定

一般タブにある、「通知テキスト」の右にあるチェックを外します。

もしくは、下の項目、

通知テキストの内容に別の言葉を書きます。

一番下にある「変更を保存」を押します。

確認をして、問題がなければ、終了です。

 



 

読んでいただきありがとうございました。

次回は、Virtueの簡単なデザインの変更です。

よろしくお願いいたします。