WooCommerce支払いページのデザイン崩れについて

WooCommerceに支払い画面がありますが、デザイン崩れを起こしていて、表示が変でした。今回はその時に対応したことを書きます。

ちなみにWooCommerceの説明ですが、WordPressでECサイトを実装できるプラグインです。

デザイン崩れが起こった事象

先日、WooCommerceを導入しました。支払いページを見ると、どうもレイアウトがおかしいなーと思いました。

上図のように、文字の幅が明らかに狭すぎます。そして、真ん中にぽっかりとスペースが空いていました。

これはWooCommerceの仕様ではなくて、デザインが崩れているなと判断しました。

原因は？

このサイトは、私自身が作ったThemeを使用しています。このThemeが原因でWooCommerceの表示が、一部上手くいきませんでした。

上図の赤枠の部分が、コンテンツ内の半分の横幅で表示される設定なのが、12分の1の横幅になっていました。だから文章の横幅が凝縮された変な表示になってしまいました。

他のThemeでも起こる可能性はあります。

今回の事象ですが、私が作ったThemeだからということはあります。しかし、他のThemeでも十分に起こりうると思います。CSSにはフレームワークというものがあり、その代表的なフレームワークにBootstrapというものがあります。そのBootstrapで作られたThemeは、今回のようなことが起きる可能性は十分にあります。

対応方法

CSSの一部を書き換えて対応しました。赤枠の部分が横幅半分で表示されてレイアウトが見やすくなりました。

下記にコードを記載しておきます。もし同じ現象になったのであれば、CSSファイル（たぶんstyle.css）にコピペください。ケースバイケースだと思いますが、解決できるかもしれません。

See the Pen WLKzdZ by Kazuhiro Maeda (@kazurou147) on CodePen.