How can I hide the 'Quantity Select' field on a product page for specific variations?

Site URL: https://www.truegreencr.com/buy/p/product-la-macha

Similar to question How can I hide the 'Quantity Select' field on a product page?

But is it possible to customize this on a variant level as opposed to product level. For the example page I have this would be if I have 2 types, Sample and Product I want to disable quantity when a user clicks the Sample type from the dropdown. Is this possible via CSS?

2 hours ago, TrueGreen said:

I want to disable quantity when a user clicks the Sample type from the dropdown. Is this possible via CSS?

Not with CSS alone.

However with a little Javascript and some CSS yes.

Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection.

<style>

  .hide-quantity {
  
    display: none;
    
    }
    
  </style>

<script>

  $( '.ProductItem .variant-option select' ).change ( function ( ) {
  
    let $quantity = $( '.product-quantity-input' );
    let $this =  $( this );
    
    let clss = 'hide-quantity';
    let s = $this.val ( );
    
    if ( s == 'Sample' ) {
    
      $quantity.addClass ( clss );
      
      $( 'input', $quantity ).val ( '1' );
      
      } else {
      
        $quantity.removeClass ( clss );
        
        }
        
    } );
    
  </script>

This is for a v7.1 site.

This code is general in that I built it based on the page presented. It does not take into account how other products may be configured. This code will not prevent someone from changing the quantity in the cart.

Let us know how it goes.

@Web_Turbu

If I understand correctly you want to change the label for the quantity field on specific product detail pages?