Getting rid of the variant name on a product dropdown selection

Hi,  Does anyone know how to get rid of the variant name above the product dropdown menu? I don't mind the name on the white dropdown bar, I just want to get rid of the name above it. I'm working with version 7.1

Thanks for your help!

Can you share link to product in screenshot? We can help easier.

Hi Tuanphan! Yes there's a screenshot attached to my question, but I'm reposting it here. Thanks for your help!  

Yes, here is a link.

https://lychee-lanternfish-y5ft.squarespace.com/elopement

On 10/27/2020 at 9:06 AM, paul2009 said:

These are known as variant option titles. You can remove them by adding this to Custom CSS:

.variant-option-title {
  display: none;
}

  If this helps you, please click "Like" below  ⬇️

Thank you! 

On 10/27/2020 at 8:06 AM, paul2009 said:

These are known as variant option titles. You can remove them by adding this to Custom CSS:

.variant-option-title {
  display: none;
}

  If this helps you, please click "Like" below  ⬇️

Hi @paul2009, I've just come across this post from a while ago and your code has been super helpful thank you. I'm also wondering if it's possible to hide the 'select variant option' that's included in the drop down when selected. Here's an example, it's the blue line I'd like to hide if possible. The 'select seed type in the drop down list seems unnecessary as it's in the field already:

Many thanks. 🙂

On 9/6/2023 at 2:52 PM, Terratag said:

Hi @paul2009, I've just come across this post from a while ago and your code has been super helpful thank you. I'm also wondering if it's possible to hide the 'select variant option' that's included in the drop down when selected. Here's an example, it's the blue line I'd like to hide if possible. The 'select seed type in the drop down list seems unnecessary as it's in the field already:

 

Many thanks. 🙂

You will need to use script code to remove this. Do this for a product or all products? Can you share link to shop page on your site?

On 9/6/2023 at 8:52 AM, Terratag said:

I'm also wondering if it's possible to hide the 'select variant option' that's included in the drop down when selected.

Have you tried adding this to Custom CSS:

select option:first-of-type {
  display:none;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you paul2009, you're a genius! 😁

The custom CSS did the trick.

You're welcome @Terratag

On 9/7/2023 at 1:50 AM, paul2009 said:

Have you tried adding this to Custom CSS:

select option:first-of-type {
  display:none;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi Paul,

We tried using this code and it worked on the desktop view, but it didn't work on the mobile view. Is there a way to get this code to hide the "Select Variant Option" on mobile view as well?

Website Link

On 11/2/2023 at 1:33 PM, heycody said:

We tried using this code and it worked on the desktop view, but it didn't work on the mobile view.

Hi Cody

The issue is that although the CSS works on both desktop and mobile, it won't work on mobile browsers like iOS Safari where it takes full control of Select list/option styling, and so ignores the CSS.

Did this help? Please give feedback by clicking an icon below  ⬇️

8 minutes ago, heycody said:

$(this).find("option:first-child").val(variabletext);

when we turned on the "Waitlist" feature found in Selling > Selling Tools > Waitlists, it seems to not make the code work. It no longer says "SELECT PROPER SIZE" and the "Select" converts to lowercase.

I haven't tested this, but it looks like the code is trying to change the value of the option (".val") and not the text that is displayed to users (".text"). Have you tried changing this?

Also, I see you have two lines that are attempting to load jQuery - versions 3.6.0 and 3.4.1. I recommend you remove the older version (3.4.1) as this has security vulnerabilities and is out of date.

Did this help? Please give feedback by clicking an icon below  ⬇️

Just now, paul2009 said:

I haven't tested this, but it looks like the code is trying to change the value of the option (".val") and not the text that is displayed to users (".text"). Have you tried changing this?

Also, I see you have two lines that are attempting to load jQuery - versions 3.6.0 and 3.4.1. I recommend you remove the older version (3.4.1) as this has security vulnerabilities and is out of date.

Did this help? Please give feedback by clicking an icon below  ⬇️

If it is not possible, is there a way to have the waitlist feature only be turned on for specified products and not all products?

1 minute ago, heycody said:

If it is not possible...

It should be possible. Did you try making the change that I suggested?

32 minutes ago, paul2009 said:

It should be possible. Did you try making the change that I suggested?

Thank you very much. Your suggested change worked perfectly.

Is there a way to keep the SOLD OUT product status shown in the drop down variant even with the Waitlist feature turned on?

4 hours ago, heycody said:

Is there a way to keep the SOLD OUT product status shown in the drop down variant even with the Waitlist feature turned on?

No. When Product Waitlists are enabled, Sold Out labels won't display in variant drop-downs. The theory is that a "SOLD OUT" label will deter the user from selecting that variant and so they won't see the waitlist option; they'll simply abandon their purchase.