Fix quantity if product is sold individually or only 1 in stock left

bootscore · Aug 2, 2023 · e44e81e · e44e81e
1 parent 7eb3892
commit e44e81e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 36 deletions.
diff --git a/scss/bootscore_woocommerce/_wc_cart.scss b/scss/bootscore_woocommerce/_wc_cart.scss
@@ -40,9 +40,15 @@ WooCommerce Cart
 // WooCommerce breakpoints are at 769px
 @media (max-width: 768px) {
 
-  // Right align quantity input in mobile
-  .woocommerce-cart-form .product-quantity .quantity {
-    margin-left: auto;
+  // Fixed height for quantity cell in mobile cart if input is hidden
+  // See _wc_qty_btn.scss
+  .woocommerce-cart-form .product-quantity {
+    height: 57px;
+
+    // Right align quantity input in mobile
+    .quantity {
+      margin-left: auto;
+    }
   }
 
   // Coupon input in cart page
@@ -109,7 +115,7 @@ WooCommerce Cart
       width: 400px;
     }
   }
-  
+
   // Proceed to checkout btn
   .wc-proceed-to-checkout a.checkout-button {
     @extend .btn-lg;

diff --git a/scss/bootscore_woocommerce/_wc_qty_btn.scss b/scss/bootscore_woocommerce/_wc_qty_btn.scss
@@ -2,41 +2,39 @@
 WooCommerce Quantity Input
 --------------------------------------------------------------*/
 
-.quantity {
-  @extend .input-group;
-}
+.woocommerce {
 
-.qty {
-  @extend .form-control;
-}
+  .quantity {
+    @extend .input-group;
+
+    // Fixed width for quantity
+    width: 140px;
 
-.woocommerce .quantity input {
-  // Hide browser arrows in quantity input
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
+    // Disable input if product is 1 in stock or limit purchases to 1 item per order in cart page
+    // https://github.com/woocommerce/woocommerce/pull/35767
+    [max="1"] {
+      @extend :disabled;
+    }
+  }
+
+  // Hide quantity if product is sold individually or only 1 in stock left
+  .quantity:has(input[type="hidden"]) {
     display: none;
-    margin: 0;
   }
 
-  &.qty {
+  // Input
+  .qty {
+    @extend .form-control;
+
+    // Hide browser arrows in quantity input
     appearance: textfield;
     -webkit-appearance: none;
     -moz-appearance: textfield;
-  }
-}
-
-// Fixed width for quantity input
-.quantity {
-  width: 140px;
 
-  // Disable input if product is 1 in stock or limit purchases to 1 item per order
-  // https://github.com/woocommerce/woocommerce/pull/35767
-  [max="1"] {
-    @extend :disabled;
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      display: none;
+      margin: 0;
+    }
   }
 }
-
-// Hide quantity input if product is sold individually
-.sold-individually .quantity {
-  display: none;
-}
diff --git a/woocommerce/js/woocommerce.js b/woocommerce/js/woocommerce.js
@@ -74,9 +74,4 @@ jQuery(function ($) {
     $qty.trigger('change');
   });
 
-  // Make quantity input visible in product page if only 1 product is in stock
-  // WooCommerce 7.4.0 https://github.com/woocommerce/woocommerce/blob/2bf9f577952d7a225365fe7728b3187b5be7b701/plugins/woocommerce/templates/global/quantity-input.php
-  $('.quantity [max="1"]').attr('type', 'number');
-  // WC Quantity Input End 
-
 }); // jQuery End