Display Inventory count on each item on Collection page DAWN THEME 2.3.0

[MJGTrading]

I'm trying to display the inventory quantity for each product on the collection page. I would love it to be displayed above or below the Add to Cart portion. I have gone through multiple suggestions but can't seem to get this to work.

https://business.mjgtrading.com/collections/eyeglasses

[Guleria]

Hello @MJGTrading ,

Just above the atc button add this code.

{{ card_product.inventory_quantity }}

Thanks

[MJGTrading]

Hi Guleria

Which template would I add this? Collection.json, base.css??

[Guleria]

snippets -> card-product.liquid
may be code location vary because I have version 15.1.0

[DaisyVo]

Hi @MJGTrading 

Could you please share one member account to log in to your front store? 

Looking forward to hearing from you soon. Thank you!

Best,

Daisy - Avada Support Team.

[namphan]

Hi @MJGTrading,

Please send me the code of card-product.liquid file, I will help you add it

[MJGTrading]

{% capture wpd_discounted_prices %}{%- render 'wcp_discount' wcp_discount:product_card_product , wpd_is_render:'yes' -%}{% endcapture %}

{%- capture wcp_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price' -%}{%- endcapture -%}
{% assign wcp_price = wcp_price | minus: 0 %}

{%- capture wcp_compare_at_price -%}{%- render 'wcp_render_discount', wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price' -%}{%- endcapture -%}
{% if wcp_compare_at_price != blank %}
{% assign wcp_compare_at_price = wcp_compare_at_price | minus: 0 %}
{% else %}
{% assign wcp_compare_at_price = nil %}
{% endif %}

{%- capture wcp_compare_at_price_min -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price_min' -%}{%- endcapture -%}
{% assign wcp_compare_at_price_min = wcp_compare_at_price_min | minus: 0 %}

{%- capture wcp_compare_at_price_max -%}{%- render 'wcp_render_discount', wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price_max' -%}{%- endcapture -%}
{% assign wcp_compare_at_price_max = wcp_compare_at_price_max | minus: 0 %}

{%- capture wcp_price_min -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price_min' -%}{%- endcapture -%}
{% assign wcp_price_min = wcp_price_min | minus: 0 %}

{%- capture wcp_price_max -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price_max' -%}{%- endcapture -%}
{% assign wcp_price_max = wcp_price_max | minus: 0 %}


{%- capture v_discount_tag -%}{%-render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'v_discount_tag'-%}{%- endcapture -%}
{% assign v_discount_tag = v_discount_tag | strip %}

{%- capture p_discount_tag -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'p_discount_tag' -%}{%- endcapture -%}
{% assign p_discount_tag = p_discount_tag | strip %}

{% assign raw_set_prices = product.metafields.wcp_set_prices.wcp_set_prices %}
{% assign set_prices_array = blank %}
{% if raw_set_prices %}
{% assign set_prices_array = raw_set_prices | split: ',' %}
{% endif %}

{%- capture wcp_discount_value -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_discount_value' -%}{%- endcapture -%}

{% capture wcp_v_discounted_prices %}{%- render 'wcp_variant' , wcp_variant:product_card_product.selected_or_first_available_variant , set_prices_array:set_prices_array , wpd_is_render:'yes', v_discount_tag : v_discount_tag , wcp_discount_value : wcp_discount_value -%}{%- endcapture -%}

{%- capture wcp_v_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wcp_v_discounted_prices, price_variable:'wcp_v_price' -%}{%- endcapture -%}
{% assign wcp_v_price = wcp_v_price | minus: 0 %}

{%- capture wcp_v_compare_at_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wcp_v_discounted_prices, price_variable:'wcp_v_compare_at_price' -%}{%- endcapture -%}
{% if wcp_v_compare_at_price != blank %}
{% assign wcp_v_compare_at_price = wcp_v_compare_at_price | minus: 0 %}
{% else %}
{% assign wcp_v_compare_at_price = nil %}
{% endif %}
{% comment %}
Renders a product card

Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_image_outline: {Boolean} Show card outline. Default: true (optional)
- show_rating: {Boolean} Show the product rating. Default: false

Usage:
{% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

<div class="card-wrapper">
<div class="card-information">
<div class="card-information__wrapper">
{%- if show_vendor -%}
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
{%- endif -%}

{%- if product_card_product.featured_media -%}
<h3 class="card-information__text h5">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title | escape }}
</a>
</h3>
{%- endif -%}{%- assign inventory = card_product.selected_or_first_available_variant.inventory_quantity -%}
{%- if template.name == "collection" and inventory >= 1 -%}
<p>Inventory: {{ inventory }}</p>
{%- endif -%}

{% comment %} TODO: metafield {% endcomment %}
<span class="caption-large light">{{ block.settings.description | escape }}</span>
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
<div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
<span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
</p>
{%- endif -%}
{% render 'price', product: product_card_product, price_class: '' %}
</div>
</div>

<div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
<div class="card__inner">
{%- if product_card_product.featured_media -%}
{%- liquid
assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}

<div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
<div class="media media--transparent media--{{ media_size }} media--hover-effect"
{% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
>
<img
srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
src="{{ product_card_product.featured_media | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.featured_media.alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.featured_media.width }}"
height="{{ product_card_product.featured_media.height }}"
>

{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
src="{{ product_card_product.media[1] | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.media[1].alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.media[1].width }}"
height="{{ product_card_product.media[1].height }}"
>
{%- endif -%}
</div>
</div>
{%- else -%}
<div class="card__content">
<h2 class="card__text h3">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title }}
</a>
</h2>
</div>
{%- endif -%}

<div class="card__badge">
{%- if product_card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
{%- elsif wcp_compare_at_price > wcp_price and product_card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
</div>
</div>
</div>
</div>

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
<input min="1" type="number" id="quantity" name="quantity" max="{{ product_card_product.first_available_variant.inventory_quantity }}" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
<input type="hidden" name="return_to" value="back" />
</form>
{% if variant.available %}
<div class="card__price-stock">{{ variant.inventory_quantity }} Now In stock</div>
{% endif %}

[namphan · Accepted solution]

Hi @MJGTrading,

Please change all code:

{% capture wpd_discounted_prices %}{%- render 'wcp_discount' wcp_discount:product_card_product , wpd_is_render:'yes' -%}{% endcapture %}

{%- capture wcp_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price' -%}{%- endcapture -%}
{% assign wcp_price = wcp_price | minus: 0 %}

{%- capture wcp_compare_at_price -%}{%- render 'wcp_render_discount', wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price' -%}{%- endcapture -%}
{% if wcp_compare_at_price != blank %}
{% assign wcp_compare_at_price = wcp_compare_at_price | minus: 0 %}
{% else %}
{% assign wcp_compare_at_price = nil %}
{% endif %}

{%- capture wcp_compare_at_price_min -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price_min' -%}{%- endcapture -%}
{% assign wcp_compare_at_price_min = wcp_compare_at_price_min | minus: 0 %}

{%- capture wcp_compare_at_price_max -%}{%- render 'wcp_render_discount', wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price_max' -%}{%- endcapture -%}
{% assign wcp_compare_at_price_max = wcp_compare_at_price_max | minus: 0 %}

{%- capture wcp_price_min -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price_min' -%}{%- endcapture -%}
{% assign wcp_price_min = wcp_price_min | minus: 0 %}

{%- capture wcp_price_max -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price_max' -%}{%- endcapture -%}
{% assign wcp_price_max = wcp_price_max | minus: 0 %}


{%- capture v_discount_tag -%}{%-render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'v_discount_tag'-%}{%- endcapture -%}
{% assign v_discount_tag = v_discount_tag | strip %}

{%- capture p_discount_tag -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'p_discount_tag' -%}{%- endcapture -%}
{% assign p_discount_tag = p_discount_tag | strip %}

{% assign raw_set_prices = product.metafields.wcp_set_prices.wcp_set_prices %}
{% assign set_prices_array = blank %}
{% if raw_set_prices %}
{% assign set_prices_array = raw_set_prices | split: ',' %}
{% endif %}

{%- capture wcp_discount_value -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_discount_value' -%}{%- endcapture -%}

{% capture wcp_v_discounted_prices %}{%- render 'wcp_variant' , wcp_variant:product_card_product.selected_or_first_available_variant , set_prices_array:set_prices_array , wpd_is_render:'yes', v_discount_tag : v_discount_tag , wcp_discount_value : wcp_discount_value -%}{%- endcapture -%}

{%- capture wcp_v_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wcp_v_discounted_prices, price_variable:'wcp_v_price' -%}{%- endcapture -%}
{% assign wcp_v_price = wcp_v_price | minus: 0 %}

{%- capture wcp_v_compare_at_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wcp_v_discounted_prices, price_variable:'wcp_v_compare_at_price' -%}{%- endcapture -%}
{% if wcp_v_compare_at_price != blank %}
{% assign wcp_v_compare_at_price = wcp_v_compare_at_price | minus: 0 %}
{% else %}
{% assign wcp_v_compare_at_price = nil %}
{% endif %}
{% comment %}
Renders a product card

Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_image_outline: {Boolean} Show card outline. Default: true (optional)
- show_rating: {Boolean} Show the product rating. Default: false

Usage:
{% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

<div class="card-wrapper">
<div class="card-information">
<div class="card-information__wrapper">
{%- if show_vendor -%}
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
{%- endif -%}

{%- if product_card_product.featured_media -%}
<h3 class="card-information__text h5">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title | escape }}
</a>
</h3>
{%- endif -%}{%- assign inventory = card_product.selected_or_first_available_variant.inventory_quantity -%}
{%- if template.name == "collection" and inventory >= 1 -%}
<p>Inventory: {{ inventory }}</p>
{%- endif -%}

{% comment %} TODO: metafield {% endcomment %}
<span class="caption-large light">{{ block.settings.description | escape }}</span>
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
<div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
<span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
</p>
{%- endif -%}
{% render 'price', product: product_card_product, price_class: '' %}
</div>
</div>

<div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
<div class="card__inner">
{%- if product_card_product.featured_media -%}
{%- liquid
assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}

<div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
<div class="media media--transparent media--{{ media_size }} media--hover-effect"
{% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
>
<img
srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
src="{{ product_card_product.featured_media | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.featured_media.alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.featured_media.width }}"
height="{{ product_card_product.featured_media.height }}"
>

{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
src="{{ product_card_product.media[1] | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.media[1].alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.media[1].width }}"
height="{{ product_card_product.media[1].height }}"
>
{%- endif -%}
</div>
</div>
{%- else -%}
<div class="card__content">
<h2 class="card__text h3">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title }}
</a>
</h2>
</div>
{%- endif -%}

<div class="card__badge">
{%- if product_card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
{%- elsif wcp_compare_at_price > wcp_price and product_card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
</div>
</div>
</div>
</div>
<p
  class="caption-with-letter-spacing light{% if product_card_product.selected_or_first_available_variant.inventory_management != 'shopify' %} visibility-hidden{% endif %}"
>
  {%- if product_card_product.selected_or_first_available_variant.inventory_management == 'shopify' -%}
    {%- if product_card_product.selected_or_first_available_variant.inventory_quantity > 0 -%}
        {{- product_card_product.selected_or_first_available_variant.inventory_quantity -}}
    {%- else -%}
      {%- if product_card_product.selected_or_first_available_variant.inventory_policy == 'continue' -%}
        {{- 'products.product.inventory_out_of_stock_continue_selling' | t -}}
      {%- else -%}
        {{- 'products.product.inventory_out_of_stock' | t -}}
      {%- endif -%}
    {%- endif -%}
  {%- endif -%}
</p>
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
<input min="1" type="number" id="quantity" name="quantity" max="{{ product_card_product.first_available_variant.inventory_quantity }}" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
<input type="hidden" name="return_to" value="back" />
</form>
{% if variant.available %}
<div class="card__price-stock">{{ variant.inventory_quantity }} Now In stock</div>
{% endif %}

[MJGTrading]

That Worked thank you thank you. Is it possible to bold that number  and or say in stock next to it.

[namphan]

Hi @MJGTrading,

Please change code here:

Code:

<p
  class="caption-with-letter-spacing font-body-bold{% if product_card_product.selected_or_first_available_variant.inventory_management != 'shopify' %} visibility-hidden{% endif %}"
>
  {%- if product_card_product.selected_or_first_available_variant.inventory_management == 'shopify' -%}
    {%- if product_card_product.selected_or_first_available_variant.inventory_quantity > 0 -%}
      {{-
        'products.product.inventory_in_stock_show_count'
        | t: quantity: product_card_product.selected_or_first_available_variant.inventory_quantity
      -}}
    {%- else -%}
      {%- if product_card_product.selected_or_first_available_variant.inventory_policy == 'continue' -%}
        {{- 'products.product.inventory_out_of_stock_continue_selling' | t -}}
      {%- else -%}
        {{- 'products.product.inventory_out_of_stock' | t -}}
      {%- endif -%}
    {%- endif -%}
  {%- endif -%}
</p>

[MJGTrading]

this change kicked back an error. 

[namphan]

Hi @MJGTrading,

Please change all code:

{% capture wpd_discounted_prices %}{%- render 'wcp_discount' wcp_discount:product_card_product , wpd_is_render:'yes' -%}{% endcapture %}

{%- capture wcp_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price' -%}{%- endcapture -%}
{% assign wcp_price = wcp_price | minus: 0 %}

{%- capture wcp_compare_at_price -%}{%- render 'wcp_render_discount', wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price' -%}{%- endcapture -%}
{% if wcp_compare_at_price != blank %}
{% assign wcp_compare_at_price = wcp_compare_at_price | minus: 0 %}
{% else %}
{% assign wcp_compare_at_price = nil %}
{% endif %}

{%- capture wcp_compare_at_price_min -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price_min' -%}{%- endcapture -%}
{% assign wcp_compare_at_price_min = wcp_compare_at_price_min | minus: 0 %}

{%- capture wcp_compare_at_price_max -%}{%- render 'wcp_render_discount', wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price_max' -%}{%- endcapture -%}
{% assign wcp_compare_at_price_max = wcp_compare_at_price_max | minus: 0 %}

{%- capture wcp_price_min -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price_min' -%}{%- endcapture -%}
{% assign wcp_price_min = wcp_price_min | minus: 0 %}

{%- capture wcp_price_max -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price_max' -%}{%- endcapture -%}
{% assign wcp_price_max = wcp_price_max | minus: 0 %}


{%- capture v_discount_tag -%}{%-render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'v_discount_tag'-%}{%- endcapture -%}
{% assign v_discount_tag = v_discount_tag | strip %}

{%- capture p_discount_tag -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'p_discount_tag' -%}{%- endcapture -%}
{% assign p_discount_tag = p_discount_tag | strip %}

{% assign raw_set_prices = product.metafields.wcp_set_prices.wcp_set_prices %}
{% assign set_prices_array = blank %}
{% if raw_set_prices %}
{% assign set_prices_array = raw_set_prices | split: ',' %}
{% endif %}

{%- capture wcp_discount_value -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_discount_value' -%}{%- endcapture -%}

{% capture wcp_v_discounted_prices %}{%- render 'wcp_variant' , wcp_variant:product_card_product.selected_or_first_available_variant , set_prices_array:set_prices_array , wpd_is_render:'yes', v_discount_tag : v_discount_tag , wcp_discount_value : wcp_discount_value -%}{%- endcapture -%}

{%- capture wcp_v_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wcp_v_discounted_prices, price_variable:'wcp_v_price' -%}{%- endcapture -%}
{% assign wcp_v_price = wcp_v_price | minus: 0 %}

{%- capture wcp_v_compare_at_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wcp_v_discounted_prices, price_variable:'wcp_v_compare_at_price' -%}{%- endcapture -%}
{% if wcp_v_compare_at_price != blank %}
{% assign wcp_v_compare_at_price = wcp_v_compare_at_price | minus: 0 %}
{% else %}
{% assign wcp_v_compare_at_price = nil %}
{% endif %}
{% comment %}
Renders a product card

Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_image_outline: {Boolean} Show card outline. Default: true (optional)
- show_rating: {Boolean} Show the product rating. Default: false

Usage:
{% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

<div class="card-wrapper">
<div class="card-information">
<div class="card-information__wrapper">
{%- if show_vendor -%}
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
{%- endif -%}

{%- if product_card_product.featured_media -%}
<h3 class="card-information__text h5">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title | escape }}
</a>
</h3>
{%- endif -%}{%- assign inventory = card_product.selected_or_first_available_variant.inventory_quantity -%}
{%- if template.name == "collection" and inventory >= 1 -%}
<p>Inventory: {{ inventory }}</p>
{%- endif -%}

{% comment %} TODO: metafield {% endcomment %}
<span class="caption-large light">{{ block.settings.description | escape }}</span>
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
<div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
<span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
</p>
{%- endif -%}
{% render 'price', product: product_card_product, price_class: '' %}
</div>
</div>

<div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
<div class="card__inner">
{%- if product_card_product.featured_media -%}
{%- liquid
assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}

<div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
<div class="media media--transparent media--{{ media_size }} media--hover-effect"
{% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
>
<img
srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
src="{{ product_card_product.featured_media | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.featured_media.alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.featured_media.width }}"
height="{{ product_card_product.featured_media.height }}"
>

{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
src="{{ product_card_product.media[1] | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.media[1].alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.media[1].width }}"
height="{{ product_card_product.media[1].height }}"
>
{%- endif -%}
</div>
</div>
{%- else -%}
<div class="card__content">
<h2 class="card__text h3">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title }}
</a>
</h2>
</div>
{%- endif -%}

<div class="card__badge">
{%- if product_card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
{%- elsif wcp_compare_at_price > wcp_price and product_card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
</div>
</div>
</div>
</div>
<p
  class="caption-with-letter-spacing font-body-bold{% if product_card_product.selected_or_first_available_variant.inventory_management != 'shopify' %} visibility-hidden{% endif %}"
>
  {%- if product_card_product.selected_or_first_available_variant.inventory_management == 'shopify' -%}
    {%- if product_card_product.selected_or_first_available_variant.inventory_quantity > 0 -%}
      {{-
        'products.product.inventory_in_stock_show_count'
        | t: quantity: product_card_product.selected_or_first_available_variant.inventory_quantity
      -}}
    {%- else -%}
      {%- if product_card_product.selected_or_first_available_variant.inventory_policy == 'continue' -%}
        {{- 'products.product.inventory_out_of_stock_continue_selling' | t -}}
      {%- else -%}
        {{- 'products.product.inventory_out_of_stock' | t -}}
      {%- endif -%}
    {%- endif -%}
  {%- endif -%}
</p>
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
<input min="1" type="number" id="quantity" name="quantity" max="{{ product_card_product.first_available_variant.inventory_quantity }}" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
<input type="hidden" name="return_to" value="back" />
</form>
{% if variant.available %}
<div class="card__price-stock">{{ variant.inventory_quantity }} Now In stock</div>
{% endif %}

[MJGTrading]

here is what the rror it kicks back under the item

Translation missing: en.products.product.inventory_in_stock_s

[namphan]

Hi @MJGTrading,

Please change all code:

{% capture wpd_discounted_prices %}{%- render 'wcp_discount' wcp_discount:product_card_product , wpd_is_render:'yes' -%}{% endcapture %}

{%- capture wcp_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price' -%}{%- endcapture -%}
{% assign wcp_price = wcp_price | minus: 0 %}

{%- capture wcp_compare_at_price -%}{%- render 'wcp_render_discount', wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price' -%}{%- endcapture -%}
{% if wcp_compare_at_price != blank %}
{% assign wcp_compare_at_price = wcp_compare_at_price | minus: 0 %}
{% else %}
{% assign wcp_compare_at_price = nil %}
{% endif %}

{%- capture wcp_compare_at_price_min -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price_min' -%}{%- endcapture -%}
{% assign wcp_compare_at_price_min = wcp_compare_at_price_min | minus: 0 %}

{%- capture wcp_compare_at_price_max -%}{%- render 'wcp_render_discount', wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_compare_at_price_max' -%}{%- endcapture -%}
{% assign wcp_compare_at_price_max = wcp_compare_at_price_max | minus: 0 %}

{%- capture wcp_price_min -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price_min' -%}{%- endcapture -%}
{% assign wcp_price_min = wcp_price_min | minus: 0 %}

{%- capture wcp_price_max -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_price_max' -%}{%- endcapture -%}
{% assign wcp_price_max = wcp_price_max | minus: 0 %}


{%- capture v_discount_tag -%}{%-render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'v_discount_tag'-%}{%- endcapture -%}
{% assign v_discount_tag = v_discount_tag | strip %}

{%- capture p_discount_tag -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'p_discount_tag' -%}{%- endcapture -%}
{% assign p_discount_tag = p_discount_tag | strip %}

{% assign raw_set_prices = product.metafields.wcp_set_prices.wcp_set_prices %}
{% assign set_prices_array = blank %}
{% if raw_set_prices %}
{% assign set_prices_array = raw_set_prices | split: ',' %}
{% endif %}

{%- capture wcp_discount_value -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wpd_discounted_prices, price_variable:'wcp_discount_value' -%}{%- endcapture -%}

{% capture wcp_v_discounted_prices %}{%- render 'wcp_variant' , wcp_variant:product_card_product.selected_or_first_available_variant , set_prices_array:set_prices_array , wpd_is_render:'yes', v_discount_tag : v_discount_tag , wcp_discount_value : wcp_discount_value -%}{%- endcapture -%}

{%- capture wcp_v_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wcp_v_discounted_prices, price_variable:'wcp_v_price' -%}{%- endcapture -%}
{% assign wcp_v_price = wcp_v_price | minus: 0 %}

{%- capture wcp_v_compare_at_price -%}{%- render 'wcp_render_discount' , wpd_discounted_prices:wcp_v_discounted_prices, price_variable:'wcp_v_compare_at_price' -%}{%- endcapture -%}
{% if wcp_v_compare_at_price != blank %}
{% assign wcp_v_compare_at_price = wcp_v_compare_at_price | minus: 0 %}
{% else %}
{% assign wcp_v_compare_at_price = nil %}
{% endif %}
{% comment %}
Renders a product card

Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_image_outline: {Boolean} Show card outline. Default: true (optional)
- show_rating: {Boolean} Show the product rating. Default: false

Usage:
{% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

<div class="card-wrapper">
<div class="card-information">
<div class="card-information__wrapper">
{%- if show_vendor -%}
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
{%- endif -%}

{%- if product_card_product.featured_media -%}
<h3 class="card-information__text h5">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title | escape }}
</a>
</h3>
{%- endif -%}{%- assign inventory = card_product.selected_or_first_available_variant.inventory_quantity -%}
{%- if template.name == "collection" and inventory >= 1 -%}
<p>Inventory: {{ inventory }}</p>
{%- endif -%}

{% comment %} TODO: metafield {% endcomment %}
<span class="caption-large light">{{ block.settings.description | escape }}</span>
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
<div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
<span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
</p>
{%- endif -%}
{% render 'price', product: product_card_product, price_class: '' %}
</div>
</div>

<div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
<div class="card__inner">
{%- if product_card_product.featured_media -%}
{%- liquid
assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}

<div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
<div class="media media--transparent media--{{ media_size }} media--hover-effect"
{% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
>
<img
srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
src="{{ product_card_product.featured_media | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.featured_media.alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.featured_media.width }}"
height="{{ product_card_product.featured_media.height }}"
>

{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
src="{{ product_card_product.media[1] | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.media[1].alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.media[1].width }}"
height="{{ product_card_product.media[1].height }}"
>
{%- endif -%}
</div>
</div>
{%- else -%}
<div class="card__content">
<h2 class="card__text h3">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title }}
</a>
</h2>
</div>
{%- endif -%}

<div class="card__badge">
{%- if product_card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
{%- elsif wcp_compare_at_price > wcp_price and product_card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
</div>
</div>
</div>
</div>
<p
  class="caption-with-letter-spacing font-body-bold{% if product_card_product.selected_or_first_available_variant.inventory_management != 'shopify' %} visibility-hidden{% endif %}"
>
  {%- if product_card_product.selected_or_first_available_variant.inventory_management == 'shopify' -%}
    {%- if product_card_product.selected_or_first_available_variant.inventory_quantity > 0 -%}
      In stock: {{ product_card_product.selected_or_first_available_variant.inventory_quantity
      }}
    {%- else -%}
      {%- if product_card_product.selected_or_first_available_variant.inventory_policy == 'continue' -%}
        In stock
      {%- else -%}
        Out of stock
      {%- endif -%}
    {%- endif -%}
  {%- endif -%}
</p>
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
<input min="1" type="number" id="quantity" name="quantity" max="{{ product_card_product.first_available_variant.inventory_quantity }}" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
<input type="hidden" name="return_to" value="back" />
</form>
{% if variant.available %}
<div class="card__price-stock">{{ variant.inventory_quantity }} Now In stock</div>
{% endif %}

[MJGTrading]

FANTASTIC it worked THANK YOU THANK YOU

[namphan]

Hi @MJGTrading,

You're welcome and happy to help 😊