Hello i want to remove the pricing for certain products on my collection page. I have already removed the pricing, buy button, and add to cart button once the product is selected but the price remains there when scrolling through collection pages.Thank you in advance. My store url is tf-supplements-superstore.myshopify.com and password is trahso. I only want to remove prices for certain products (high lighted yellow) not all the prices. Ive attached a photo below.
Hello @Benjamin83271 ,
Follow this:
- Navigate to Online Store->Theme->Edit code
- snippet->/product-card.liquid → replace original code with below code.
<!-- /snippets/product-card.liquid -->
{% comment %}
The product card snippet is passed a liquid object, used in this file
as "product". The object is either "product" or "item", the latter if
it is from search results.
{% endcomment %}
{%- assign current_variant = product.selected_or_first_available_variant -%}
<a href="{{ product.url }}" class="product-card">
{% assign image = product.featured_image %}
<div class="product-card__image-container">
<div class="product-card__image-wrapper">
<div class="product-card__image js" style="max-width: {% include 'image-width' with image: image, width: 235 %}px;" data-image-id="{{ image.id }}" data-image-with-placeholder-wrapper>
<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="contain"
data-image
alt="{{ image.alt | escape }}">
</div>
<div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
</div>
<noscript>
<img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image">
</noscript>
</div>
</div>
<div class="product-card__info">
{% if settings.product_vendor_enable %}
<div class="product-card__brand">{{ product.vendor }}</div>
{% endif %}
<div class="product-card__name">{{ product.title }}</div>
{% if product.available %}
<div class="product-card__price">
{% if product.price == 0 %}
{% else %}
{% if product.compare_at_price > product.price %}
{% comment %}
Product is on sale
{% endcomment %}
{% if product.price_varies %}
{% assign sale_price = product.price | money_without_trailing_zeros %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{% else %}
{% comment %}
Not on sale, but could still have varying prices
{% endcomment %}
{% if product.price_varies %}
{% assign price = product.price | money_without_trailing_zeros %}
{{ 'products.product.from_text_html' | t: price: price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{% endif %}
{% endif %}
{%- unless product.price_varies -%}
{%- if current_variant.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
{%- endif -%}
{%- endunless -%}
</div>
{% else %}
<div class="product-card__availability">
{{ 'products.product.sold_out' | t }}
</div>
{% endif %}
</div>
{% if product.compare_at_price > product.price %}
{% comment %}
A visually-hidden label before regular/sale prices clarifies
prices for screen readers, so hide the sale tag from them.
{% endcomment %}
<div class="product-tag product-tag--absolute" aria-hidden="true">
{{ 'products.product.on_sale' | t }}
</div>
{% endif %}
<div class="product-card__overlay">
{% assign view_string_length = 'products.product.view' | t | size %}
<span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
</div>
</a>
- Save it.
Thank you
1 Like
@Benjamin83271 Please follow up below steps, May that help you.
Step1: Online Store → Themes → Actions → Edit Code
Step2: Open the 2 files theme.scss.liquid and homepage.scss.liquid
Step3: Then paste this code at the very bottom in a new line.
.template-collection .price__unit ,.price-item--sale-only, .price-item--regular, .price__sale, .price__regular { display: none !Important; }
Wow thank you so much!
I do not have that option in snippet. What other file would it be under?
How can i only apply this to home page and collection page? When I add it it removes all prices even on product page. i want to keep price on product page but remove it on home page and collection pages.