ポチップ│特定の商品におすすめのラベルをつけるカスタマイズ

2022.04.182026.10.21

商品カードを作成できるプラグイン、ポチップ。

そのポチップでたくさん商品カードを作成してしまうと、どれがお勧めしたい商品かわかりにくくなりますよね？

そこでポチップの特定の商品におすすめのラベルをつけてみました。

Apple Magic Keyboard

Apple(アップル)

口コミを見る

Amazon

楽天市場

Yahooショッピング

メルカリ

本記事ではポチップで特定の商品におすすめのラベルをつけるカスタマイズを紹介します。

ポチップで特定の商品におすすめのラベルをつけるカスタマイズ

カスタマイズ方法は簡単です。

商品IDを調べて、CSSを挿入するだけです。

ポチップに登録した商品IDを調べる

WordPressの管理画面からポチップ管理画面を開きましょう。

おすすめしたい商品を探して、IDと書かれている数字をメモしておきます。

ポチップ管理画面でおすすめしたい商品を探し、商品IDの数字を確認する手順を示した画面。

商品を登録していることが前提条件です！

CSSを挿入する

あとはCSSを挿入するだけです。

SWELLでは「外観 → カスタマイズ → 追加CSS」に下のCSSを追加します。変更前の内容を控え、親テーマのファイルは直接編集しないでください。追加CSSは使用中のテーマに紐づきます。

挿入したら、商品ID番号を入力します。

[data-id="4133"]の4133を、ポチップ管理で調べた商品IDに置き換えます。コード内の2か所を同じIDにし、半角のダブルクォートを残してください。

背景色はbackground、文字色はcolorで変更します。白文字に対する掲載背景色#b91c1cのコントラスト比は約6.47:1です。旧例の#fa4141は約3.56:1で、16pxの文字には差が不足するため変更しました。色を変える場合も、WCAGの文字コントラストの解説を参考に確認してください。これは指定した2色の計算であり、実画面全体の適合確認ではありません。

※おすすめの文言を変えたい場合はcontentの部分から文言を変更してください。

div[data-id="4133"].pochipp-box:before {
    content: "おすすめ";
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    background: #b91c1c; 
    width: auto;
    position: absolute;
    top: 6px;
    left: -9px;
    padding: 0px 8px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
div[data-id="4133"].pochipp-box:after {
    content: '';
    position: absolute;
    top: 35px;
    left: -9px;
    border-top: 9px solid #831111;
    border-left: 9px solid transparent;
}

このCSSは、指定した商品IDを持つポチップのカードすべてに適用されます。ラベルの位置はポチップとテーマの既存CSSにも依存します。ポチップ・WordPress・テーマの版を記録した現行環境での動作と、PC・スマホの表示は未確認です。

このサイトの現在の商品カードは独自ブロックへ変更しているため、このページのカード表示はポチップ用CSSの実行結果ではありません。掲載の管理画面画像は過去のポチップ環境の記録です。

戻すときは今回追加した2つのCSSルールだけを削除します。ラベルは視覚的な装飾なので、おすすめする理由は商品紹介の本文にも書いてください。基本設定はポチップ公式サイトを参照してください。

あとはキャッシュをクリアして、商品カードを確認してみましょう。

Apple Magic Keyboard

Apple(アップル)

口コミを見る

Amazon

楽天市場

Yahooショッピング

メルカリ

まとめ

本記事ではポチップに特定の商品におすすめのラベルをつけるカスタマイズを紹介しました。

便利すぎてついつい商品カードをたくさん作成してしまった場合は、おすすめのラベルをつけて推したい商品をわかりやすくしてあげると良いと思います。

旧版のコードはGitHubのMOTOKI-LLC/WAZA-codeにもありますが、今回の色の修正とは同期していません。掲載CSSを使う場合はこの記事を参照してください。

ポチップ管理で商品IDを確認する画面例

2026年10月13日に、新規Local環境（WordPress 7.1.3、PHP 8.1.23、Twenty Twenty-Five 1.5、ポチップ1.20.3）で商品一覧のID列を確認しました。写真の「架空商品（ID確認用・購入不可）」は、撮影用にあらかじめ用意した見本です。商品検索・外部API接続・ショップ識別子や広告IDの登録はしていません。

ポチップ管理の商品一覧には「ID」列があり、このLocalの架空商品のIDは22と表示されました。これは今回の見本のIDで、読者のサイトで使う番号ではありません。CSSの2か所の番号は、自分の一覧で確認した同じ商品IDへ置き換えてください。写真の「メモ」列は同じ検証サイトにある別のカスタマイズによるものです。

今回は一覧の閲覧と撮影のみで、商品の編集・保存・検索やリンク切れチェックは操作していません。テーマはSWELLではなくTwenty Twenty-Fiveのため、この画像でおすすめラベルの位置やSWELLとの互換性を確認したことにはなりません。旧画像はそのまま残しています。2026年10月21日に掲載CSSの背景色を変更しましたが、ラベル配置の実機検証は追加していません。