WooCommerce:無料プラグイン+jQueryでバリエーションを一覧表示し複数選択可能にする

アバター画像 お母ちゃん  2023.10.6 
Home > Web > WordPress > WooCommerce:無料プラグイン+jQueryでバリエーションを一覧表示し複数選択可能にする
すき 0
うんこ 0

バリエーション商品を複数選択可能にしたい

WooCommerce でバリエーション商品の時に
プルダウンでの表示となりますが
これを一覧にして複数選択可能にしたいと思いました。

色々と調べて有料プラグインの導入も検討しましたが
がっつり改良出来る機能豊富なプラグインが多くて
ただこれだけをやりたいだけなのにそんなに複雑な機能は要らないなぁと思い…。

試行錯誤しつつなんとかそれっぽい動作を実現する事が出来たので
記録しておこうと思います。

variation-table デモページ

うちの環境

・WooCommerce v8.1.1
・テーマ:StoreFront v1.0.1

(StoreFrontが古いのでバージョンアップしたい所..)

プラグイン:Side Cart Woocommerce

こちらのプラグインを使用しています。

Side Cart Woocommerce (Ajax) – WordPress プラグイン | WordPress.org 日本語

ajaxでカートに入れる系のプラグインをいくつか試してみたのですが
こちらが動作も安定しておりデザインや操作性も良いです!✨

JS

jQueryでバリエーションの情報を整形してチェックボックスで表示し
「選択した商品をカートに入れる処理を繰り返す」という形になっています。

Ajaxで追加する処理を実装した方が良さそうなのですがやり方がよく分からないため
間隔を開けて(setTimeout)カートボタンのクリックを実行しています。

たまにカートに入らない時があるような…
ここの処理は要検討。

ChatGPT

最近コードはもっぱらChatGPTに書いて貰います…。

コードが長くなると破綻してきたり説明も面倒になってくるので
分解して部分部分で質問すると良い感じです。

大枠の作りとか処理の流れを決めて
細かい処理の部分はChatGPTで書いてもらう
ってのが楽で良いですね〜…

CSS

cssは表示を多少整えているだけなので
テーマに合わせて適宜…

補足:バリエーションのデータ

form.variations_form[product_variations] に
バリエーションのデータが入っていたので、
こちらを取得しています。

ChatGPTに整形してもらった所
このようなjsonデータが入っているようです。

テーマによってはまた違ってくるのかも知れませんが
他のテーマを使った事は無いのでわかりません。

動作デモ

variation-table デモページ

試行錯誤しましたが
なんとか目的の動作を達成出来て嬉しい〜…

色々と荒いので調整する必要がありますが
なにかの参考になれば幸いです。

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください