Return to previous page

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

This topic has 18 replies, 3 voices, and was last updated 2 months, 1 weeks ago ago by Jack Richardson

Tom

Participant

October 2, 2024 at 05:22

I am using the Jewellery theme. On Single Product page, how can I change the product variation “Product Length” options to display labeled swatches instead of a dropdown (show as rectangular labels instead of dropdown menu). I want to show similar to how your Plants Store theme demo shows “Medium” “Small” “Tall” in rectangular labels.

See attached.

https://xstore.8theme.com/elementor3/plants-store/product/cheese-planted/

Also, on Xstore > WooCommerce > Single Product Page, it says:

“It looks like you’re using Elementor Single Product templates [1] on your site. This might cause issues with your customizer Single Product. To avoid problems and make sure everything runs smoothly, we suggest choosing one Single Product Builder option and disabling the others. ”

What does this mean? I only have 1 theme in my Theme Builder > Single Product area.

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#416678 Copied

17 Answers

Rose Tyler

Support staff

October 2, 2024 at 07:51

Hello, Tom,

Thank you for reaching out and for using our Jewellery theme for your website. We’re here to assist you with your query regarding the display of product variation options on your Single Product page.

Please watch this video about variation swatches – https://youtu.be/LgzC4iK-j6A?feature=shared

We’ve set – https://prnt.sc/iKMDRWD7oG5E on your site https://prnt.sc/vYCkVXzhhz3b

“What does this mean? I only have 1 theme in my Theme Builder > Single Product area.” – please read this article – https://www.8theme.com/documentation/xstore/xstore-builders/xstore-single-product-builder-with-elementor/
There are 2 Single Product builders: in Theme Options (Customizer) and in XStore Builders via Elementor – https://gyazo.com/5915207abcfb84af8f9c34ef1d107eff
Currently, Single Product Builder via Elementor works on your site – https://prnt.sc/6DsW8yD68cjT , because of this, theme options for single products are ignored and the mentioned message explains it to you.

Best Regards,
8Theme’s Team

#416692 Copied

Tom

Participant

October 2, 2024 at 08:27

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.

#416702 Copied

Rose Tyler

Support staff

October 2, 2024 at 10:18

Hello, Tom,

You’re welcome!

Edit this custom CSS code – https://prnt.sc/ICQRKoq00T-N

Best Regards,
8Theme’s Team

#416717 Copied

Tom

Participant

October 2, 2024 at 17:22

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.

Files is visible for topic creator and
support staff only.

#416786 Copied
Jack Richardson

Support staff

October 3, 2024 at 08:17
Dear @Tom,

I hope this message finds you well. If you are looking to modify the label in your price display, you may find the following solution helpful: https://prnt.sc/RQ1n94YSjYkm. Implementing this change will result in the label size being decreased while the size of main price can be increased in settings of that widget, as shown here: https://prnt.sc/Kj9z_vOAZLYd. The necessary code to achieve this adjustment is provided below:
```
selector .price label {
    font-size: 14px;
}
```
Additionally, it appears that your requirements may necessitate further customization beyond our standard support scope. We kindly ask that you submit a request for additional customization at your earliest convenience. You can do so by visiting the following link: https://www.8theme.com/account/#etheme_customization_panel.

Thank you for your attention to this matter. Should you have any further questions or require additional assistance, please do not hesitate to reach out.

Best Regards,
Jack Richardson
8Theme’s Team
#416839 Copied
Tom

Participant

October 3, 2024 at 08:47

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).

Files is visible for topic creator and
support staff only.

#416846 Copied

Jack Richardson

Support staff

October 3, 2024 at 11:12

Dear @Tom,

I hope this message finds you well. If the following result aligns with the solution you were seeking (https://prnt.sc/AHGUQK2N1GOi), you may adjust the size of the prices as described below:

1. The size for the regular price can be set via this link: https://prnt.sc/tqo3NeX-_KbK
2. The size for the MSRP area can be adjusted here: https://prnt.sc/gZ1TIO_gxP0Q

Furthermore, if you prefer the price display methods on the Archive pages as shown here (https://prnt.sc/LABNkXIT2Ae8), these sizes can be configured in the Archive Products Editor:
1. Regular price size is set here: https://prnt.sc/p6A9UudjzLzk
2. The size for the MSRP area, set at 70% of the regular price size, can be adjusted here: https://prnt.sc/knzbpMNlFjV3

In both cases we provided you the options where you can manually increase/descrease sizes according to your needs. Take your time in making the perfect ones.

Should you require any further assistance or have additional questions, please do not hesitate to contact us.

Best Regards,
Jack Richardson
8Theme’s Team

#416895 Copied

Tom

Participant

October 4, 2024 at 02:59

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!

Files is visible for topic creator and
support staff only.

#417007 Copied

Jack Richardson

Support staff

October 4, 2024 at 08:51

Hello @Tom
Please, check now !
Result is next -> https://prnt.sc/r4O6mXWDXVDy.
Kind regards, Jack Richardson

#417066 Copied

Tom

Participant

October 4, 2024 at 08:58

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

$432.53 – $1,685.78

#417067 Copied

Jack Richardson

Support staff

October 4, 2024 at 11:13

Hello @Tom
Please, check again !
We believe now you should be satisfied with the results.
If the main request you created this topic fow is solved you may mark this topic as closed.
Kind regards, Jack Richardson

#417108 Copied

Tom

Participant

October 4, 2024 at 17:48

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;
}

Files is visible for topic creator and
support staff only.

#417245 Copied

Jack Richardson

Support staff

October 5, 2024 at 08:51

Hello @Tom

We checked your single product prices and here are the frontend result -> https://prnt.sc/h-z641yWb1_N. So, it seems you have the cached version in your browser. Please, clear the browser cache and check again.

Kind regards,
Jack Richardson
The 8theme’s team

#417289 Copied

Tom

Participant

October 8, 2024 at 08:30

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!

#417717 Copied

Jack Richardson

Support staff

October 9, 2024 at 08:05

Hello @Tom
Please, check private area.
Kind regards, Jack Richardson

Please contact administrator
for this information.

#417903 Copied

Tom

Participant

October 9, 2024 at 08:13

Response added.

Please contact administrator
for this information.

#417908 Copied

Jack Richardson

Support staff

October 9, 2024 at 10:27

Hi @Tom
Answered.
Kind regards, Jack Richardson

Please contact administrator
for this information.

#417948 Copied
Tagged: best selling themes, change swatches, dropdown menu alternative, product labels, single-product page, variation swatches, woocommerce themes
Viewing 18 results - 1 through 18 (of 18 total)