南国うまうま日記

バリ島ウブドに住むもんぶぅがお届けするバリ島最新情報ブログです。



htmlで作ったページにWooCommerceのカートボタンを設置する方法

htmlページにWooCommerceのカートボタンを設置する方法

WooCommerceは、商品データを設定すると自動的に商品ページをphpで生成します。
商品ページのデザインは、WordPressのテーマ(WooCommerce向けのテーマが沢山あります)によって決まります。
ショップイメージに合ったテーマを見つけるか、オリジナルテーマを作れば、こだわりのECサイトを作ることもできます。

まったく新しいサイトを作るか、サイトデザインを全面的にリニューアルするのでしたら、これでいいのですが、中には現在のサイトを使ってカートのみWooCommerceにしたいという要望もあるでしょう。

私が担当するサイトも、デザインリニューアルをしたばかりだったので、サイトはそのまま使ってカートだけWooCommerceを導入したいという事でした。

このような場合、問題となるのはWooCommerceのカートボタンをどうやってhtmlページに設置するのと、在庫切れの場合の対応です。

今回は、この問題の解決方法をご紹介します。
WooCommerceを導入したいけど、サイトのショップ部分は現行のものをそのまま使いたいという方の参考になれば幸いです。

 

<目次>

 

WooCommerceカートボタンの設置コード

htmlページにWooCommerceのカートボタンを設置するには、以下のコードをボタン設置部分に記載します。

<!-- フォーム -->
<form action="カートのURL" onSubmit="javascript:pageTracker._linkByPost(this)" method="POST" class="spec-form">
<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>
</select>
<input type="image" src="カートボタン画像のURL">
</form>
<!--/フォーム--> 

 コードは以上です。

カートのURLは 「https://ショップのドメイン/cart/」になると思います。 

「商品プロダクトID」は、商品ページのポストIDで、WooCommerceの商品一覧ページに表示されます。

このコードでは、商品の注文数量はセレクトボダンで行うようになっていますが、テキストでもラジオでも大丈夫です。

これで、注文数量を指定してカートボタンをクリックすれば、WooCommerceのカートに飛ぶはずです。

 

商品在庫切れの対応

商品在庫切れの対応は少々面倒です。
WordPressのRest API関数を使い、データベースからWooCommerceの商品在庫データーを読みだし、PHPで在庫数が0かどうかを判断し、0の場合は「在庫切れ画像」を、1以上の場合は「カートボタン」を表示させます。

具体的なコードは以下の通りになります。

<!-- フォーム -->
<?php $pid ='商品のプロダクトID'; ?>
<?php $pdata = 商品データーを呼び出す関数($pid); ?>
<form action="カートのパーマリンク" onSubmit="javascript:pageTracker._linkByPost(this)" method="POST" class="spec-form">
<input type="hidden" name="add-to-cart" value="商品のプロダクトID">
<input type="hidden" name="product_id" value="商品のプロダクトID">
<?php if(isset(商品在庫数) and 商品在庫数 >= 1):?><select name="quantity">
<?php for($count = 1; $count < 商品在庫数+1; $count++){
if($count <= 表示させる最大商品数): ?><option value="<?php echo $count;?>"><?php echo $count;?></option>
<?php endif;
}; ?></select>
<input type="image" src="カートボタン画像URL">
<?php else:?>
<img src="在庫切れ画像URL">
<?php endif;?>
</form>
<!--/フォーム-->

このカートボタンでは、注文数をセレクトボタンで選択できますが、指定した最大数もしくは商品の在庫数のどちらか小さいほう以上選択できないようになっています。
例えば、在庫が3個しかなければ1~3個までしか選択できません。
在庫が100個あったら、選択ボタンを1~100まで表示するのは現実的ではないので決められた最大数(たとえば5個)までしか表示しないようにしています。

商品データーをデータベースから読み出す関数は、とても難しかったので、専門の業者さんに作ってもらいました。
そのため、私は内容がよくわかりません。
WordPressがよくわかっている業者さんに相談してみてください。

 

まとめ

今回はhtmlページにWooCommerceのカートボタンを設置する方法をご紹介しました。
在庫切れ対応はちょっと高度なプログラムとなりましたが、カートボタンの設置はHTMLがわかる方なら、すぐに理解できると思います。

WooCommerceを導入したいけど、前頁のデザインをやり直すのはちょっと難しい、というECサイト管理者の皆様に参考になれば幸いです。