Product Variant Buttons - Hover + Selected Style

---

1. Plugin Info

Add a pill hover and selected style to product variant buttons.

• Works with Squarespace 7.1

• Uses Custom CSS

---

2. Add this code to Custom CSS

// Product Variant Button (Non-Selected Style - Ghost //

.ProductItem-details .variant-radiobtn-wrapper label {
  color: #000 !important;
  background: none !important;
  padding: 5px 10px !important;
  border: 0px solid #000 !important;
  border-radius: 50px !important;
}

// Product Variant Button (Pill Hover and Selected Style) - Ghost //

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

---

3. Customizable Options

• Button Text Color

• Button Background Color

• Button Padding

• Button Border Style

• Button Border Radius

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

---