Jump to content

Getting rid of the variant name on a product dropdown selection

Go to solution Solved by paul2009,

Recommended Posts

  • Solution
22 hours ago, AndreaGC said:

Does anyone know how to get rid of the variant name above the product dropdown menu?

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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 1 year later...
  • 1 year later...
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:

image.png.103f7aa83f404672aeae84853f58760a.png

 

Many thanks. 🙂

Link to comment
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:

image.png.103f7aa83f404672aeae84853f58760a.png

 

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

You're welcome @Terratag

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 1 month later...
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

Link to comment
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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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?

Link to comment
1 minute ago, heycody said:

If it is not possible...

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

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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?

Link to comment
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. 

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.