Return to previous page

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

This topic has 3 replies, 2 voices, and was last updated 54 minutes ago ago by Tom

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.

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#416678 Copied

2 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
Tagged: best selling themes, change swatches, dropdown menu alternative, product labels, single-product page, variation swatches, woocommerce themes
Viewing 3 results - 1 through 3 (of 3 total)