Change product variant display from a select to radio

static/styles/main.css

@@ -853,12 +853,26 @@ article + article {
     border-color: var(--yellow-color);
 }
 
-.product__form input,
+.product__form input:not([type=radio]),
 .product__form select {
     width: 100%;
 }
 
 
+.product__form #id_variant {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+}
+.product__form #id_variant div label {
+    display: flex;
+    gap: 1rem;
+    font-weight: bold;
+}
+
+
+
+
 
 @media screen and (max-width: 700px) {
     .product__detail {

storefront/forms.py

@@ -17,15 +17,21 @@ from core import CoffeeGrind, ShippingContainer
 logger = logging.getLogger(__name__)
 
 
+class VariantChoiceField(forms.ModelChoiceField):
+    def label_from_instance(self, obj):
+        return f'{obj.name} | ${obj.price}'
+
+
 class AddToCartForm(forms.Form):
     quantity = forms.IntegerField(min_value=1, max_value=20, initial=1)
 
     def __init__(self, variants, options, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
-        self.fields['variant'] = forms.ChoiceField(
-            label='',
-            choices=[(variant.pk, f'{variant.name} | ${variant.price}') for variant in variants]
+        self.fields['variant'] = VariantChoiceField(
+            queryset=variants,
+            widget=forms.RadioSelect,
+            label=''
         )
 
         for option in options: