よくある質問 - 商品一覧ページの商品名の前後に文字を追加する（レスポンシブデザインテンプレート）

ID #2235

商品一覧ページの商品名の前後に文字を追加する（レスポンシブデザインテンプレート）

2020-12-16 13:33

スタイルシートで商品一覧ページの商品名の前後に文字を追加することができます。

商品名の前に追加する

スタイルシート最下部に下記のように記述して、ダブルコーテーション "" の中を表示したいテキストに変更してください。
スタイルはカスタマイズしていただいて構いません。

.item_list .item_name::before {
content: "ここに追加";
font-size: 12px;
font-weight: normal;
color: #FF0000;
}

特定の商品のみに追加する

スタイルシート最下部に下記のように記述して、「.list_item_10」の末尾の数字部分を、テキストを追加したい商品番号にしてください。
※商品番号とは、該当の商品詳細ページのURL末尾にある数字です。
（https://demoshop.ocnk.net/product/10）

.item_list .list_item_10 .item_name::before {
content: "ここに追加";
font-size: 12px;
font-weight: normal;
color: #FF0000;
}

特定のカテゴリに属する商品のみに追加する

スタイルシート最下部に下記のように記述して、「#categorylist_page_10」「.item_category_10」の末尾の数字部分を、テキストを追加したい商品のカテゴリ番号にしてください。
※カテゴリ番号とは、該当のカテゴリ商品一覧ページのURL末尾にある数字です。
（https://demoshop.ocnk.net/product-list/10）

#categorylist_page_10 .item_list .item_name::before,
.item_category_10 .item_list .item_name::before {
content: "ここに追加";
font-size: 12px;
font-weight: normal;
color: #FF0000;
}

特定のグループに属する商品のみに追加する

スタイルシート最下部に下記のように記述して、「#pickuplist_page_10」「.item_group_10」の末尾の数字部分を、テキストを追加したい商品のグループ番号にしてください。
※グループ番号とは該当のグループ商品一覧ページのURL末尾にある数字です。
（https://demoshop.ocnk.net/product-group/10）

#pickuplist_page_10 .item_list .item_name::before,
.item_group_10 .item_list .item_name::before {
content: "ここに追加";
font-size: 12px;
font-weight: normal;
color: #FF0000;
}

商品名の後ろに追加する

スタイルシート最下部に下記のように記述して、ダブルコーテーション "" の中を表示したいテキストに変更してください。
スタイルはカスタマイズしていただいて構いません。
※商品名を省略表示している場合は表示されない場合があります。

.item_list .item_name::after {
content: "ここに追加";
font-size: 12px;
font-weight: normal;
color: #FF0000;
}

特定の商品のみに追加する

.item_list .list_item_10 .item_name::after {
content: "ここに追加";
font-size: 12px;
font-weight: normal;
color: #FF0000;
}

特定のカテゴリに属する商品のみに追加する

#categorylist_page_10 .item_list .item_name::after,
.item_category_10 .item_list .item_name::after {
content: "ここに追加";
font-size: 12px;
font-weight: normal;
color: #FF0000;
}

特定のグループに属する商品のみに追加する

#pickuplist_page_10 .item_list .item_name::after,
.item_group_10 .item_list .item_name::after {
content: "ここに追加";
font-size: 12px;
font-weight: normal;
color: #FF0000;
}