商品カードを作成できるプラグイン、ポチップ。
そのポチップでたくさん商品カードを作成してしまうと、どれがお勧めしたい商品かわかりにくくなりますよね？
そこでポチップの特定の商品におすすめのラベルをつけてみました。
本記事ではポチップで特定の商品におすすめのラベルをつけるカスタマイズを紹介します。
ポチップで特定の商品におすすめのラベルをつけるカスタマイズ
カスタマイズ方法は簡単です。
商品IDを調べて、CSSを挿入するだけです。
ポチップに登録した商品IDを調べる
WordPressの管理画面からポチップ管理画面を開きましょう。
おすすめしたい商品を探して、IDと書かれている数字をメモしておきます。
商品を登録していることが前提条件です！
CSSを挿入する
あとはCSSを挿入するだけです。
SWELLでは「外観 → カスタマイズ → 追加CSS」に下のCSSを追加します。変更前の内容を控え、親テーマのファイルは直接編集しないでください。追加CSSは使用中のテーマに紐づきます。
挿入したら、商品ID番号を入力します。
[data-id="4133"]の4133を、ポチップ管理で調べた商品IDに置き換えます。コード内の2か所を同じIDにし、半角のダブルクォートを残してください。
※背景色を変えたい時はbackgroundに、文字色を変えたい時はcolorにカラーコードをいれてください。
※おすすめの文言を変えたい場合はcontentの部分から文言を変更してください。
div[data-id="4133"].pochipp-box:before {
content: "おすすめ";
color: #fff;
font-size: 16px;
font-weight: bold;
background: #fa4141;
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ルールだけを削除します。ラベルは視覚的な装飾なので、おすすめする理由は商品紹介の本文にも書いてください。基本設定はポチップ公式サイトを参照してください。
あとはキャッシュをクリアして、商品カードを確認してみましょう。
まとめ
本記事ではポチップに特定の商品におすすめのラベルをつけるカスタマイズを紹介しました。
便利すぎてついつい商品カードをたくさん作成してしまった場合は、おすすめのラベルをつけて推したい商品をわかりやすくしてあげると良いと思います。
この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
ポチップ管理で商品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との互換性を確認したことにはなりません。旧画像と掲載CSSはそのまま残しています。
