Custom Add to Cart text based on product type

Store Design
1

I am trying to change the text of the cart button based on the product type. I have already added language options in en.default.json for coming_soon and preorder. I also have a product metafield for on_sale_date.

For example, if the product type is preorder then the button will say “Pre-order”. If the product type is “coming-soon” the button text will say “Coming Soon”, etc.

I’ve already found the button text code in the product-template.liquid file and altered it to now read:


  {% if product.type == "preorder" %}
    {{ 'products.product.preorder' | t }}
  {% elsif current_variant.available %}
    {{ 'products.product.add_to_cart' | t }}
  {% elsif product.type == "coming-soon" and product.metafields.my_fields.on_sale_date%}
    {{ 'products.product.coming_soon' | t }}: {{ product.metafields.my_fields.on_sale_date }}
  {% elsif product.type == "coming-soon"%}
    {{ 'products.product.coming_soon' | t }}
  {% else %}
    { 'products.product.sold_out' | t }}            
  {% endif %}

On the surface this seems to work fine. I have tested a preorder product and the button reads “Pre-Order”. However, if I select a variant the text reverts back to “Add to Cart” until I refresh the page.

I found this code in the theme.liquid file… is this causing the issue?
2

Hi @mooritmag ,

Yes, you need to change more JS so it can work well when you change variant. Please change code:

Hope it helps!

1 Like
3

Nearly! It seems to work fine on a pre-order product. But when I go to an in stock item and click on a variant the text changes to “Sold Out” until I refresh the page again.

I’ve amended the top bit of your suggestion to this and it seems to work now. Thanks! :grin:

let textaddToCart = '{{ 'products.product.add_to_cart' | t }}';
  {% if product.type == "preorder" %}
    textaddToCart = '{{ 'products.product.preorder' | t }}';
  {% elsif product.type == "coming-soon" and product.metafields.my_fields.on_sale_date unless current_variant.available%}
    textaddToCart = '{{ 'products.product.coming_soon' | t }}: {{ product.metafields.my_fields.on_sale_date }}';
  {% elsif product.type == "coming-soon" unless current_variant.available %}
    textaddToCart = '{{ 'products.product.coming_soon' | t }}';     
  {% else current_variant.available %}
    textaddToCart = '{{ 'products.product.add_to_cart' | t }}';
  {% endif %}
4

Hi @mooritmag ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

5

Hi there,

I’m trying to use your solution for my needs and I’m having a hard time making it work.
In my case, the theme is dawn and files are a bit different.

In buy-buttons.liquid, I’ve setup the following for the button label


    {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
        {{ 'products.product.sold_out' | t }}
    {%- else -%}
        {% if product.selected_or_first_available_variant.inventory_policy == 'continue' and product.selected_or_first_available_variant.inventory_quantity < 1 %}
            {{ 'products.product.preorder' | t }} 
        {%- else -%}
            {{ 'products.product.add_to_cart' | t  }}
        {%- endif -%}
    {%- endif -%}

This works fine, when page loads or until I use the variants selector.

I found window.variantStrings in theme.liquid and modified it like this

let textaddToCart = '{{ 'products.product.add_to_cart' | t }}';
          {% if product.selected_or_first_available_variant.inventory_policy == 'continue' and product.selected_or_first_available_variant.inventory_quantity < 1 %}
          textaddToCart = '{{ 'products.product.preorder' | t }}';
      {% endif %}
      
     window.variantStrings = {
        addToCart: `{{ 'products.product.add_to_cart' | t }}`,
        soldOut: `{{ 'products.product.sold_out' | t }}`,
        unavailable: `{{ 'products.product.unavailable' | t }}`,
        unavailable_with_option: `{{ 'products.product.value_unavailable' | t: option_value: '[value]' }}`,
      };

It doesn’t work, as soon as I use the variant selector, variant which should show Preorder reverts back to Add to Cart.

What am I doing wrong? Please help.

6

Nevermind, I figured it out! Thank you.