Select product's variant and display customised price/stock

Technical Q&A
1

I have a question about selecting product’s variants and looking forward to getting some help:

On the price section, I’ve set when the price is equal to 0, display ‘ENQUIRE FOR PRICE’ instead of 0, the code is below:

{%- if selected_variant.price == 0 -%}
ENQUIRE FOR PRICE
{%- else -%}
{{- selected_variant.price | money -}}
{%- endif -%}

However, it only works when I enter the page with a selected variant that has a price equal to 0, for example in this Link .

If I enter the page with this link, it will display the product with a non-zero price first, then when I select a product price equal to 0, the code above doesn’t work. This situation also happening on my stock variable and 'Contact for preorder button, I’ve attached a demo video please check.

I’m assuming it’s related to some javascript code in my theme, that refreshed the product information section when I selected variants. Could anyone please give me some advice about where should I work on?

Thanks in advance for any help.

2

@Ultipower

I’m assuming it’s related to some javascript code in my theme, that refreshed the product information section when I selected variants. Could anyone please give me some advice about where should I work on?

This will vary wildly between themes and is an advanced subject even if you have coding experience.

Pertinent liquid objects

https://shopify.dev/api/liquid/objects/product#product-first_available_variant

https://shopify.dev/api/liquid/objects/product#product-selected_or_first_available_variant

If you have a shopify theme you could look at the “choose an option” customization tutorial to try and synthesize a solution

https://help.shopify.com/en/manual/online-store/themes/os/customize/add-pick-an-option

Otherwise a clunky workaround is to make an event handler that checks the variant parameter and compares that to a hidden message field with matching variant ids to display that message.

Or just full reloads the page every time the option is changed.

3

Hi @Ultipower ,

Because when you change variants, the price will be reloaded according to JS so you need to change JS too.

Please go to Assets > theme.min.js file, find ‘.price-list’, and change code: https://i.imgur.com/AJuNfs5.png

Code:

if (i) if (e) {
	if (t && t.price === e.price && t.compare_at_price === e.compare_at_price) return;
	i.innerHTML = "";
	if (e.compare_at_price > e.price ) {
		i.innerHTML += ''.concat(window.languages.productSalePrice, "").concat(T.formatMoney(e.price, window.theme.moneyFormat), "");
		i.innerHTML += ''.concat(window.languages.productRegularPrice, "").concat(T.formatMoney(e.compare_at_price, window.theme.moneyFormat), "");
	} else {
		if (e.price == 0) {
			i.innerHTML += ''.concat(window.languages.productSalePrice, "ENQUIRE FOR PRICE");
		} else {
			i.innerHTML += ''.concat(window.languages.productSalePrice, "").concat(T.formatMoney(e.price, window.theme.moneyFormat), "");
		}
	}
	i.style.display = "";
} else i.style.display = "none"

Hope it helps!

4

Hi @LitExtension , Thanks for your prompt and helpful response.

I’ve tried your code and it works very well.

I would like also to change the stock detail to ‘PLEASE CONTACT US FOR ETA OF THIS ITEM OR MAKE A PRE-ORDER AT A DISCOUNT PRICE TODAY!’ when I select a variant that price is zero.

Could you please let me know how to do that?

Thanks in advance.

5

Hi @Ultipower ,

Please change the code here: https://i.imgur.com/66OtKwm.png

Hope it is clear to you.

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

6

Hi @LitExtension ,

Thanks for your reply.

Sorry about the confusion, but I mean how can I change the stock text when switching to a product that’s unavailable.

For example on this image https://imgur.com/a/CdPkXOf Stock and the disabled button at the bottom shares the same language setting which is ‘CONTACT FOR PREORDER’, when the user selects a product that is out of stock. I want after the stock shows: PLEASE CONTACT US FOR ETA OF THIS ITEM OR MAKE A PRE-ORDER AT A DISCOUNT PRICE TODAY!

And the button that is disabled still shows CONTACT FOR PREORDER, is that possible to do?

Thank you.

7

Hi, can you help me? I can found the file in my theme. I’m using dawn theme. Thank you

8

Hi @Ultipower , get a quick solution for displaying variant names and prices on Shopify collection pages by checking out this YouTube video: