[Welcart] 注文完了画面をCSSでカスタマイズする

Welcartをオリジナルテンプレートで作成した場合、注文完了画面が下記図のように「送信が完了しました」と「お買い上げありがとうございました。」、「ご不明な点などがございましたら、お問合せよりご連絡ください。」、「トップページへ戻る」ボタンが、左に寄っていますよね。これを真ん中にスタイルシートで中央に寄せてみましょう。

それには、この文字を生成しているソースをいじる必要があります。

以下の階層を参考wordpressフォルダから「completion.php」を見つけて、エディタで開いてください。

wp-content  >    plugins  >    usc-e-shop  >    template  >   cart  >   completion.php

そして中のソースの以下のところに class名 を追加します。

●8行目

class=”sample_h3″　　を追加　(※クラス名なので名前はなんでもOK)

[html]$html .= ‘<h3 class="comlete_order sample_h3">’.__(‘It has been sent succesfully.’, ‘usces’).’</h3>’."n";[/html]

●10行目

sample_header　　を追加　(※クラス名なので名前はなんでもOK)

[html]$html .= ‘<div class="header_explanation sample_header">’."n"; 　　[/html]

●19行目

sample_footer　　を追加　(※クラス名なので名前はなんでもOK)

[html]$html .= ‘<div class="footer_explanation sample_footer">’."n";　　　　　　　　　　　　　　　　　　　　　　　　　[/html]

●25行目

class=”sample_send”　　を追加　(※クラス名なので名前はなんでもOK)

[html]$html .= ‘<div　class="send complete_send"><input name="top" type="submit" value="’.__(‘Back to the top page.’, ‘usces’).’" /></div>’."n";[/html]

ここまでできたらあとはstyle.cssでクラス名に対して指示を出すだけです。

style.css を 開いて、下記のように記述します。

[css].sample_h3
{text-align: center;}
.sample_header
{text-align: center;}
.sample_header {text-align: center;}
.sample_send {text-align: center;}
[/css]

これで下図のように中央に寄ります。

※反映されないときはキャッシュが残っている可能性があります。注文事項記入画面でF5キーを押してリセットしてみてください。

もっとデザインを変えたい場合は先ほどのクラス名にいろいろ指示を与えればいいですね☆