WooCommerce 注文確認画面追加プラグイン

説明

WooCommerce 注文確認画面追加プラグイン

WooCommerceで注文時に注文内容の確認画面を追加することができます！
標準設定では決済画面で注文するボタンを押すとすぐに注文処理がされてしまいます。お客様の住所が誤ってしまっていた、決済方法を変更して欲しいとお問い合わせがあったことはありませんか？　このプラグインを使えば、簡単に確認画面が追加できます♪複雑な設定は必要ありません！

[特徴]
・注文を完了する前に支払い画面で入力した情報を確認できます。
・複雑な設定は不要で、プラグインを有効化するだけです。

[使い方]
・プラグインをWoocommerceへインストールし有効化します。

導入例

注文確認ボタンにボタンが変更されます。

確認画面が表示されます。

カスタマイズ

WordPressテーマによっては、プラグインを有効化しただけでは思ったような表示にならない場合もあります。

牧野 あかり

確認画面を表示したときに、隠れてほしい要素が

表示されたままになるんですけど…！

Before

その場合はテーマのfunctions.phpファイルにwcdc_hidden_contentフィルターをちょっと書き足すだけです！

デフォルトで隠蔽されるセレクタは「header,#content,footer」となっています。
この場合、headerタグ、footerタグ、id属性がcontentのタグ（div#contentなど）が隠れます。
テーマによってはこのままだと適切な表示にならない場合もありますので、たとえば以下のように書きます。

add_filter('wcdc_hidden_content', 'example_wcdc_hidden_content');
function example_wcdc_hidden_content( $hidden_content ) {
 $hidden_content .= ',div.main'; // 隠蔽要素を追加
 return $hidden_content;
}

牧野 あかり

これでmainクラスのdivタグも隠れるようになりますね！

スッキリしました。

After

 追加HTML表示機能

確認画面のいちばん下に、任意のHTMLコンテンツを追加表示できます。

まずバージョン1.1.0で追加された設定メニューを開きます。
「設定 > Woo確認画面設定」からアクセスできます。

「追加表示用コンテンツ（HTML）」欄に表示したいコンテンツを入力します。

一般的なWordPress投稿と同等のHTMLタグが使えます。
フロントエンドの表示を確認して、ご使用のWordPressテーマのstyle.cssなどからデザインを調整しましょう。

ここでは以下のようなCSSを設定しています。

div.wcdc-additional-html {
border: 1px solid gray;
margin-top: 2em;
padding: 1em;
height: 15em;
overflow: auto;
}

牧野 あかり

改正特定商取引法に厳格に準拠した確認画面にしたい！

というご要望にお応えしました。

動作確認情報

アップデート情報