how to make out of stock products unclickable.

[topmost1]

i really need help with this, I'm using the impulse them and i'm having trouble with making the out of stock product visible but display out of stock. I will be happy  if this works.

[ChoosiZon]

You can try inside your anchor tag put this:

{% if product.available != true %} disableClick {% endif %}

then css :

.disableClick{
    pointer-events: none;
}

[ChoosiZon]

Or this

{% if product.available == true %} href="{{ product.url | within: collection }}" {% endif %} 

tested working. 

[topmost1]

Can you please shed more light on how i can apply the code sir?

[ChoosiZon]

---

---

I don't have this paid theme, so i need your help to find the right file.

This file likely called 'grid-product_XXXXXX.liquid', and is under snippets in your theme.

Find that file, copy and paste here inside </> icon on top.

Confirm you want unclickable if no stock ok. 

[topmost1]

 the only snippet i found that is close to is this 'collection-grid-item.liquid' 

Click to expand...

{%- liquid
unless grid_item_width
assign grid_item_width = 'small--one-half medium-up--one-third'
endunless

unless background_position
assign background_position = 'center center'
endunless

if block.settings.title != blank
assign title_output = block.settings.title
else
if collection.empty?
assign title_output = 'home_page.onboarding.collection_title' | t
elsif collection_title
assign title_output = collection_title
else
assign title_output = collection.title | escape
endif
endif
-%}

<div class="grid__item {{ grid_item_width }}">
<a href="{{ collection.url }}" class="collection-item collection-item--{{ settings.collection_grid_style }}" data-aos="row-of-{{ per_row }}">

{%- liquid
if settings.collection_grid_image == 'collection' and collection.image
assign collection_image = collection.image
else
assign collection_image = collection.products.first.featured_media.preview_image
endif
-%}

is this the right one sir? 

[ChoosiZon]

---

@topmost1 wrote:

 the only snippet i found that is close to is this 'collection-grid-item.liquid' 

this the right one ? 

---

 I think this is the one. Copy the whole file and paste into </>.

I need to find the 'a' tag and add a little code. Then it will work.

[topmost1]

I  don't understand what you mean by copying the whole file into </> sir. and also you said you need to find a tag and input some code sir.

[ChoosiZon]

---

@topmost1 wrote:

I  don't understand what you mean by copying the whole file into </> sir. and also you said you need to find a tag and input some code sir.

---

 It's quite easy to copy the whole file. Just go to that file, click 'Ctrl' + 'A' on your keyboard to select whole file. Then 'Ctrl' + 'C' to copy.

Then come here paste into </> (look at top right of this editor),

by clicking 'Ctrl' + 'V'.

Click 'Post'.

Alternatively I can sent you collaborator request to access your theme.

[topmost1]

here is the code

{%- assign fixed_aspect_ratio = false -%}
{% unless image_size == 'natural' %}
  {%- assign fixed_aspect_ratio = true -%}
{% endunless %}

<div class="grid__item {{ grid_item_width }} hover-grow" data-aos="row-of-{{ per_row }}">
  <div class="grid">
    <div class="grid__item">
      {%- if article.image -%}
        <a href="{{ article.url }}" class="article__grid-image" aria-label="{{ article.title | escape }}">
          {%- if fixed_aspect_ratio -%}
            <div class="image-wrap">
              <div
                class="grid__image-ratio grid__image-ratio--cover grid__image-ratio--{{ image_size }} lazyload"
                data-bgset="{% render 'bgset', image: article.image %}"
                data-sizes="auto">
              </div>
              <noscript>
                <img class="lazyloaded" src="{{ article.image | img_url: '400x' }}" alt="{{ article.title | escape }}">
              </noscript>
            </div>
          {%- else -%}
            <div class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: article.image.aspect_ratio }}%;">
              {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              <img class="lazyload"
                  data-src="{{ img_url }}"
                  data-widths="[180, 360, 540, 720, 900, 1080]"
                  data-aspectratio="{{ article.image.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ article.image.alt | escape }}">
              <noscript>
                <img class="lazyloaded" src="{{ article.image | img_url: '400x' }}" alt="{{ article.title | escape }}">
              </noscript>
            </div>
          {%- endif -%}
        </a>
      {%- else -%}
        <div class="article__grid-image">
          {%- if fixed_aspect_ratio -%}
            <div class="image-wrap">
              <div
                class="grid__image-ratio grid__image-ratio--cover grid__image-ratio--{{ image_size }} lazyload">
              </div>
            </div>
          {%- endif -%}
        </div>
      {%- endif -%}
    </div>
    <div class="grid__item">
      <div class="article__grid-meta">
        {%- if section.settings.blog_show_date or article.tags.size > 0 or articles.comments_count > 0 -%}
          <div class="article__date">
            {%- if section.settings.blog_show_tags and article.tags.size > 0 -%}
              {%- for tag in article.tags -%}
                {% if tag contains "_" %}{%- assign tag_starts_with = tag | slice: 0 -%}{% if tag_starts_with == "_" %}{% if tag_count %}{%- assign tag_count = tag_count | minus: 1 | at_least: 0 -%}{% endif %}{% continue %}{% endif %}{% endif %}
                <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a> &middot;
              {%- endfor -%}
            {%- endif -%}
            {%- if section.settings.blog_show_comments and article.comments_count > 0 -%}
              <a href="{{ article.url }}#comments">
                {{ 'blogs.comments.with_count' | t: count: article.comments_count }}
              </a> &middot;
            {%- endif -%}
            {%- if section.settings.blog_show_date -%}
              {{ article.published_at | time_tag: format: 'month_day_year' }}
            {%- endif -%}
          </div>
        {%- endif -%}

        <a href="{{ article.url }}" class="article__title">{{ article.title }}</a>

        {%- if section.settings.blog_show_author -%}
          <div class="article__author">by {{ article.author }}</div>
        {%- endif -%}
        
        {%- if section.settings.blog_show_excerpt -%}
          <div class="rte article__excerpt">
            {%- if article.excerpt.size > 0 -%}
              {{ article.excerpt }}
            {%- else -%}
              {{ article.content | strip_html | truncatewords: 40 }}
            {%- endif -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

[ChoosiZon]

It is wrong file.

The file is collection-grid-item.liquid under snippets.

Could be quite big file, but no problem.

[topmost1]

Send the collaborator access to topmostfunnel@gmail.com

[topmost1]

I've created an account with only the theme access AND I'VE INBOX YOU WITH THE LOGINS

[ChoosiZon]

Not received access code yet. You can PM url directly and i send you request also.

[topmost1]

SENT NOW SIR.

USE THE HOLIDAY 2021 THEME SIR.

[ChoosiZon]

Hi, it's done.

You can check with a all variants out-of-stock product.

[ChoosiZon]

The code edit is at product-grid-item.liquid.

[topmost1]

 PLEASE DO YOU USE THE THEME "HOLIDAY 2021"

[ChoosiZon]

---

@topmost1 wrote:

 PLEASE DO YOU USE THE THEME "HOLIDAY 2021"

---

Yes, it's the theme at top, unpublished.

[ChoosiZon]

To test, you can create a test product and set the stock to 0.

[reverie-vtg]

Also need help with this and would like to remove sale proce from sold out items. Any help would be appreciated, thanks

[ChoosiZon]

HI, maybe you can show your site link so that someone may help.

[reverie-vtg]

https://shopreverievintage.com/

[reverie-vtg]

thank you, let me know if you need anything else