売り切れの際、お問い合せボタンを表示
スポンサーリンク
※カスタマイズ方法をフックを使った簡単なものに変更しました為、大幅に加筆修正しました（2014/4/6）。
商品が売り切れの際、折角ページを見て下さったお客様をがっかりさせるだけで終わらせていないでしょうか？
photo by Joshua Ganderson
Welcartでは、売り切れになるとカートボタンが「売切れ」という表示に自動的に変わります。
これを「売切れ」表示ではなく、「お問い合わせ」ボタンに変えて、見込み客を逃さないようにするためのカスタマイズです。
利用するフック
- フックの記載：usces_filters_single_sku_zaiko_message
- フックの場所：use-e-shop/templates/single_item.php
Welcartデフォルトテーマにも同様のフックがあるので、以下のカスタマイズ方法で変更が反映されます。
カスタマイズの方法
1. functions.phpをカスタマイズ
利用中のテーマのfunctions.phpに、以下の文言を追加します。
add_filter('usces_filters_single_sku_zaiko_message', 'my_filters_single_sku_zaiko_message', 10, 3);
function my_filters_single_sku_zaiko_message($inquery_button){
$inquery_button = '<a href="'. home_url('usces-inquiry').'" class="inquery_button">お問い合せ</a>';
return $inquery_button;
}
ここでは、「売切れ」の文言の代わりに、「お問い合せ」というaリンクタグを表示させるようにしています。リンク先はWelcartのお問い合わせページ（usces-inquery）です。
これだけでは、まだ単なるテキストリンクのままなので、次にボタン風に装飾しましょう。
2. aリンクをCSSでボタン風に装飾
CSSボタンの作成は、CSS Button Generatorなどが便利です。
グラデーションや角丸など、簡単に設定することができます。
好きなボタンのデザインが決まったら、画面下に出てくるコードをコピー。利用中テーマのstyle.cssにペーストします（※<style type=”text/css”>と</style>はいりません）。font-familyなどの設定は、不要なら消してしまっても大丈夫です。
注意！コピー元のコードのクラス名（.css_btn_class）では、上記のaリンクのクラスをcss_btn_classと設定していないとスタイルシートが適用されません。上記のカスタマイズコードをそのままお使いになる場合のクラス名は「inquery_botton」となりますので、適宜変更して下さい。
これで完成です！
複数SKUでも同様のフックが設置されている為、上記のカスタマイズを行えば自動的にこちらも変更されます。
問い合わせボタン設置前
問い合わせボタン設置後
※尚、上記の説明画像では「小さなECサイトのWordPress+Welcart導入・設定ガイド」p.188の「カート投入ボタンの位置を変更する」カスタマイズを行っています。
[…] 売り切れの際、お問い合せボタンを表示 […]