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

atranho
Visitor
1 0 0

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

Replies 3 (3)

suyash1
Shopify Partner
9033 1123 1482

@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.

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
stephanierobo
Tourist
8 0 1

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
Shopify Partner
9033 1123 1482

@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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI