特定の要素を非表示

予約販売ルールが適用されている商品ページで、任意のHTML要素をCSSセレクタで指定して非表示にする方法を説明します。

特定の要素を非表示にする機能とは、予約販売ルールが適用されている状態の商品ページで、指定したHTML要素を非表示にできる開発者向け機能です。

  • 予約商品でスティッキーカートボタンを非表示にする

  • 後払い設定時に特定の決済ボタンを非表示にする

  • 限定販売商品のSNS共有ボタンを非表示にする

  • 販売終了商品の価格表示を非表示にする

  • 商品ページのみ対応しています

  • アクション(予約販売時)・(開始日前)・(終了日後)・(条件外)それぞれに個別設定できます

  • CSSセレクタで非表示にする要素を指定します。複数指定する場合はカンマで区切ってください

  • バリアントの切り替え時に、設定に応じて自動的に表示・非表示が切り替わります

  • 商品ページ内のカートボタンが表示されたタイミング(カートボタンを予約販売ボタンへ切り替えるタイミング)で、非表示処理が動作します。そのため、カートボタンがページの下部に存在する場合は、ページアクセスから非表示処理までにタイムラグが発生する場合があります

(1) 対象の商品ページをブラウザで開く(2) 非表示にしたい要素を右クリックし「検証」(デベロッパーツール)を開く(3) 対象要素のIDまたはクラス名を確認し、CSSセレクタを控えておく

CSSセレクタの例:#express-payment.payment-buttons

(1) 対象の予約販売ルールを開く(2) 「アクション」セクションから設定したいタブ(予約販売時・開始日前・終了日後・条件外)を開く

(3) 「特定の要素を非表示にする(開発者向け)」にチェックを入れる(4) 「CSSセレクタ」に非表示にしたい要素のセレクタを入力する(複数指定する場合はカンマで区切る)(5) 「保存」をクリックする