最終更新日  2022年11月2日

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

¥5,000 (税込)

商品コード: tr-wcdcカテゴリー: ,

説明

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;
}

牧野 あかり
牧野 あかり

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

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

 

動作確認情報

 WordPress Ver5.7.2
 WooCommerce Ver5.5.2

アップデート情報

日付Ver内容
2022/11/21.1.0確認画面の末尾に追加HTMLを表示する機能を実装
2022/4/151.0.6配送方法欄が空欄になるバグを修正しました。
2022/4/41.0.5複数の配送方法がある場合の表示を修正しました。
2022/1/191.0.4wcdc_hidden_contentフィルターを追加。確認画面表示の際に隠蔽する対象セレクタの変更が可能になりました。
2021/12/221.0.3他プラグインによる追加バリデーションが確認画面表示前に実行されないケースがあったのを修正
2021/9/171.0.2無効inputを非表示化
2021/9/131.0.1注文確認画面の表示不具合対応
2021/9/71.0.0リリース

商品コード: tr-wcdc

タイトルとURLをコピーしました