[ 解決済 ] WooCommerceで商品購入数量のスピンボタンの数値が表示されない

[Peace]

■ WordPress のバージョン
Ver.6.6.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
X-T9

■ テーマのバージョン
1.26.2

■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
WooCommerceの商品ページで、数量を入力するスピンボタンを操作すると設定している数量が表示されること。

■ 自分で試した事
テーマを変更する
テーマをTwenty-TwentyThreeに変更すると、数量のスピンボタンの左側に数値が表示されます。

テーマはX-T9の状態で、テーマの追加CSSを設定(左右のPaddingが広すぎて数値が表示されていないように見えることの暫定対応)

追加したCSS
.input-text {
padding: .9rem .1rem !important;
}

追加CSSの場合、クラス名が一般的すぎて、他の箇所に影響が出そうなので、できれば利用したくありません。

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
テーマはX-T9の状態で、テーマの追加CSSは設定していない(左右のPaddingが広すぎて数値が表示されていないように見える)

[Peace]

画面キャプチャをGoogleDrivedeで限定公開にしてIMGにURLを設定しましたが、表示されていないように見えるので、ファイルを添付します。

テーマはX-T9の状態で、テーマの追加CSSは設定していない(左右のPaddingが広すぎて数値が表示されていないように見える)
X-T9Standard.png

テーマはX-T9の状態で、数値表示部分の左右のPaddingを小さくする追加CSSを設定した場合
X-T9CSS-Customize.png

テーマをTwenty-TwentyThreeに変更
Twenty-Twenty-ThreeStandard.png

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

お世話になります。株式会社ベクトルの石川と申します。

.input-text {
padding: .9rem .1rem !important;
}

追加CSSの場合、クラス名が一般的すぎて、他の箇所に影響が出そうなので、できれば利用したくありません。

WooCommerce である事を識別するクラスが外側の div についていませんか？

例えば

.woo-product-item .input-text {

のように、外側の div に　woo-product-item などのクラスがあると思いますので、
それを利用する事で、他の箇所に影響せずに追加できると思います。

[石川＠Vektor,Inc.]

https://github.com/vektor-inc/x-t9/issues/298

[Peace]

石川　様

早速のご回答ありがとうございます。

> 外側の div に　woo-product-item などのクラス
直近の外側のdivにWooCommerceらしいクラスが見当たらなかったので、だいぶ上位階層になりますが、WooCommerceのクラスらしいものがある階層まで戻って、
.wc-block-add-to-cart-form .cart .quantity .input-text {
padding: .9rem .1rem !important;
}
で設定してみました。

今のところ、数値の表示は見える状態になっていますので、少し様子を見てみます。

[石川＠Vektor,Inc.]

X-T9 1.26.3 にて対応いたしましたので、
追加いただいたCSSを削除しても問題なく表示されると思います。

よろしくお願いいたします。

[Peace]

石川　様
> X-T9 1.26.3 にて対応いたしましたので、
> 追加いただいたCSSを削除しても問題なく表示されると思います。

追加したCSSを削除して、問題なく表示されることを確認しました。

ご対応ありがとうございます。

[投稿者]

投稿