WooCommerceの基本的なセールバッジを、もっと人目を引く（そして少し退屈でない）ものに置き換えることができないかと思ったことはありませんか？
これは読者からよく寄せられる質問である。絶対にできます！
カスタム商品バッジは、オンラインストアで特別な項目を強調する素晴らしい方法です。新入荷商品を紹介したり、セール中の項目を表示したり、期間限定のオファーに注目させたい場合に役立ちます。
この投稿では、WooCommerceストアにカスタム商品バッジを追加する2つの簡単な方法を紹介します。強力なプラグインを使うか、簡単なコードを追加するかのどちらかです。
ご心配なく。各オプションを順を追ってご説明します！
☝重要な注意：このチュートリアルに従うには、WooCommerceストアが完全に機能している必要があります。まだ設定されていない場合（またはまだ設定途中の場合）は、初心者のための究極のWooCommerceガイドをご覧ください。
WooCommerce商品バッジとは？
オンラインショッピングで商品に表示される小さな「セール」や「新規」のラベルに気づいたことはあるだろうか？
これは商品バッジで、オンラインストアで特定の項目を目立たせるのに非常に便利です。
セールや新入荷、期間限定などの重要な商品情報をカスタマイザーに知らせるバーチャルステッカーとお考えください。
私たちは、店舗オーナーが商品バッジをとてもクリエイティブな方法で使用し、特価商品を紹介したり、ベストセラーを強調したり、在庫が少なくなっている項目を表示したりしているのを見てきました。
すでにWooCommerceをご利用の方はお気づきかもしれませんが、WooCommerceには基本的なセールバッジ機能があり、商品の価格を下げると自動的にバッジが表示されます。
WooCommerceのセールバッジはシンプルなニーズには適していますが、正直なところ、それでできることはかなり限られています。
バッジの外観を簡単に変更したり、新しいバッジタイプを追加したり、商品画像のどこにバッジを表示するかを正確にコントロールすることはできません。
一方、カスタマイザーはブランドの個性をよりアピールすることができます。しかし、最も重要なことは、オリジナルのバッジは、より効果的に特別な製品に注目を集めることができるということです。
そうすることで、オンラインストアの売上を増やすことができます。💰
このガイドでは、WooCommerceで商品バッジを追加・カスタマイズする2つの実証済みの方法を説明します。どちらの方法も、バッジの見た目と機能を完全にコントロールすることができます。
以下のクイックリンクからお好きな方法にお進みください：
方法1: YITH WooCommerceバッジ管理を使用する (よりカスタマイズ可能)
WooCommerceストアにカスタムの商品バッジを追加するためのお気に入りのツールから始めましょう。
YITH WooCommerce Badge Managementを使用することをお勧めします。なぜなら、オンラインストアに商品バッジを追加し、カスタマイズするのがとても簡単だからです。
さらに、購読や 商品動画を追加するプラグインなど、長年にわたって多くのYITHプラグインをテストしてきましたが、それらは常にユーザーにとって素晴らしいものでした。
休暇中に特別なバッジを表示したいですか？あるいは、カスタマイザーがどれだけお得になるかを表示したいですか？このプラグインならすべて可能です。特定の時間にバッジを表示し、後で非表示にすることもできます。
プラグインは無料版とプレミアム版のどちらからでも始めることができます。無料版は、シンプルなテキストや画像のバッジを商品に追加したい場合に最適です。
このガイドでは、プレミアム版の使い方をご紹介しますが、ほとんどの手順はどちらも同じです。割引額が自動的に表示されるバッジなど、いくつかのクールな機能はプレミアムバージョンにしか付いていないことを覚えておいてください。
注：プレミアムバージョンは、すべての機能を使用する場合、年間$79.99かかります。これは高いと思われるかもしれませんが、商品バッジをカスタマイズする方法がたくさんあり、思い通りのバッジを作ることができるので、その価値はあると思います。
始める準備はできましたか？まず、YITHのサイトからプラグインを購入する必要があります。
その後、YITHアカウントにログインし、「ライセンスとダウンロード」タブに移動し、「プラグインのダウンロード」ボタンをクリックしてファイルをダウンロードします。
ヒント：ダウンロード後にこのページを閉じないこと。そこに表示されているライセンスキーが必要になるからだ。
次に、WordPressのダッシュボードに行き、プラグインをインストールします。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化すると、YITHのメールとライセンスキーを求めるセットアップ画面が表示されます。YITHのサイトからこれらをコピーし、「ライセンスを有効化する」をクリックするだけです。
ライセンスが有効化されたというメッセージが表示されれば、すべて完了です！
プラグインダッシュボードへ’をクリックすると、最初のカスタムバッジの作成が始まります。
ステップ1: WooCommerceセールバッジの初期設定を非表示にする
まず、WooCommerceのビルトインセールバッジを非表示にして、カスタム商品バッジとぶつからないようにする必要があります。
手順はとても簡単です。WordPressダッシュボードに行き、YITH ” Badge Managementをクリックします。そして、「一般設定」タブに移動します。
ここで、「WooCommerce “On sale “バッジを非表示にする」というオプションが見つかります。それをオンにしてください。
次に、「”セール中 “を非表示にする：」で「すべての商品」を選択し、初期設定のバッジがストアのどこにも表示されないようにします。
設定中に他の便利なオプションに気づくかもしれません。サイドバーや個別商品ページなど、特定の場所でカスタマイザーを非表示にすることができます。
これは、店舗をすっきりと整理して見せたい場合に最適です。例えば、モバイルサイトが混雑していると感じたら、バッジを非表示にすることもできます。
設定が終わったら、ページ下部の「オプションを保存」ボタンをクリックするのをお忘れなく。
ステップ2: カスタマイズバッジの作成
WooCommerceでカスタマイザーバッジを作成しましょう！
バッジ」タブに移動し、「バッジを作成」ボタンをクリックしてください。
このプラグインでは、テキストバッジ、画像バッジ、CSSバッジ、販売商品用アドバンスバッジの4種類からバッジを選ぶことができます。
それぞれのタイプで、商品を強調するユニークな方法を作ることができます。例えば、”New Arrival”（新入荷）や “Vegan Friendly”（ビーガンフレンドリー）のように商品を強調したい場合は、最初の3つのオプションが最適です。
割引バッジを作成する場合は、商品の価格変更に基づいて自動的に更新されるアドバンスオプションを使用することを強くお勧めします。
バッジの種類を選んだら、その用途を覚えやすい名前を付けましょう。
Imageバッジ、CSSバッジ、アドバンスドバッジのいずれかを選択すると、プラグイン内にあらかじめ用意されたバッジデザインのコレクションが表示されます。
お好きなものをお選びください。これらのすぐに使えるバッジはあなたの時間を節約し、WooCommerceページのスタイルに一致するようにカスタマイズすることができます。
このプラグインは、そのカスタマイズオプションで本当に輝きます。どのバッジタイプを選んだかにもよりますが、バッジを商品画像に完璧に表示させるためにすべての設定を調整することができます。
色を変えたい？簡単です。
透明度を調整する必要がありますか？問題ありません。
また、バッジを回転させたり、ちょうど良い場所に配置されるまで製品上で移動させたりすることもできます。
この例では、バッジの色を赤に変え、商品画像の右上に配置することで、バッジをとてもポップにしました。
このような小さな調整で、バッジが人々の注目を集める効果に大きな違いが生まれます。
すべての見た目に満足したら、「バッジを保存」をクリックして終了です。
ステップ3：バッジを表示するルールを作成する
カスタマイザーを作成したので、WooCommerceにバッジを表示する場所とタイミングを指示しましょう。
バッジルール」タブに移動し、「ルールを設定」をクリックします。
ルールは、商品画像にバッジを表示するタイミングを指示するものと考えてください。
このプラグインは、バッジを表示する場所をコントロールする4つの主な方法を提供します：商品バッジ、カテゴリーバッジ、タグバッジ、配送クラスバッジ。
特定の項目にバッジを追加する場合は「商品バッジ」ルールを、商品カテゴリー全体にバッジを追加する場合は「カテゴリーバッジ」ルールを選択できます。
一方、タグバッジルールは、同じWooCommerceタグを共有する商品にバッジを表示し、配送クラスバッジルールは、配送設定に基づいたバッジを表示します。
それぞれのルールが対象とする製品の側面は異なるが、すべて似たような働きをする。ですから、あなたのニーズに最も適したものを選ぶ必要があります。
最も一般的な選択なので、この例では製品バッジのルールを使おう。
次に、ルールにわかりやすい名前をつけて、後で簡単に見つけられるようにする。
次に、’バッジを表示する:’設定を探します。ここで、どの商品にバッジを表示するかを決めます。すべての商品、最近追加された商品、セール中の項目、人気の商品、在庫のある商品などにバッジを表示することができます。
セール項目のルールを作成するとします。セール商品’を選択すると、セール商品としてマークするたびにバッジが自動的に表示されます。とても簡単です！
しかし、オプションによっては、さらに多くの設定が可能です。例えば、’最近の商品のみ’を選ぶと、最近数日以内（7日、14日、30日など）に追加された項目にバッジを表示するように設定できます。
これにより、手動で各商品にバッジを追加することなく、新着商品を自動的に強調表示することができます。
時には、特定の商品にバッジをつけないようにしたいこともあるでしょう。そんな時に便利なのが「除外商品」設定です。
この設定を有効化し、バッジを表示したくない商品名を入力するだけです。これらの項目は、他のルールに一致していても、バッジが表示されないままになります。
次に、’割り当てるバッジ’ドロップダウンで使用するバッジデザインを選択します。
さて、ここからが本当にフレキシブルになります。バッジの外観をスケジュールしたり、誰に見せるかを選択することができます。
スケジュールルール」オプションは、期間限定のお得な情報に最適です。
プラグインを有効化すると、バッジの開始日と終了日を設定するよう求められます。
また、特定のカスタマイザーに特別なバッジを表示したい場合、例えば「VIP割引」バッジを最も忠実なカスタマイザーにのみ表示することも可能です。
これを行うには、’バッジを表示する’設定で’特定のユーザーまたはユーザー権限グループのみ’を選択するだけです。そして、その下にお好みのユーザー権限グループまたはユーザー名を入力してください。
すべてがうまくいったら、『ルールを保存』をクリックすれば準備完了だ！
あなたのストアのフロントエンドで、新しい商品バッジを実際にご覧ください。
セール項目にアドバンスバッジタイプを使用している場合、割引率と実際の割引額の両方が表示され、カスタマイザーが最もお買い得な商品をすばやく見つけることができます。
💡関連投稿：WooCommerceストアを改善するためのクールなツールや戦略をお探しですか？最高のWooCommerceプラグインのリストをご覧ください。
方法2：カスタムコードを使う（無料で簡単）
最初の方法のような高度なオプションが必要ない場合、あるいは完全に無料のオプションをお探しの場合は、コストがかからないシンプルなコードを使用する方法があります。
コードが苦手な方もご安心ください！WPCodeプラグインを使えば、超簡単で安全です。このプラグインを使えば、開発者になることなく、またサイトが壊れてしまうリスクを冒すことなく、WordPressにカスタム・コード・スニペットを追加することができます。
このチュートリアルでは、WPCodeの無料版を使います。とはいえ、AIコードジェネレータやテストモードなどのクールな機能を備えたプレミアム版もあります。
詳しくは、WPCodeの詳細レビューをご覧ください。
まず、WordPressプラグインを管理エリアにインストールする必要があります。
次に、コード・スニペット ” + スニペットの追加に進みます。カスタムコードの追加（新規スニペット）」セクションにマウスオーバーし、「+カスタム・スニペットの追加」ボタンをクリックします。
次に、コードタイプについて尋ねられたら、「PHP Snippet」を選択する。
これはWordPressにコードのタイプを伝える。
さて、スニペットに名前をつけて、そのスニペットが何をするのかを覚えておくのに役立つようにしなければならない。
このコードは初期設定のWooCommerceセールバッジを削除し、新商品バッジとダイナミックディスカウントバッジの両方を追加するので、”カスタムWooCommerceバッジ “のように呼ぶことができます。
それが完了したら、以下にプロバイダーが提供するコード・スニペットを「コード・プレビュー」ボックスに貼り付けます。
このコードはとてもクールなことをする。自動的に割引率を計算し、販売バッジに表示します。さらに、過去7日間に追加された商品に「新規」バッジを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | // Remove default WooCommerce sale flash badgeremove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );// Add custom badges to productsadd_action( 'woocommerce_before_shop_loop_item_title', 'add_custom_product_badges', 10 );function add_custom_product_badges() { global $product; // Initialize a variable to track whether a badge has been displayed $badge_displayed = false; // For products with any amount of discount percentage (1% or more) if ( $product->is_on_sale() ) { // Get regular and sale prices $regular_price = floatval( $product->get_regular_price() ); $sale_price = floatval( $product->get_sale_price() ); // Handle variable products if ( $product->is_type('variable') ) { // Get variation prices $regular_price = floatval( $product->get_variation_regular_price( 'max', true ) ); $sale_price = floatval( $product->get_variation_sale_price( 'min', true ) ); } // Calculate discount percentage if regular price is valid if ( $regular_price > 0 ) { $discount_percentage = ( ( $regular_price - $sale_price ) / $regular_price ) * 100; // Display badge if discount is 1% or more if ( $discount_percentage >= 1 ) { echo '<span class="product-badge sale-product">' . round( $discount_percentage ) . '% off!</span>'; $badge_displayed = true; // Badge has been displayed } } } // Only show the "New" badge if no other badge has been displayed if ( ! $badge_displayed ) { // For "New" products added in the last 7 days $post_date = get_the_time( 'Y-m-d', $product->get_id() ); $post_stamp = strtotime( $post_date ); $newness = 7; // Number of days the product is considered new // Check if the product is new if ( ( time() - ( 60 * 60 * 24 * $newness ) ) < $post_stamp ) { echo '<span class="product-badge new-product">New</span>'; $badge_displayed = true; } }} |
商品が「新規」とみなされる期間を調整したいですか？コードの$newness = 7という行を探してください。この7という数字を、2週間なら14日、1ヶ月なら30日というように、好きな日数に変更することができます。
最後に、『有効化した』ボタンが『有効化』に変わるまで『無効化』ボタンをクリックし、『スニペットを保存』を押す。
次に、バッジのスタイルを整えて、製品に映えるようにしましょう。CSSを追加して外観を調整しましょう。
新規スニペットを追加するには、前回と同じ手順を踏みますが、今回は質問されたら「CSS Snippet」を選びます。
スニペットには、”Product Badge Styles “のような分かりやすい名前を付けてください。こうすることで、後で変更が必要になったときに簡単に見つけることができます。
あなたのバッジをプロフェッショナルに見せるCSSコードはこちらです。これを「コードプレビュー」ボックスに貼り付けるだけです：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* Common styles for all product badges */.product-badge { position: absolute; top: -10px; /* Position at the top edge */ right: -10px; /* Position at the right edge */ padding: 12px 16px; border-radius: 50%; color: #ffffff; font-size: 16px; font-weight: bold; z-index: 99; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);}/* Styles for the "New" badge */.new-product { background-color: #4CAF50; /* Green background */}/* Styles for the "Sale" badge */.sale-product { background-color: #FF0000; /* Red background */} |
このコードでカスタマイズできることを分解してみよう。
バッジの位置を変えたいですか？そのためには、topと rightの値を変更します。例えば、top：-を top：10pxに変更すると、バッジが下に移動します。
色が気に入らない？色を変えるのはとても簡単です。背景色の線を見つけて、カラーコードを置き換えるだけです。
例えば、セールバッジを赤ではなく青にしたい場合は、#FF0000を #0000FFに変更します。また、フォントサイズの値を調整することで、バッジを大きくしたり小さくしたりすることもできます。
これらのスタイルの調整についてさらに詳しく知りたいですか？WordPressのCSSに関する初心者向けのガイドをご覧ください。
完了したら、「Inactive」ボタンをクリックして「Active」にし、「Save Snippet」をクリックします。
それだけだ！
これで商品画像にバッジが表示されるはずです。CSSコードを使った例です：
WooCommerceのヒントとコツをもっと見る
WooCommerceで商品バッジを表示する方法はお分かりいただけたと思います。お勧めのガイドをいくつかご紹介します：
- スマートなアップセルで売上アップ– 関連商品を戦略的に宣伝し、効果的なアップセル戦術で平均注文額を増やす方法を学びます。
- カスタマレビューにクーポンで報いる– 商品レビューを残したカスタマに割引クーポンを自動的に送信し、より多くのフィードバックとリピート購入を促す方法をご紹介します。
- スマートなおすすめ商品の表示– WooCommerceの売上を急上昇させるおすすめ商品の表示方法をご覧ください。
- よく一緒に購入される商品を表示する– WooCommerceでよく一緒に購入される商品を表示して売上を伸ばす方法をご紹介します。
- 高度な商品フィルター設定オプションの追加– カスタマイズ可能な商品フィルターで、顧客が探している商品を的確に見つけることができるようになり、ショッピングがより簡単かつ迅速になります。
- カスタマーウィッシュリスト機能の作成– ウィッシュリスト機能を追加することで、いかにエンゲージメントを高め、カスタマイザーに再来店の理由を与えることができるかをご覧ください。
- WooCommerceで価格を非表示にする– 卸売顧客、オンラインカタログ、高級品の価格を非表示にし、代わりに買い物客に連絡するかログインするよう依頼する方法をご紹介します。
この投稿がWooCommerceで商品バッジを追加する方法を学ぶのにお役に立てば幸いです。WooCommerce プロダクトグリッドプラグインや WooCommerceのパフォーマンスを高速化する方法についてもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.