購入オプションのデザインを装飾する
本ページでは「購入オプションを利用した予約販売」を実施した際に表示される購入オプション用ウィジェットのデザインをカスタマイズする方法を紹介します。
購入オプション用ウィジェットは、カスタムCSSやカスタマイズされたLiquidを利用することで、デザインを装飾することが出来ます。
文字色を変更する
カスタムCSSに下記サンプルコードを挿入することで実現できます。（Dawnテーマでテストしています。）
（サンプルコード）
.ruffruff-pre-order-selling-plan-group > div {
color: red !important;
}
文字色を赤に変更
カスタムCSSの設定箇所
割引後価格の文字色のみ変更する
カスタマイズされたLiquidに下記サンプルコードを挿入することで実現できます。
（サンプルコード）
<style>
.ruffruff-pre-order-selling-plan-group > div > [class^="_price"] {
color: red !important;
}
</style>
割引価格語の文字色のみを赤に変更
カスタマイズされたLiquidの設定箇所
背景色を変更する
カスタマイズされたLiquidに下記サンプルコードを挿入することで実現できます。
（サンプルコード）
<style>
.ruffruff-pre-order-selling-plan-group > [class^="_root"] {
background-color: red !important;
}
</style>
背景色を赤に変更
非表示にする
割引販売を実施している場合に、割引後価格も非表示になりますので、ご注意ください
カスタマイズされたLiquidに下記サンプルコードを挿入することで実現できます。
（サンプルコード）
<style>
.ruffruff-pre-order-selling-plan-group {
height: 0 !important;
visibility: hidden !important;
}
</style>
購入オプションのウィジェット非表示
枠線を非表示にする
カスタマイズされたLiquidに下記サンプルコードを挿入することで実現できます。
（サンプルコード）
<style>
.ruffruff-pre-order-selling-plan-group > [class^="_root"] {
border: none !important;
}
</style>
枠線を非表示
枠線の色を変更
カスタマイズされたLiquidに下記サンプルコードを挿入することで実現できます。
（サンプルコード）
<style>
.ruffruff-pre-order-selling-plan-group > [class^="_root"] {
border-color: red !important;
}
</style>
枠線を赤色に変更