Jump to content

Target just one of Variant Option Title

Go to solution Solved by creedon,

Recommended Posts

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
  • Solution

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

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