Welcartを使ってLPにカートボタンを設置しよう!

 

 

こんにちは!

WEBデザイナーのWATANABEです!

最近のお仕事で、ワードプレスでランディングページを作成し、「購入する」ボタンを設置、

クリックするとカートに商品が入って注文ができるようにしたいとの依頼をいただきました。

 

そんな時に便利なワードプレスのプラグイン!

ブログ記事や固定ページにさくっとカートボタンを設置できる、

「Welcart(ウェルカート)」を使ってみました!

 

 

 

Welcartって何?

 

 

Welcart(ウェルカート)とは、Wordpressで簡単にネットショップを始められる便利なプラグインです。

 

名-7

 

無料のECサイトテンプレートも充実していて、そのまま使うだけで、

カッコいい通販サイトが速攻で出来ちゃいます!

 

導入方法も超かんたん。

 

プラグインから「Welcart」で検索し、インストールするとダッシュボードに下図のような

ECサイト系のメニューが表示されるようになります。

 

名称未-7

あとは、メニューに従って商品登録や配送の設定、決済方法などをどんどん設定していくだけ!楽天やyahoo!などを使わなくても、Wordpressで簡単に通販サイトを立ち上げることができます!スバラシー!

 

 

 

 

 

固定ページへカートボタンを設置するときは、ショートコードを使おう!

 

 

ECサイトを作る場合は、Welcartで配布されているテンプレートを使うと早いのですが、

今回はランディングページとなる固定ページに、カートボタンを設置します。

 

 

まずは、ダッシュボードの「新商品追加」から商品を登録~。

 

 

次に、ランディングページのhtmlを書き込んだ固定ペ―ジにカートボタンを設置したいわけですが、

welcartの公式で公表されている「カート投入ボタン」のテンプレートタグ、

 

 

usces_the_itemSkuButton($value)

 

 

これをそのまま固定ページ内に書き込んでも、カートボタンはちゃんと作動しません!

このタグは、登録した商品ページ(投稿ページ)に記述されることで、商品と関連付けされてるので

固定ページに書き込んでも、どの商品をカートに入れるのか判明できないのです!

 

なので、固定ページにカートボタンを設置するときは、こっちのショートコードを書きましょう!

 

 

[button_to_cart item="item_code" sku="sku_code" value="text"]

 

item_code : 商品コード
sku_code : SKUコード
value : ボタンに表示するテキスト( 購入する、カートに入れる 等)

 

 

商品コードとSKUコードは、商品登録の際に自分で設定するやつです!

 

 

これで無事、固定ページにカートボタンが表示され、カートに商品を入れる事ができます!

あとはCSSで自分の好きなデザインにボタンを装飾しましょう~!

 

 

 

 

ウェルカートを使えば、ECサイトを持たないお客様でも、Wordpressでランディングページを作成し、

WEB上で商品販売から申込決済システムまで簡単に導入することができますね!

 

気になった方はお気軽にお問い合せ下さい(*´∀`)