Jump to content

Target just one of Variant Option Title

By UtopiaCreates, in Customize with code

Go to solution Solved by creedon,

Recommended Posts

UtopiaCreates Level 5

UtopiaCreates

Posted
Posted

Site URL: https://utopiacreatesbeta.squarespace.com/swag/p/shot-caller

Does anyone know if there is a way to target just one of two variant titles (.variant-option-title) on a product page? I want to add a "+" after the quantity value but not the color value. I have tried a bunch of combinations of nth-of-kind, child, first of, etc with no success but maybe I am missing the combo of styles needed/

Note: adding the "+" to the actual quantities was easy since I could target that using the data-option-name value included in the swatches plugin I am using but the titles do not have a distinct style or data attribute other then the actual content.

Link to comment
  • Replies 2
  • Views 298
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

creedon
creedon

You can do it by position but not by the variant title, as you've discovered. At least not with CSS alone. .variant-option:nth-child( 2 ) .variant-option-title::after {   content : '+';   margin-l

UtopiaCreates
UtopiaCreates

That worked perfect. I had tried all of those elements just not in the correct configuration. Thank you for the help.

  • Solution
creedon Level 15

creedon

Posted
  • Solution
Posted

You can do it by position but not by the variant title, as you've discovered. At least not with CSS alone. 

.variant-option:nth-child( 2 ) .variant-option-title::after {

  content : '+';
  margin-left : 0.125rem;
  
  }

With some Javascript it may be possible to find the quantity and throw a class on it to get a particular effect. If all your products are going to be the same variant wise then this wouldn't be needed.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources