*

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

公開日: : 最終更新日:2013/08/06 未分類

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

welcart注文完了画面編集

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

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

welcart注文完了画面編集フォルダwp-content  >    welcart注文完了画面編集フォルダplugins  >    welcart注文完了画面編集フォルダusc-e-shop  >    welcart注文完了画面編集フォルダtemplate  >   welcart注文完了画面編集フォルダcart  >   welcart注文完了画面のカスタマイズフォルダ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]

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

welcart注文完了画面の編集方法

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

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

ad

関連記事

no image

WordPressテーマ「stinger」にはメタキーワードタグとディスクリプションタグが無い!?

SEOにつよいWordpressテーマ「stinger」には、「meta keyword」、「met

記事を読む

no image

2.ワードプレスが使えて、広告の表示が無い無料レンタルサーバーwkey.meでサイトを作る

完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する

記事を読む

no image

[welcart]商品複合検索ページの ①「カテゴリー : AND検索」という題文を変える ②チェックボタンと文字のスペースを空ける方法

①ウェルカートの商品複合検索ページはデフォルトで題が カテゴリー : AND検索 となっていま

記事を読む

no image

[Welcart]複合検索をチェックしたもの全て表示させる

Welcartの複合検索はデフォルトではチェックしたすべてに当てはまらないとヒットしないようになって

記事を読む

no image

[Welcart]会員のログイン状態とログアウト状態でリンク先を変える

Welcartでウィジェットのログイン・ログアウト状態によって表示を変えたり、リンク先を変えたりした

記事を読む

no image

[WordPress]WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる

WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる方法 &n

記事を読む

no image

未来サーバーの無料で広告が出ないプランでwordpressをインストールしてサイトを作成する方法

未来サーバーの無料で広告が出ないプランででwordpressをインストールしてサイトを作成する方法を

記事を読む

no image

[Windows7]ファイル拡張子ごとのアイコンを簡単に変更する方法

Windows7 でファイルを拡張子ごとにアイコンを変えたいときの方法です。 たとえば、txtファ

記事を読む

no image

Adobeのソフトのアイコンが正しく表示されない時の直し方(Photoshop・Illustrator・Flash・Fireworks・Bridge・Extension Manager等)

AdobeのCS6を購入し、インストールしたのですがいくつかのソフトのアイコンが正しく表示されない現

記事を読む

no image

[HTML/CSS]classかつclassでセレクタを指定するときの方法(2つ以上複数のclassで指定するとき)

WordPrsssを使っているとbodyクラスが大変便利ですが、トップページもその他ページも「固定ペ

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ad

PAGE TOP ↑
  プロフィール  PR:無料HP  合宿免許 大型  ファクタリング 評判  プログラマー 専門学校  オートエクゼ  中古ホイール 福井  タイヤ パッソ 新品  体育教員 大学  レカロ 中古  ブレスレット  保育士 短期大学  音楽 専門学校 福岡  サニー 日産 中古  名簿屋