Removing Quantity from Cart Dawn Theme

[ee1980]

Hello-

I want to remove the quantity label and the quantity button from my cart, highlighted in yellow. I want customers to still be able to remove items from the cart. I'm using the Dawn theme. I've tried a couple of the suggestions for doing this, but none have worked for me. Can someone tell me how to do this? Thank you!!!

cart

[kidwwaya]

Kindly DM me 

[KetanKumar · Accepted solution]

@ee1980 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.cart-item__quantity .quantity {
    display: none;
}
th.cart-items__heading--wide.small-hide.caption-with-letter-spacing {
    font-size: 0;
}

[ee1980]

This worked, thank you so much!

[KetanKumar]

@ee1980 

its my pleasure to help us 

[carolinej]

Is there a way to do this on the product page of the Dawn theme? I want to remove the quantity box from the product listing. I am selling digital downloads and no one would purchase more than one. It's confusing. Thank! 

[KetanKumar]

@carolinej 

can you please share store url so i will check and guide you.

[carolinej]

Sure...here is my store link:

http://hygge-prints.myshopify.com password: igleed

All of my products are digital and I don't think they would buy more than one. 

[KetanKumar]

@carolinej 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.cart-item__quantity .quantity {
    display: none;
}
th.cart-items__heading--wide.small-hide.caption-with-letter-spacing {
    font-size: 0;
}

[carolinej]

Thank you!

[baseem]

Hi KetanKumar,

i tried this in my dawn theme but it did not work the quantity selector inthe cart page still there 

thanks 

[KetanKumar]

@baseem 

can you please share store url 

[baseem]

https://camps.rafanadalacademykuwait.com/

[KetanKumar]

oh sorry your store password protect 

[baseem]

@KetanKumar  here is the link sorry 

https://camps.rafanadalacademykuwait.com/

password: eaclan

[baseem]

@KetanKumar  here is the link sorry 

https://camps.rafanadalacademykuwait.com/

password: eaclan

[KetanKumar]

@baseem 

thanks can you please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

td.cart-item__quantity {display: none !important;}

[baseem]

@KetanKumar thanks a lot for your reply, 

i put the code as it is in the base.css but still the quantity selector in cart page,

[KetanKumar]

can you please send cart item code so i will update

[baseem]

@KetanKumar do you mean component-cart-items.css ? 

.cart-items td,
.cart-items th {
padding: 0;
border: none;
}

.cart-items th {
text-align: left;
padding-bottom: 1.8rem;
opacity: 0.85;
font-weight: normal;
}

.cart-item__quantity-wrapper {
display: flex;
}

.cart-item__totals {
position: relative;
}

.cart-items *.right {
text-align: right;
}

.cart-item__image-container {
display: inline-flex;
align-items: flex-start;
}

.cart-item__image-container:after {
content: none;
}

.cart-item__image {
height: auto;
max-width: calc(10rem / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
.cart-item__image {
max-width: 100%;
}
}

.cart-item__details {
font-size: 1.6rem;
line-height: calc(1 + 0.4 / var(--font-body-scale));
}

.cart-item__details > * {
margin: 0;
max-width: 30rem;
}

.cart-item__details > * + * {
margin-top: 0.6rem;
}

.cart-item__media {
position: relative;
}

.cart-item__link {
display: block;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
}

.cart-item__name {
color: rgb(var(--color-foreground));
text-decoration: none;
display: block;
}

.cart-item__name:hover {
text-decoration: underline;
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.2rem;
}

.cart-item__price-wrapper > * {
display: block;
margin: 0;
padding: 0;
}

.cart-item__discounted-prices dd {
margin: 0;
}

.cart-item__discounted-prices .cart-item__old-price {
font-size: 1.4rem;
}

.cart-item__old-price {
opacity: 0.7;
}

.cart-item__final-price {
font-weight: 400;
}

.product-option {
font-size: 1.4rem;
word-break: break-all;
line-height: calc(1 + 0.5 / var(--font-body-scale));
}

.cart-item cart-remove-button {
display: flex;
margin-left: 1rem;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
.cart-item cart-remove-button {
width: 4.5rem;
height: 4.5rem;
}
}

cart-remove-button .button {
min-width: calc(4.5rem / var(--font-body-scale));
min-height: 4.5rem;
padding: 0;
margin: 0 0.1rem 0.1rem 0;
}

cart-remove-button .button:before,
cart-remove-button .button:after {
content: none;
}

cart-remove-button .button:not([disabled]):hover {
color: rgb(var(--color-foreground));
}

@media screen and (min-width: 750px) {
cart-remove-button .button {
min-width: 3.5rem;
min-height: 3.5rem;
}
}

cart-remove-button .icon-remove {
height: 1.5rem;
width: 1.5rem;
}

.cart-item .loading-overlay {
top: 0;
left: auto;
right: auto;
bottom: 0;
padding: 0;
}

@media screen and (min-width: 750px) {
.cart-item .loading-overlay {
right: 0;
padding-top: 4.5rem;
bottom: auto;
}
}

.cart-item .loading-overlay:not(.hidden) ~ * {
visibility: hidden;
}

.cart-item__error {
display: flex;
align-items: flex-start;
margin-top: 1rem;
}

.cart-item__error-text {
font-size: 1.2rem;
order: 1;
}

.cart-item__error-text + svg {
flex-shrink: 0;
width: 1.2rem;
margin-right: 0.7rem;
}

.cart-item__error-text:empty + svg {
display: none;
}

.product-option {
color: rgba(var(--color-foreground), 0.7);
}

.product-option + .product-option {
margin-top: 0.4rem;
}

.product-option * {
display: inline;
margin: 0;
}

.cart-items thead th {
text-transform: uppercase;
}

@media screen and (max-width: 749px) {
.cart-items,
.cart-items thead,
.cart-items tbody {
display: block;
width: 100%;
}

.cart-items thead tr {
display: flex;
justify-content: space-between;
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.2);
margin-bottom: 4rem;
}

.cart-item {
display: grid;
grid-template: repeat(2, auto) / repeat(4, 1fr);
gap: 1.5rem;
margin-bottom: 3.5rem;
}

.cart-item:last-child {
margin-bottom: 0;
}

.cart-item__media {
grid-row: 1 / 3;
}

.cart-item__details {
grid-column: 2 / 4;
}

.cart-item__quantity {
grid-column: 2 / 5;
}

.cart-item__quantity-wrapper {
flex-wrap: wrap;
}

.cart-item__totals {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
}

.cart-item__error-text + svg {
margin-top: 0.4rem;
}

@media screen and (min-width: 750px) {
.cart-items {
border-spacing: 0;
border-collapse: separate;
box-shadow: none;
width: 100%;
display: table;
}

.cart-items th {
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.cart-items thead th:first-child {
width: 50%;
}

.cart-items th + th {
padding-left: 4rem;
}

.cart-items td {
vertical-align: top;
padding-top: 4rem;
}

.cart-item {
display: table-row;
}

.cart-item > td + td {
padding-left: 4rem;
}

.cart-item__details {
width: 35rem;
}

.cart-item__media {
width: 10rem;
}

.cart-item cart-remove-button {
margin: 0.5rem 0 0 1.5rem;
}

.cart-item__price-wrapper > *:only-child:not(.cart-item__discounted-prices) {
margin-top: 1rem;
}
}

@media screen and (min-width: 990px) {
.cart-item .cart-item__quantity,
.cart-items .cart-items__heading--wide {
padding-left: 6rem;
}

.cart-item__details {
width: 50rem;
}

.cart-items thead th:first-child {
width: 60%;
}
}

[KetanKumar]

oh no sorry i need cart item snippets file

[baseem]

@KetanKumar im so sorry if im bothering you im totally new to this kind of coding do you mean the below snippets i put in base.css  

.cart-item__quantity .quantity {
display: none !important;
}
th.cart-items__heading--wide.small-hide.caption-with-letter-spacing {
font-size: 0;
}

[KetanKumar]

@baseem 

see attachment just comment code

[baseem]

@KetanKumar 

<td class="cart-item__quantity">
<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">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}</span>
{% render 'icon-minus' %}
</button>
<input class="quantity__input"
type="number"
name="updates[]"
value="{{ item.quantity }}"
min="0"
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 }}"
>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<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>
<div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
<small class="cart-item__error-text"></small>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
</div>
</td>

[KetanKumar]

@baseem 

yes remove this code or comment 

[Mr_B_86]

Can you help us remove quantity (but keep delete/garbage) from dawn theme too? We want it gone from product page and cart.

site is here: shop.learnlife.com

Thank you!

[baseem]

@KetanKumar and this is the whole code in main-cart-item.liquid 

{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>

<cart-items class="page-width{% if cart == empty %} is-empty{% else %} section-{{ section.id }}-padding{% endif %}">
<div class="title-wrapper-with-link">
<h1 class="title title--primary">{{ 'sections.cart.title' | t }}</h1>
<a href="/" class="underlined-link">{{ 'general.continue_shopping' | t }}</a>
</div>

<div class="cart__warnings">
<h1 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h1>
<a href="/" class="button">
{{ 'general.continue_shopping' | t }}
</a>

{%- if shop.customer_accounts_enabled and customer == nil -%}
<h2 class="cart__login-title">{{ 'sections.cart.login.title' | t }}</h2>
<p class="cart__login-paragraph">
{{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
</p>
{%- endif -%}
</div>

<form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">
<div class="cart__items" id="main-cart-items" data-id="{{ section.id }}">
<div class="js-contents">
{%- if cart != empty -%}
<table class="cart-items">
<thead>
<tr>
<th class="caption-with-letter-spacing" colspan="2" scope="col">{{ 'sections.cart.headings.product' | t }}</th>
<th class="medium-hide large-up-hide right caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.total' | t }}</th>
<th class="cart-items__heading--wide small-hide caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.quantity' | t }}</th>
<th class="small-hide right caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.total' | t }}</th>
</tr>
</thead>

<tbody>
{%- for item in cart.items -%}
<tr class="cart-item" id="CartItem-{{ item.index | plus: 1 }}">
<td class="cart-item__media">
{% if item.image %}
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
<a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
<div class="cart-item__image-container gradient global-media-settings">
<img src="{{ item.image | image_url: width: 300 }}"
class="cart-item__image"
alt="{{ item.image.alt | escape }}"
loading="lazy"
width="150"
height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
>
</div>
{% endif %}
</td>

<td class="cart-item__details">
{%- if section.settings.show_vendor -%}
<p class="caption-with-letter-spacing light">{{ item.product.vendor }}</p>
{%- endif -%}

<a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>

{%- if item.original_price != item.final_price -%}
<div class="cart-item__discounted-prices">
<span class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</span>
<s class="cart-item__old-price product-option">
<span class="bcpo-cart-item-original-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_price'>{{ item.original_price | money }}</span></span>
</s>
<span class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</span>
<strong class="cart-item__final-price product-option">
<span class="bcpo-cart-item-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_price'>{{ item.final_price | money }}</span></span>
</strong>
</div>
{%- else -%}
<div class="product-option">
<span class="bcpo-cart-item-original-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_price'>{{ item.original_price | money }}</span></span>
</div>
{%- endif -%}

{%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
<dl>
{%- if item.product.has_only_default_variant == false -%}
{%- for option in item.options_with_values -%}
<div class="product-option">
<dt>{{ option.name }}: </dt>
<dd>{{ option.value }}</dd>
</div>
{%- endfor -%}
{%- endif -%}

{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<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>
{%- endif -%}
{%- endfor -%}
</dl>

<p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
{%- endif -%}

<ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount in item.discounts -%}
<li class="discounts__discount">
{%- render 'icon-discount' -%}
{{ discount.title }}
</li>
{%- endfor -%}
</ul>
</td>

<td class="cart-item__totals right medium-hide large-up-hide">
<div class="loading-overlay hidden">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<div class="cart-item__price-wrapper">
{%- if item.original_line_price != item.final_line_price -%}
<dl class="cart-item__discounted-prices">
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</dt>
<dd>
<s class="cart-item__old-price price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</s>
</dd>
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</dt>
<dd class="price price--end">
<span class="bcpo-cart-item-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_line_price'>{{ item.final_line_price | money }}</span></span>
</dd>
</dl>
{%- else -%}
<span class="price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</span>
{%- endif -%}

{%- if item.variant.available and item.unit_price_measurement -%}
<div class="unit-price caption">
<span class="visually-hidden"><span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.unit_price' | t }}</span></span>
{{ item.variant.unit_price | money }}
<span aria-hidden="true">/</span>
<span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- if item.variant.unit_price_measurement.reference_value != 1 -%}
{{- item.variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.variant.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}
</div>
</td>

<td class="cart-item__quantity">
<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">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}</span>
{% render 'icon-minus' %}
</button>
<input class="quantity__input"
type="number"
name="updates[]"
value="{{ item.quantity }}"
min="0"
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 }}"
>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<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>
<div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
<small class="cart-item__error-text"></small>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
</div>
</td>

<td class="cart-item__totals right small-hide">
<div class="loading-overlay hidden">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>

<div class="cart-item__price-wrapper">
{%- if item.original_line_price != item.final_line_price -%}
<dl class="cart-item__discounted-prices">
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</dt>
<dd>
<s class="cart-item__old-price price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</s>
</dd>
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</dt>
<dd class="price price--end">
<span class="bcpo-cart-item-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_line_price'>{{ item.final_line_price | money }}</span></span>
</dd>
</dl>
{%- else -%}
<span class="price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</span>
{%- endif -%}

{%- if item.variant.available and item.unit_price_measurement -%}
<div class="unit-price caption">
<span class="visually-hidden"><span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.unit_price' | t }}</span></span>
{{ item.variant.unit_price | money }}
<span aria-hidden="true">/</span>
<span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- if item.variant.unit_price_measurement.reference_value != 1 -%}
{{- item.variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.variant.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}
</div>
</td>
</tr>
{%- endfor -%}
</tbody>
</table>
{%- endif -%}
</div>
</div>

<p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
<p class="visually-hidden" id="shopping-cart-line-item-status" aria-live="polite" aria-hidden="true" role="status">{{ 'accessibility.loading' | t }}</p>
</form>
</cart-items>

{% schema %}
{
"name": "t:sections.main-cart-items.name",
"settings": [
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.main-cart-items.settings.show_vendor.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}

<!-- bcpo done -->{% comment %}<!-- ymq option done -->{% endcomment %}

[KetanKumar]

{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>

<cart-items class="page-width{% if cart == empty %} is-empty{% else %} section-{{ section.id }}-padding{% endif %}">
<div class="title-wrapper-with-link">
<h1 class="title title--primary">{{ 'sections.cart.title' | t }}</h1>
<a href="/" class="underlined-link">{{ 'general.continue_shopping' | t }}</a>
</div>

<div class="cart__warnings">
<h1 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h1>
<a href="/" class="button">
{{ 'general.continue_shopping' | t }}
</a>

{%- if shop.customer_accounts_enabled and customer == nil -%}
<h2 class="cart__login-title">{{ 'sections.cart.login.title' | t }}</h2>
<p class="cart__login-paragraph">
{{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
</p>
{%- endif -%}
</div>

<form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">
<div class="cart__items" id="main-cart-items" data-id="{{ section.id }}">
<div class="js-contents">
{%- if cart != empty -%}
<table class="cart-items">
<thead>
<tr>
<th class="caption-with-letter-spacing" colspan="2" scope="col">{{ 'sections.cart.headings.product' | t }}</th>
<th class="medium-hide large-up-hide right caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.total' | t }}</th>
<th class="cart-items__heading--wide small-hide caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.quantity' | t }}</th>
<th class="small-hide right caption-with-letter-spacing" colspan="1" scope="col">{{ 'sections.cart.headings.total' | t }}</th>
</tr>
</thead>

<tbody>
{%- for item in cart.items -%}
<tr class="cart-item" id="CartItem-{{ item.index | plus: 1 }}">
<td class="cart-item__media">
{% if item.image %}
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
<a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
<div class="cart-item__image-container gradient global-media-settings">
<img src="{{ item.image | image_url: width: 300 }}"
class="cart-item__image"
alt="{{ item.image.alt | escape }}"
loading="lazy"
width="150"
height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
>
</div>
{% endif %}
</td>

<td class="cart-item__details">
{%- if section.settings.show_vendor -%}
<p class="caption-with-letter-spacing light">{{ item.product.vendor }}</p>
{%- endif -%}

<a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>

{%- if item.original_price != item.final_price -%}
<div class="cart-item__discounted-prices">
<span class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</span>
<s class="cart-item__old-price product-option">
<span class="bcpo-cart-item-original-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_price'>{{ item.original_price | money }}</span></span>
</s>
<span class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</span>
<strong class="cart-item__final-price product-option">
<span class="bcpo-cart-item-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_price'>{{ item.final_price | money }}</span></span>
</strong>
</div>
{%- else -%}
<div class="product-option">
<span class="bcpo-cart-item-original-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_price'>{{ item.original_price | money }}</span></span>
</div>
{%- endif -%}

{%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
<dl>
{%- if item.product.has_only_default_variant == false -%}
{%- for option in item.options_with_values -%}
<div class="product-option">
<dt>{{ option.name }}: </dt>
<dd>{{ option.value }}</dd>
</div>
{%- endfor -%}
{%- endif -%}

{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<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>
{%- endif -%}
{%- endfor -%}
</dl>

<p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
{%- endif -%}

<ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount in item.discounts -%}
<li class="discounts__discount">
{%- render 'icon-discount' -%}
{{ discount.title }}
</li>
{%- endfor -%}
</ul>
</td>

<td class="cart-item__totals right medium-hide large-up-hide">
<div class="loading-overlay hidden">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<div class="cart-item__price-wrapper">
{%- if item.original_line_price != item.final_line_price -%}
<dl class="cart-item__discounted-prices">
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</dt>
<dd>
<s class="cart-item__old-price price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</s>
</dd>
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</dt>
<dd class="price price--end">
<span class="bcpo-cart-item-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_line_price'>{{ item.final_line_price | money }}</span></span>
</dd>
</dl>
{%- else -%}
<span class="price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</span>
{%- endif -%}

{%- if item.variant.available and item.unit_price_measurement -%}
<div class="unit-price caption">
<span class="visually-hidden"><span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.unit_price' | t }}</span></span>
{{ item.variant.unit_price | money }}
<span aria-hidden="true">/</span>
<span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- if item.variant.unit_price_measurement.reference_value != 1 -%}
{{- item.variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.variant.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}
</div>
</td>
{% comment %}
<td class="cart-item__quantity">
<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">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}</span>
{% render 'icon-minus' %}
</button>
<input class="quantity__input"
type="number"
name="updates[]"
value="{{ item.quantity }}"
min="0"
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 }}"
>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<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>
<div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
<small class="cart-item__error-text"></small>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
</div>
</td>
{% endcomment %}
<td class="cart-item__totals right small-hide">
<div class="loading-overlay hidden">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>

<div class="cart-item__price-wrapper">
{%- if item.original_line_price != item.final_line_price -%}
<dl class="cart-item__discounted-prices">
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.regular_price' | t }}</span>
</dt>
<dd>
<s class="cart-item__old-price price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</s>
</dd>
<dt class="visually-hidden">
<span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.sale_price' | t }}</span>
</dt>
<dd class="price price--end">
<span class="bcpo-cart-item-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_final_line_price'>{{ item.final_line_price | money }}</span></span>
</dd>
</dl>
{%- else -%}
<span class="price price--end">
<span class="bcpo-cart-item-original-line-price" data-key="{{item.key}}"><span data-ymq-item-key="{{ item.key }}" class='ymq_item_original_line_price'>{{ item.original_line_price | money }}</span></span>
</span>
{%- endif -%}

{%- if item.variant.available and item.unit_price_measurement -%}
<div class="unit-price caption">
<span class="visually-hidden"><span data-ymq-item-key="{{ product.key }}" class='ymq_item_price'>{{ 'products.product.price.unit_price' | t }}</span></span>
{{ item.variant.unit_price | money }}
<span aria-hidden="true">/</span>
<span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- if item.variant.unit_price_measurement.reference_value != 1 -%}
{{- item.variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.variant.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}
</div>
</td>
</tr>
{%- endfor -%}
</tbody>
</table>
{%- endif -%}
</div>
</div>

<p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
<p class="visually-hidden" id="shopping-cart-line-item-status" aria-live="polite" aria-hidden="true" role="status">{{ 'accessibility.loading' | t }}</p>
</form>
</cart-items>

{% schema %}
{
"name": "t:sections.main-cart-items.name",
"settings": [
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.main-cart-items.settings.show_vendor.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
]
}
{% endschema %}

<!-- bcpo done -->{% comment %}<!-- ymq option done -->{% endcomment %}

@baseem 

thanks can you please update this code

[HCKinard]

Hi KetanKumar, 

I tried both of these solutions on the dawn theme and neither worked. Can you help me remove the Quantity Counting Button. I just want it to be 'Add to Cart' since we are selling one of a kind items. 

Website is AuthenticLuxuries.com

Thank you! 

[emartin1]

Thank you very much!

In my Crave theme it has also worked perfectly.

[HCKinard]

I am not seeing the base.css in my assets? I am using the Dawn Template. Thanks! 

[emartin1]

Please, check first line

[HCKinard]

Also, I want to remove quantity from the whole store. We are selling one of a kind items. Thanks!

[adelafrine]

Hello, I did this to Refresh theme, the quantity selector is removed, but still have this button here, any solutions, please?

[KetanKumar]

@adelafrine 

can you please send store url