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

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

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

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

\最大10%ポイントアップ!/
Amazon

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

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

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

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

商品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;
}

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

\最大10%ポイントアップ!/
Amazon

まとめ

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

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

Web制作のご依頼

SEOからデザインまで魅力的なWebサイトを制作いたします。

目次