htmlページにWoocommerceカートボタンを設置するコード

ECサイトの管理運用において
・無料のカートを使いたい
・カートのカスタマイズを自由にしたい
・売上データーや顧客データーをAPS会社に渡したくない
といった要望からWoocommerceの利用を考える方が増えているそうです。

WoocommerceはWordPress上で動く、ECサイトプラグイン。
そのために、Woocommerceを使おうと思ったら、サイトをWordPress化しなくてはいけません。

しかし、すでにhtmlで作ったECサイトを運用しているとか、WordPressはちょっと使いたくないという方もいるでしょう。
今回はそんな方のために、htmlで作ったページにWoocommerceのカートを設置するためのコードをご紹介します。

今回ご紹介するコードは2種類
・（シンプルコース）購入数量とカートに入れるボタンのみを設置するコード
・（実用コース）在庫切れ対応カートボタンを設置するコード

プログラムソフトなど在庫管理していない商品はシンプルコース、在庫管理が必要な物は実用コースをお選びになればいいでしょう。

ただし、今回紹介するコードをhtmlページに設置しただけではカートは動きません。
サイトにWordpressとWoocommerceをインストールし、設定をしなくてはいけません。
その一連の作業方法については以下のまとめ記事で説明しておりますので、まずはこちらのまとめ記事をご一読ください。

それでは、カート設置コードをご紹介していきます。

(シンプルコース）カートボタンだけ設置するためのコード

<form action="該当する商品ページのURL" onSubmit="javascript:pageTracker._linkByPost(this)" method="POST">
 <input type="hidden" name="add-to-cart" value="商品ID">
 <input type="hidden" name="product_id" value="商品ID">
 <select name="quantity">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
 </select>
 <button type="submit" name="add_cart" vaue="カートに入れる">カートに入れる</button>
</form>

こちらが、Woocmmerceのカートに入れるボタン設置コードとなります。
コードを設置した場所に以下のような数量選択ボタンとカートボタンが生成されます。

デモページはこちら

Woocommerceデモページ

購入数を数量ボタンで指定して「カートに入れる」ボタンをクリックすると、Woocommerceのカートに遷移します。
カートでは「買い物を続ける」ボタンを押せば、元のページに戻り、また「お支払いをする」ボタンを押せば、注文者データーや支払い方法を指定するチェックアウトページに遷移します。

上記のコードで、ページごとに書き換えなくてはいけない部分を説明します。

1行目
<form action="該当する商品ページのURL" onSubmit="javascript:pageTracker._linkByPost(this)" method="POST">
この中の「該当する商品ページのURL」ですが、Woocommerceで設定した商品ページのURLになります。

2行目、3行目
<input type="hidden" name="add-to-cart" value="商品ID">
<input type="hidden" name="product_id" value="商品ID">
この商品IDもWoocommerceで商品ページ設定をしたときに自動付与されるIDです。

商品ページURLや商品IDについては、最初に紹介したまとめ記事で詳しく解説していますので、そちらをご覧ください。

商品購入数は1～5個まで選択できるようになっていますが、これは

<select name="quantity">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
 </select>

この部分で設定できます。
数を増やしたかったら、<option valume="〇">〇</option>と増やしていけばOKです。

カートに入れるボタンは「カートに入れる」というテキストになっていますが

<button type="submit" name="add_cart" vaue="カートに入れる">カートに入れる</button>

この部分を

<input type="image" src="カートボタン画像のURL" alt="カートに入れる">

としてやれば画像になります。
各所のスタイルは設定していませんので、各自CSSでスタイル設定してやってください。

在庫管理していない商品の場合、このコードでいいのですが、在庫切れが発生した場合、問題が出ます。
在庫切れになってもカートに入れるボタンが表示されおり、ボタンを押してカートに遷移してから初めて在庫切れが分かるとなるのです。
そのため、お客様の離脱が発生しますよね。

そこで、在庫切れが発生した場合、htmlページのカートボタンを「在庫切れ」ボタンに自動的に変える在庫切れ対応カートボタンのコードを次の章でご紹介します。

申し訳ございませんが、ここから先は有料区間となります。