Product Variant Buttons - Just Text Style


1. Plugin Info

Change style of the product variant buttons to a text only style and not buttons.

  • Works with Squarespace 7.1

  • Uses Custom CSS


2. Add this code to Custom CSS

// Product Variant Button (Just Text Style- Ghost //

.ProductItem-details .variant-radiobtn-wrapper label {
  color: #000 !important;
  padding: 10px !important;
  background: none !important;
}

// Product Variant Button (Selected Just Text Style) - Ghost //

.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label {
  color: #000 !important;
  padding: 10px !important;
  border-bottom: 1px solid #000 !important;
  border-radius: 0px !important;
  background: none !important;
}

3. Customizable Options

  • Button Text Color

  • Button Color

  • Button Padding

  • Button Text Color - Selected

  • Button Color - Selected

  • Button Padding - Selected

  • Border Bottom - Selected

  • Border Radius - Selected

Other font styles can be changed in Squarespace settings like normal.


4. Plugin Notes

  • Applies to the product’s main page

  • Must use the Simple layout

  • Does not apply to product blocks


Previous
Previous

Product Variant Buttons - Hover + Selected Style

Next
Next

Product Variant Buttons - Selected Button Style