注文手続きの配送先住所＆請求先住所のレイアウトを変更する方法 | CS-Cart

CS-Cart 標準の注文手続きにおいて、配送先住所や請求先住所を変更する方法についてまとめました。
※現バージョン（CS-Cart v4.11.5-jp-1以前）では姓名が一つのフィールドに統合されますが、次期バージョン（2021秋リリース予定）では姓と名が分離される良いです。

↑こちらがインストールした状態の注文手続きで表示される配送先住所です。
この記事では、以下のような形式（より見慣れた形式）に変更する方法です。

※このステップは、現バージョン（CS-Cart v4.11.5-jp-1以前）のみ必要となります。
2021年秋にリリース予定の新バージョンでは作業不要です。

ここでは日本語版アドオンのスタイルシート（LESS）ファイルを使用します。
お使いの環境に合わせて別のファイルでも構いません。
design/themes/responsive/css/addons/localization_jp/styles.less

この記述を行うと、以下のようにタイトルが「改行」されます。
改行が不要だという場合はこのステップは不要です。

デザイン＞レイアウト＞購入手続きロケーションで構造を確認しましょう。

対象となるのは、この二つのブロックです。

このように、配送先住所、請求書先ブロックは記入する住所情報などが並んでいます。
順番を変更したい場合は、項目をドラッグして順番を入れ替えることが可能です。
サンプルでは、電話番号を一番最後に変更しました。（お好きな内容に変更することが可能です）

これらの内容はどこで定義されているのでしょう？
CS-Cartを何度か触ったことのある方は気が付いたかもしれませんが、これらは「会員情報フィールド」で定義したものが並んでいます。
一般設定＞会員情報フィールドに進んでください。

それぞれの項目を確認してください。
試しに「姓」を開きました。

表示された画面で『ユーザー定義ラッパーCSSクラス』に注目してください。
ここにクラス名を設定することで注文手続きで表示される住所の項目の幅を変更することができます。
ご自身でCSSを用意しても構いませんが、CS-Cartはデフォルトで以下の長さのクラスがあらかじめ定義されています。

※上記に存在しない「litecheckout__field–full」などのクラス名を指定すると全幅にすることができます。

これを利用して以下のように各項目の「ユーザー定義ラッパーCSSクラス」を設定しました。

いかがでしたでしょうか。
ユーザー定義ラッパーCSSクラスに用意されているクラスを設定することで
各項目をお好きな幅に設定することができるのでぜひお試しください。

※次期バージョンでは、インストール直後はこのような形式でご利用いただけます。