大きな枠として「お買い物カゴ」という枠があります。

そして、その中に「商品が入ってた買い物カゴ」と「空の買い物カゴ」という二つのグループが存在します。デフォルトでは「商品が入ってた買い物カゴ」のブロックが見えている状態になっています。

言葉通り、商品がある場合の見え方と、空の場合の見え方を変更することができます。

そして、その二つのブロックの中をグーテンベルクのやり方で変更することができるようになっています。

次に左側に「お買い物カゴの合計」というブロックでカートの金額等の表示を行うブロックとなっています。

「ご注文内容」のブロックの中に「見出し」「クーポンフォーム」「小計」「手数料」「割引」「送料」「税」というブロックが縦に並ぶ形で設定されています。

その下に「エクスレスチェックアウト」のブロックがありますが、有効な支払い方法の中にエクスプレスチェックアウトがある場合はここに表示されることとなります。

その下にボタンとして「購入手続きに進む」という物があります。今まででしたら、このボタンの文言を変更する場合はフック関数でカスタマイズしないといけなかったのですが、ブロックでは簡単に変更することができます。

大きな枠として「購入手続き」という枠があります。

そして、その中に「購入手続きフィールド」と「購入手続きの合計」という二つのグループが存在します。

デフォルトでは、左側に住所などの内容で、右側に金額の詳細が表示される形になっています。

購入手続きブロックは、買い物カゴブロックと違って、並び替えなどは変更できない仕様になっています。入力順に関しては変更はできません。ただ、それぞれの項目の間にテキストなどを入れて、入力時の注意事項などは簡単に入力できるようになっています。

決済などの関係もあるので、自由度は低くなっているものの、以前ではフック関数を使わないといけないのですが、色々と説明をつけたかった場面に簡単に説明をつけられることによって、簡単に運営側で更新ができるようになったので、より多くのカスタマイズがノーコードで進めることができるようになりました。

こちらも、先のブロックと異なり、買い物カゴブロックと同じように上下の順番を変えることができます。

一番下にお買い物カゴの内容を表示するような変更が可能です。

まあ、あまり変えなくても良いと思いますが、何かこの辺りにこだわりがある場合などはプログラムでカスタマイズする事なく変更することが可能です。