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

2022.04.182024.09.05

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

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

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

Apple Magic Keyboard

Apple(アップル)

口コミを見る

Amazon

＼ポイント最大11倍！／

楽天市場

Yahooショッピング

ポチップ

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

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

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

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

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

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

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

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

CSSを挿入する

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

WordPressの管理画面＞外観＞テーマファイルエディター＞ style.cssを開いて、下記のコードを挿入しましょう。

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

[data-id=”4133]のところが商品ID番号を入れる場所になります（2か所あります！）

※背景色を変えたい時は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;
}

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