Jump to content

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

Recommended Posts

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?

Edited by TrueGreen
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 7 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.