Change Variation swatches on Single Product Page swatches or labels instead of dropdown menu

Thank you for your responses. They are very clear and helpful.

While we are on that same Single Product page, how can I change the font size of the “Price” but:

1) WITHOUT affecting/changing the font size of the MSRP? Only the “price” and “sale price” should increase so it’s more prominent. Do not change the size of the MSRP font size.

2) WITHOUT affecting/changing the font size on the PRODUCT ARCHIVE PAGE.

I’ve tried using XSTORE > “Additional CSS” to modify “.product .woocommerce-Price-amount” but it changes the font size for both MSRP and the Price, and for BOTH the Single product page AND Product Archive page — I do not want that.

I simply want the Price on the Single Product Page to be larger so it doesn’t look so small compared to the MSRP price.

This doesn’t work for requirements #1 and #2 that I mentioned above.

See attached … you can see that changing that CSS value “.product .woocommerce-Price-amount” causes the font size to change everywhere on PRODUCT ARCHIVE PAGE, and the SINGLE PRODUCT PAGE, and it also inadvertently changes font size of MSRP too. I do not want that.

Maybe there is a different CSS tag that I should use instead of “.product .woocommerce-Price-amount” — I think that’s the wrong one.

The most important thing is I want the “Price” to be a little larger than “MSRP” price. But they seem to increase/decrease the same using that CSS tag.

Hi Jack,

I think maybe you misunderstood the request. I would like to change the actual price so that its font size is larger than the MSRP price. But ONLY on the Single Product Page. Please see attached.

Rose Tyler suggested that I modify Global CSS to change “.product .woocommerce-Price-amount” but this will change the font for price on BOTH the Single Product page AND the PRODUCT ARCHIVE page. I do not want it changed on BOTH. Just on the Single Product Page.

By the way … I added the “selector” code snippet to the Single Product Theme > Edit Product Price > Custom CSS. It seems to change the text “MSRP” to a smaller font. I don’t want the MSRP changed (the values in the blue text). I want the regular price to have a larger font (the values in the gray color text).

Hi Jack,

Very, very close!! It was almost perfect until I looked at the
variable product item. As you can see the attached screenshot, only HALF of the price changed. Not sure why the 2nd half of the price didn’t change in the variable product. How can that be fixed? Thank you for your expertise!

Why didn’t the “–” character also increase in font size? It still looks tiny in between the two prices.

$432.53 – $1,685.78

I think maybe there is an error in your new code. All font changes are voided and now defaulted back to original small letters. See attached.

I see that you changed the Custom CSS for Single Product page, but it seems to have made all price values small again

“$432.53 – $1,685.78”

selector:has(#alg_wc_msrp) {
font-size: 3.5rem;
}

The issue was due to my Firefox version, which didn’t support selector:has() until version 121. I’ve updated my Firefox and everything works now.

Jack — you and your team are very talented, and very skilled in your job. Thank you for all your assistance and for sharing your expertise!

Response added.