How to disabled quantity buttons on cart page

Below is sample code to disable quantity buttons on the cart page. It was developed form Shopify Dawn theme but would work for other Shopify free themes. Other themes you can use the concepts presented here only. The exact implementation would be different.

Consult your developer or reach out to us. Custom theme modifications are not part of support and would have a cost associated.

This code can be found in main-cart-items.liquid on Shopify free themes.

This code snippets assign a variable named “opcdisabled” to true when the line item product variant is an Option Price Calculator item.


                    {%- if item.product.has_only_default_variant == false
                      or item.properties.size != 0
                      or item.selling_plan_allocation != null
                    -%}
                      <dl>
                      
                        {%- comment -%} This is used to marked quantity disabled for opc products {%- endcomment -%}
                        {% assign opcdisable = false %}
                        {%- if item.variant.title contains 'opc-' -%}
                           {%  assign opcdisable = true %}
                        {%- endif -%}
 
                        {%- if item.product.has_only_default_variant == false -%}
                         
                          {%- for option in item.options_with_values -%}
                             {%- comment -%}
                               Optional unless loop to hide variant sku title option that contains opc-. Not specifically related to this help doc might still be useful.
                             {%- endcomment -%}
                             {% unless option.value contains 'opc-' %}
                              <div class="product-option">
                                <dt>{{ option.name }}:</dt>
                                <dd>{{ option.value }}</dd>
                              </div>
                            {% endunless %}
                          {%- endfor -%}
                        {%- endif -%}




  
                        {%- for property in item.properties -%}
                          {%- assign property_first_char = property.first | slice: 0 -%}
                          {%- if property.last != blank and property_first_char != '_' -%}
                            
                              {%- comment -%} This is used to mark quantity disabled for opc products {%- endcomment -%}          
                              {%- if property.last contains 'opc-' -%}
                                 {%  assign opcdisable = true %}
                              {%- endif -%}
                            
                               {%- comment -%}
                               Optional unless loop to hide variant sku title option that contains opc-. Not specifically related to this help doc might still be useful.
                             {%- endcomment -%}
                             {% unless property.last contains 'opc-' %}
                              <div class="product-option">
                                <dt>{{ property.first }}:</dt>
                                <dd>
                                  {%- if property.last contains '/uploads/' -%}
                                    <a href="{{ property.last }}" class="link" target="_blank">
                                      {{ property.last | split: '/' | last }}
                                    </a>
                                  {%- else -%}
                                    {{ property.last }}
                                  {%- endif -%}
                                </dd>
                              </div>
                             {% endunless %}
                          {%- endif -%}
                        {%- endfor -%}

This code is for quantity buttons. We conditionally add disabled attribute to the quantity input to disabled the element.

    <div class="cart-item__quantity-wrapper">
                      <label class="visually-hidden" for="Quantity-{{ item.index | plus: 1 }}">
                        {{ 'products.product.quantity.label' | t }}
                      </label>
                      <quantity-input class="quantity cart-quantity"   {%- if opcdisable -%} disabled {%- endif -%}>
                        <button class="quantity__button no-js-hidden" name="minus" type="button"  {%- if opcdisable -%} disabled {%- endif -%}>
                          <span class="visually-hidden">
                           {{- 'products.product.quantity.decrease' | t: product: item.product.title | escape -}}
                          </span>
                          {% render 'icon-minus' %}
                        </button>
                        <input
                          class="quantity__input"
                          data-quantity-variant-id="{{ item.variant.id }}"
                          type="number"
                          name="updates[]"
                          value="{{ item.quantity }}"
                          {% # theme-check-disable %}
                          data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
                          min="{{ item.variant.quantity_rule.min }}"
                          {% if item.variant.quantity_rule.max != null %}
                            max="{{ item.variant.quantity_rule.max }}"
                          {% endif %}
                          step="{{ item.variant.quantity_rule.increment }}"
                          {% # theme-check-enable %}
                          aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
                          id="Quantity-{{ item.index | plus: 1 }}"
                          data-index="{{ item.index | plus: 1 }}"
                          {%- if opcdisable -%} disabled {%- endif -%}
                        >
                        <button class="quantity__button no-js-hidden"  name="plus" type="button" {%- if opcdisable -%} disabled {%- endif -%}>
                          <span class="visually-hidden">
                            {{- 'products.product.quantity.increase' | t: product: item.product.title | escape -}}
                          </span>
                          {% render 'icon-plus' %}
                        </button>
                      </quantity-input>

                      <cart-remove-button
                        id="Remove-{{ item.index | plus: 1 }}"
                        data-index="{{ item.index | plus: 1 }}"
                      >
                        <a
                          href="{{ item.url_to_remove }}"
                          class="button button--tertiary"
                          aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
                        >
                          {% render 'icon-remove' %}
                        </a>
                      </cart-remove-button>
                    </div>

You might also want to restyle disabled quantity buttons. Here is some CSS to do that.


quantity-input[disabled] {
    background-color: lightgrey;
}
.quantity__button[disabled] {
    cursor: auto;
    color: grey;
}
.quantity__input[type=number] {
        color: grey;
}