【ECサイト:WooCommerce】サイズと重さが変化する商品の価格と送料を計算する方法

突然ですが、お客様から「グラム単価の量り売りや、自由なカットサイズで注文ができるECショップを作りたい!」と言われたらどうしますか?完全にカスタマイズが効くように費用をかけてフルスクラッチで構築する、shopifyなどのECプラットフォームで構築できないか調査する、色々あると思います。

商品価格や送料以外のカートや支払い、会員アカウント画面は通常のECショップと変わらないのでフルスクラッチは過剰に思えます。

また、shopifyではフォーラムで回答がある通り「仮金額で決済を保留し、商品重量を店舗側で確定後、本決済を行う」という手動フローが必要なるようで運用負荷も高く、UXとしてもいまいちです。

そんな時は基本的なEC機能を備えつつ、カスタマイズも効きやすいWordpressのECプラグイン「WooCommerce」がおすすめです。

今回は「WooCommerce」に2つのプラグインを導入して、注文時に動的にサイズと重さが変化する商品の送料(と商品価格)を自動的に計算させる方法をご紹介します。

WooCommerce標準での料金と送料

まずは通常のWooCommerceでの料金と送料の設定をおさらいしましょう。

例えば、アパレルのECサイトをWooCommerceで構築する場合は、商品のバリエーションを定義して、その組み合わせごとに料金を設定することが多いと思います。

分かりやすい例を挙げると、同じシャツでも「サイズ:M、カラー:アイボリー」なら2,400円、「サイズ:XLでカラー:カーキ」なら2,800円といった感じですね。

【バリエーションごとに価格と重量、寸法を指定】

しかし、例えば木材のフリーカット販売のECサイトではどうでしょうか?

木材の幅、奥行きをmm単位で指定できるサイトを作るとすると、幅、奥行きともに100mm、101mm、102mm・・・のように大量のバリエーションが必要になり、その組み合わせも考えるととても1組み合わせずつ価格設定するのは無理そうです。

(板の厚さや板の種類も選べるとなると、組み合わせが多すぎてもう不可能ですね・・・)

そんな時は今日紹介する【Uni CPOプラグイン】と【Fish and Shipsプラグイン】がオススメです!

Uni CPOプラグインとは?

Uni CPOプラグインは商品にラジオボタンの選択肢や数値フィールドのパラメータ設定を追加することができるプラグインです。

そして、これらの選択肢やパラメータ設定を使った計算式を定義しておくと、自動的に商品の価格を計算してくれる優れモノです。

Uni CPOプラグインには無料版もあります。ただし、無料版では商品の価格は計算できますが、重さやサイズは計算できません。今回紹介するFish and Shipsプラグインと連携させて、重さやサイズに基づいた送料計算を行う場合は有償版を購入してください。

有償版は2023/10/18時点で$49.99 / 年で、5ライセンス購入可能です。

Fish and Shipsプラグインとは?

WooCommerce標準でよく使われる送料計算は以下のようなものです。

  • 配送サイズ(つまり配送する箱のサイズ)を何パターンか用意する
  • 商品ごとにどの配送サイズを適用するか設定する
  • 配送先地域(都道府県など)ごとに各配送サイズの送料を設定する
  • カートに商品が複数入った場合は配送サイズが最も大きいものが採用される

この送料計算では今回のような幅、奥行きのパラメータによって配送サイズが大きく変わるケースに対応できません。

そこで、Fish and Shipsプラグインの出番です。このプラグインは商品の幅、奥行き、高さなどのサイズや重さの情報に基づき、配送料金を決定することができます。

先ほどのUni CPOで動的に計算されたサイズや重さをFish and Shipsでの送料計算に使うことができるので、この2つを連携させることで、動的にサイズや重さが変わるフリーカットや量り売りの商品でも商品価格、送料を細かく計算できるようになるわけです。

無料版では、重さや容積から送料計算が可能です。日本の配送会社でよく使われる「高さ+幅+奥行き」で配送サイズが決まる方式での計算に対応するには有償版が必要になります。

有償版は2023/10/18時点で50€ / 年で、1ライセンス購入可能です。

Uni CPOとFish and Shipsを使った商品価格と送料の設定手順

それでは、設定手順を解説していきます(プラグインの購入・インストール手順は割愛します。上記サイトに記載の手順に従って、購入・インストールをお願いします)

Uni CPOプラグインを使った動的な商品価格、重さ、サイズの設定方法

最初に重さとサイズの単位をWooCommerceで指定します。

WooCommerce > 設定 > 単位から「重量単位」と「寸法単位」を指定してください。今回の例では「kg」と「mm」を指定しました。

単位を指定

次にUni CPOプラグインを使って商品にパラメータを追加します。

既存商品を選択、もしくは、新規追加して「一般」から「標準価格」を指定して保存を行ってください。※私の環境ではこれを行わないと次に説明する編集画面が正しく表示されませんでした。

商品データのセクションにCPO from Builderというメニューが現れるので、こちらを選んで「GO TO THE BUILDER」から編集画面に入ります。

CPO from Builder > GO TO THE BUILDERから編集画面に入る

編集画面では実際の商品画面(に近い画面)を見ながら操作していくことになります。

最初に全体設定を行います。左メニューのGeneral Settingsタブから「Display custom options on the product page?」と「Enable price calculation based on custom options?」をONにします。それぞれ、この商品でUni CPOプラグインを使うか、パラメータをもとに価格計算をするかの設定です。

General Settingsで機能をONにする

次に幅のフィールドを画面に追加していきます。画面左にUni CPOプラグインで利用できるパーツが表示されるので、ここからまずはレイアウト要素のRowを追加します。Rowを「Drag and drop module here!」と書かれた箇所にドラッグ&ドロップします。Rowを追加すると内部にColumnも自動で追加されます。

さらに、Text Inputを先ほどのColumnの上にドラッグ&ドロップして数値入力用のテキストフィールドを追加します。

RowとText Inputを追加

今回は木材のフリーカットを想定して板の幅、奥行き、厚みの3つを指定できるようにします。

先ほど追加したテキストフィールドにマウスフォーカスすると「Module」というメニューが現れるのでこれをクリックしてサブメニューを展開し、サブメニューから歯車マークをクリックしてモジュールの編集ダイアログを開きます。

マウスオーバーするとModuleのボタン(青色)が現れるので、展開する

モジュールの編集ダイアログの上部のタブから「Main」を選択し、以下を設定します。

  • Field slug:フィールドの名前
  • Required?:必須かどうか
  • Type of filed:入力テキストの種類。今回整数なのでIntegerを選びます
  • Minimum value:入力できる最小値
  • Maximum value:入力できる最大値
  • Step value:入力値のステップ。1mm単位で指定できるようにするので1とします
  • Label text:フィールド横に表示するラベル

入力したらSaveボタンからモジュール設定の保存を行います。

他にもMainの設定項目やタブがありますが、今回は割愛するので、気になる方は調べてみてください。例えば、Conditionタブの設定では他フィールドのパラメータに連動して、特定の値しか選択できないようにするようなことも可能です。

続けて、奥行き、厚みも設定します。幅の設定を再利用できるので、Columnごと複製すると楽です。ColumnにマウスオーバーしてColumnをクリック、サブメニューを展開してDuplicateを選んだら、歯車マークから幅同様に設定を行います。

Duplicateでカラムを複製する

ここで一度保存をしておきましょう。商品単位での保存ボタンは左メニュー内上部にあります。

商品単位の保存ボタン

ここまででフロントの商品画面を見ると幅、奥行き、厚みのパラメータを入力するテキストフィールドが追加されていると思います。

3つのフィールドを追加した状態

続いて、これらのパラメータから料金の設定を行います。再びUni CPOの編集画面を開いて今度は左メニュー上部の「Fx」と書かれたボタンをクリックします。

ここでは入力されたパラメータを使った計算式を入力します。この計算結果がそのまま価格になります。

今回は木板の体積で料金を決めようと思うので、以下のように入れます。

{uni_cpo_width}*{uni_cpo_depth}*{uni_cpo_thickness}/1000

幅、奥行き、厚みをかけてmm^3の容積を求めています。

※今回は1cm^3=1円にしようと思うので、1000で割って単位をそろえています。

なお、右上のConditional Logicを有効化して画面下部のAdd Ruleに条件を追加すると条件ごとの金額を計算できます。(例えば木材の種類を選択できるようにして、シラカバの場合は式A、ヒノキの場合は式Bなど)

この状態で商品単位の保存を行って、フロント画面から幅、奥行き、厚みを入力してカート画面に遷移してみてください。パラメータに応じて金額が計算されるはずです。

幅、奥行き、厚みの入力から料金が計算された

次に商品の重さとサイズを動的に設定できるようにします。これらはUni CPOの編集画面の左メニュー「KG」と「物差しマーク」からそれぞれ設定可能です。

「KG」では重さの関数を設定できます。まずは左上の「Weight Calculation」をONにして、重さの計算を有効化します。

今回は簡単に木材としてアカマツだけを扱っていることとします。アカマツの比重(g/cm^3)は0.5くらいということなので、計算式には以下を入れます。(mm^3→cm^3の変換とg→kgの変換で2度1000で割ります)

({uni_cpo_width}*{uni_cpo_depth}*{uni_cpo_thickness}/1000/1000)*0.5
重さの計算式

※右上の「Conditional Logic」をONにすると金額計算と同様、下部のAdd Ruleから特定条件の時の重さ計算を指定できます。例えば、木材の素材ごとに比重が違うので、素材ごとの重さ計算ができます。

続いてサイズです。「物差しマーク」から設定ダイアログを開きます。

最上部のDimensions CalculationをONにして、寸法計算を有効化します。

Measurement unitは購入者に単位を指定させる場合(そのようなプルダウンをUni CPOのパーツで用意した場合)にどのフィールドが単位指定のフィールドかを入力するものです。今回はmm固定で、最初にWooCommerceの設定で指定してあるので、「- Not selected -」のままで大丈夫です(この場合、WooCommerceの設定で指定したmmが使われます)

Length, Width, HeightはすべてONにして、それぞれプルダウンから先ほど設定した幅(uni_cpo_width)、奥行き(uni_cpo_depth)、厚み(uni_cpo_thickness)を指定してください。

サイズの指定

これで、Uni CPOプラグインで商品の料金、重さ、サイズが動的に決定できるようになりました。

Fish and Shipsプラグインを使った重さ、サイズからの送料計算方法

では、送料計算を行っていきましょう。

送料計算はWooCommerce > 設定 > 配送 > 配送地域 から行います。

ここでは北海道への配送を設定していきます。

配送地域に北海道を追加し、「配送方法の追加」で「Fish and Ships」を選びます。

配送方法に「Fish and Ships」を選択

追加したら配送方法セクション「Fish and Ships」の箇所をマウスオーバーすると「編集」リンクが現れるので、そちらをクリックします。

FIsh and Shipsの設定画面では配送地域ごとに以下の基本設定を行います。

  • メソッドのタイトル:配送方法名。購入手続きの際に表示されることがあるので「Fish and Ships」ではなく「送料」などに変更しましょう。
  • 課税ステータス:送料を課税対象にするかどうか
  • Global group-by:下記の「Group by」を有効にする場合にONにします
  • Group by [for all selectors]:商品を指定した単位でグルーピングしてグループごとに送料を出します
  • 計算タイプ:算出したグループごとの送料を合計するのか、最も高い/安いものを採用するのかを選択します
  • Set preices for every currenct:複数の通貨で定義する場合にONにします。通常はOFF
配送の計算方法を指定

そして、設定のメインとなるのは以下の重さやサイズに応じた計算ロジックです。Fish and Shipsでは様々な条件を使って送料計算が可能です。日本の配送会社の多くは「重さ」と「3辺の合計」を使って送料を決定します。これはFish and Shipsでは「Weight」や「Length+Width+Height」が相当します。

例えば、以下は「Weight」と「Length+Width+Height」を使って設定を行った例です。

ルールは上から順に評価され、条件にマッチしたものが送料として採用されます。

Fish and Shipsの送料計算設定例

※ただし、ヘルプを見ると「Length+Width+Height」を選択した場合、group byは適用されない(グルーピングできない)とあるので注意が必要です。この場合、例えば大きな商品を単品発送するショップであれば「Length+Width+Height」を使って商品個別に送料計算をするのがよいと思います。逆に小さい商品を複数一緒に発送する場合はgroup byを使って各商品の「volume」を合計して送料計算するのがよいでしょう。(volumeはgroup byを使うことができます)

例えば、ヤマト運輸さんの「60サイズ」と呼ばれるサイズ区分では、3辺の合計が60cmまで かつ 重さが2kgまでとなっています。仮に配送拠点が東京にあって北海道に「60サイズ」を送る場合の送料は1,460円です。

【ヤマト運輸 宅急便運賃一覧表:全国一覧】

https://www.kuronekoyamato.co.jp/ytc/search/estimate/ichiran.html

この条件をFish and Shipsに設定する場合、以下のようになります。

  • Weight ≦ 2kg
  • Length+Width+Height ≦ 600mm

の場合、1,460円。

ヤマト運輸さんの東京→北海道 60サイズの送料計算例

これをヤマト運輸さんの「xxサイズ」の個数分定義することでサイズと重さに従って送料を計算することができます。

※「volume」を使った場合の注意:例えば「120サイズ」を60cm x 40cm x 20cmと仮定して配送用の箱のサイズを48000cm^3とした場合、複数商品の容積の合計が48000cm^3未満だとしても商品形状によっては同じ箱に入らない可能性があることに注意してください。

最後に適当な幅、奥行き、厚みのパラメータを入力した商品をカートに入れて、北海道を配送先に指定してみましょう。

北海道の送料が重さとサイズによって計算された

無事、動的にサイズと重さが決まる商品の送料を計算することができました。

まとめ

今回は商品の価格と重さ、サイズが動的に変わる場合に便利なUni CPOプラグインとFish and Shipsプラグインを紹介しました。これでWooCommerce標準では難しい細かな料金や配送設定を行うことができますね。

料金計算については関数を使えるので、かなり自由度高く価格設定ができるようになりました。

送料計算についても理想的なものに近づけることができました。ただし、実際には多種多様な商品が配送されることが考えると、送料はかなり妥協が必要な箇所だと思っています。不定形な商品の扱い、緩衝材などの重さや容積、すべての商品の梱包の組み合わせなどまで考えると厳密な計算は不可能です。

実際の案件ではすべての要件を送料計算の仕組み(WooCommerceの配送クラスやFish and Shipsのロジック)で吸収して実現しようとするのではなく、最大サイズの商品に合わせて料金設定して、入りきらず2箱になってしまった場合は無料(ショップ側で送料負担)にするなど、ビジネスサイドの調整も含めた対応が重要なのをお忘れなく。

今回紹介したプラグインがECサイト構築の一助になれば嬉しいです!

カテゴリー: サイト制作
GLASSで一緒に働いてみませんか?