「お勧め商品」ウィジェットに、価格を表示させる方法

スポンサーリンク

Welcartをインストールすると自動で作られる「お勧め商品(スラッグ:itemreco)」カテゴリーに商品を分類させると、「Welcart お勧め商品 ウィジェット」で表示させることが出来ます。

Welcart お勧め商品 ウィジェット

ただ、デフォルトでは画像と商品名・SKUコードのみの表示です。何か素気ない。

Welcart お勧め商品 デフォルト表示

というわけで、今回はこれをカスタマイズしてみました。

もくじ

  1. 使用するフックとフックの場所
  2. functions.phpにコードを記載
  3. 価格を表示させる場合
  4. SKUコードを消したい場合
  5. まとめ

1. 使用するフックとフックの場所

今回はフィルターフックを利用します。フックが設置されている場所は以下の通りです。

  • フックの記述…usces_filter_featured_widget
  • フックの場所…usces_featured.php

2. functions.phpにコードを記載

フィルターの基本的な形は、以下のような記述になります。使用中テーマのfunctions.phpに記載。

add_filter( 'usces_filter_featured_widget', 'my_filter_featured_widget', 10, 4 );
function my_filter_featured_widget($list, $post, $list_index, $instance){
 $list .= /*ここに表示させたい内容*/
 return $list;
}

/*ここに表示させたい内容*/ に表示させたいものを記載すれば、既に表示されている画像や商品タイトルに追加される形で、任意の内容を出力することが出来ます。

もしも画像やタイトルなど全ての出力を変えたい場合は、3行目の$list .=の「.」(ピリオド)を消して下さい。$list =以降に書かれた内容だけを出力させることが出来ます。

3. 価格を表示させる場合

価格を追加して表示させる場合は、上述の通り$list .=の中身を変更。

add_filter( 'usces_filter_featured_widget', 'my_filter_featured_widget', 10, 4 );
function my_filter_featured_widget($list, $post, $list_index, $instance){
    $list .= usces_the_itemPriceCr('return');//価格
    $list .= usces_guid_tax('return');//税込・税別の表記
return $list;
}

タイトルに続けて、価格が表示されるようになります。

Welcart お勧め商品に価格を表示

価格が追加されました。

4. SKUコードを消したい場合

SKUコードは、プラグインが標準で$listにより出力するようにしているため、その$list自体を書き換える方法で対応します。

add_filter( 'usces_filter_featured_widget', 'my_filter_featured_widget', 10, 4 );
function my_filter_featured_widget($list, $post, $list_index, $instance){
    global $usces;
    $post_id = $post->ID;
    $list = '<div class="thumimg"><a href="' . get_permalink($post_id) . '">' . usces_the_itemImage(0, 150, 150, $post, 'return' ) . '</a></div>';
    $list .= '<div class="thumtitle"><a href="' . get_permalink($post_id) . '" rel="bookmark">' . $usces->getItemName($post_id) . '</a></div>';
    return $list;
}
Welcart お勧め商品 SKUを削除

SKU表示が消えました。

この場合は、$listという変数の中で$post_id$uscesという変数を使うため、$listを使う前の3・4行目で、予めそれらの定義を行っています。

SKUを消した上記コードに、価格を表示させるコードを加えると、以下のようになります。

add_filter( 'usces_filter_featured_widget', 'my_filter_featured_widget', 10, 4 );
function my_filter_featured_widget($list, $post, $list_index, $instance){
    global $usces;
    $post_id = $post->ID;
    $list = '<div class="thumimg"><a href="' . get_permalink($post_id) . '">' . usces_the_itemImage(0, 150, 150, $post, 'return' ) . '</a></div>';
    $list .= '<div class="thumtitle"><a href="' . get_permalink($post_id) . '" rel="bookmark">' . $usces->getItemName($post_id) . '</a></div>';
    $list .= usces_the_itemPriceCr('return');
    $list .= usces_guid_tax('return');
    return $list;
}
Welcart お勧め商品 SKUを削除して価格を追加

SKUがなくなり、価格が追加されました。

5. まとめ

ウィジェットを使えば、お客様に見て頂きたい商品を常に画面上に表示させることが出来ます。

価格を表示させるのはもちろんですが、お客様には必要ないSKUを削除するなど、最適化させて使えればいいですね。

4 Responses to “「お勧め商品」ウィジェットに、価格を表示させる方法”

  1. mutenka より:

    探しまわってたどり着きました。
    SKUのコードは消えますが、このような表記になります。
    ¥0(税別)
    テンプレートは「welcart_minimum」を使ってます。

    • まめ子(管理人) より:

      うーん、usces_the_itemPriceCrがうまく作動していないように思われます。その辺の本体のコードを分析しながら色々試してみて下さい。今は検証する時間的余裕がないもので、アイディアのみでお許しを・・・。有料テーマについては何とも中身はわからないです。すみません。

      • mom より:

        私も同様の事象となりました。
        welcartのバージョンにより、「usces_the_itemPriceCr」が使えないのではないでしょうか?
        v1.1からコード仕様が変更になっているようです。
        現時点の当方バージョン1.4.13 ですが、ご提示されている下記コードの一部を書き換えることで正常に価格表示できるようになりました。
        $list .= usces_the_itemPriceCr(‘return’);

        $list .= usces_the_firstPriceCr( ‘return’, $post );

        試してみてください。

        • まめ子(管理人) より:

          ご検証有難うございます。私の環境でもWelcart1.4.13ですが、当記事のコードで再確認したところ、正常に表示されました。

          usces_the_itemPriceCrは、コアファイルと見ると、

          function usces_the_itemPriceCr($out = '') {
          global $usces;
          $res = esc_html($usces->get_currency($usces->itemsku['price'], true, false ));
          $res = apply_filters( 'usces_filter_the_item_price_cr', $res, $usces->itemsku['price'], $out );
          if($out == 'return'){
          return $res;
          }else{
          echo $res;
          }
          }

          という設定になっていますので、1.4.13なら引数は一つ(return)で問題ないと思うのですが・・・。$postを追加すると価格が正常に出るというのも少々不思議です。

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.