How do I change Sold Out to Coming Soon for certain Product Types or Collections?

[atranho]

Hello,

I am currently using the free Venture theme for my website, and was wondering how I could edit the code so that instead of displaying Sold Out, the button would display Coming Soon instead. I only want this change to happen if either the Product Type is "Coming Soon" or if it is in the "Coming Soon" collection.

I am aware of the option to change edit the language so that you can change Sold Out to Coming Soon. However this will just change all cases of Sold Out to Coming Soon. I would still like to keep the button displaying Sold Out if the inventory (of an product that does not have Product Type = Coming Soon or Collection = Coming Soon) is 0.

I am also aware of apps that might provide this functionality, but I am only interested in implementing a change via the editing the code.

My understanding of html is still fairly basic. I am assuming that in order to implement this function, one would need to edit the product-template.liquid file

          <div class="product-form__item product-form__item--submit">
            <button type="submit"
              name="add"
              id="AddToCart-{{ section.id }}"
              class="btn btn--full product-form__cart-submit{% unless current_variant.available %} btn--sold-out{% endunless %}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"
              {% unless current_variant.available %}disabled="disabled"{% endunless %}>
              <span id="AddToCartText-{{ section.id }}">
                {% unless current_variant.available %}
                  {{ 'products.product.sold_out' | t }}
                {% else %}
                  {{ 'products.product.add_to_cart' | t }}
                {% endunless %}
              </span>
            </button>
            {% if section.settings.enable_payment_button %}
              {{ form | payment_button }}
            {% endif %}
          </div>

I think this part would be changed right? I am just not sure how I should change it so that it would display Coming Soon when the inventory is 0 and when either Product Type is "Coming Soon" or Collection is "Coming Soon"

Thanks,

-Me

[suyash1]

@atranho - one option is to create completely separate product template for coming soon collection products, and add the required functionality to it, that way different templates will have different functionalities and can be set separately, you can contact me.

[stephanierobo]

Could you explain how to go about this solution on here? @suyash1 

I know I'd obviously go to Edit code > add new template and then would also have to make the corresponding section (I'm using Debut so a sectioned theme). I'm pretty sure this snippet is where the sold out button would be edited: 

{% endif %}
            <div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
                <span id="AddToCartText-{{ section.id }}">
                  {% unless current_variant.available %}
                    {{ 'products.product.sold_out' | t }}
                  {% else %}
                    {{ 'products.product.add_to_cart' | t }}
                  {% endunless %}
                </span>
              </button>
              {% if section.settings.enable_payment_button %}
                {{ form | payment_button }}
              	{{ form | payment_terms }}
              {% endif %}
            </div>
          {% endform %}
{% include 'da-restock' %}
        </div>

When I tried to change:

{ { 'products.product.sold_out' |  t  } } 

to :

 { { 'products.product.coming_soon' |  t  } } 

it didn't work, but the sold out button did change to say "translation missing: en.products.product.coming_soon" so I was trying to find where else the code needed to be edited.

Any help would be greatly appreciated!

[suyash1]

@stephanierobo - the actual text is in language settings, please check them, you will get the text you want, it should be in products section of language settings

[NOOR456]

Hi How are you ? How to add the perfumes inspiration on top of the image ? Like the green text in the image next to sold out button

[suyash1]

@NOOR456  this will need code editing, do you want it on specific products or all the products?

[NOOR456]

Hi , thanks for replaying , it need to be applied to all products & every products different inspiration?

[suyash1]

@NOOR456  then make sure you add these products to the collections you want, so using coding you can check to what collection product belongs to and add green text as per it.... this will work good if you have limited collections.

[NOOR456]

I did , all in collections , but what code need to apply or how to add this text ?