Adding variant price to the variant selection label (Brooklyn theme)

chcsep
Excursionist
28 1 10

Hi folks,

 

I want the label on my variants to display the price. I don't think it's good enough for them to be able to click the different options to see how much each one is be after clicking; I want them to see that this other option is cheaper than the one they selected just by looking at the label, like on a menu.

 

I've figured out where on my product-template.liquid page I can find the label for variants. The label inside the <input> tags reads simply: {{ value | escape }}. This is within a for loop, {% for value in option.values %}

 

I cannot find any combination of tag that would display the variant's tag. You'd think it would be {{ variant.price }} or {{ value.price }} but I tried maybe a dozen different combinations of possibilities and can't get it to display.

 

What can I do to display the price on the variant label? Is it just not possible for the page to access this information from this part of the page? 

 

I am in Canada, using the Brooklyn theme v. 8.0.1. I am also using the Langify and Locksmith apps (among others), which add a bunch of stuff to the code but I don't think affect the functionality in any relevant way.

 

Any help is appreciated. As a workaround I'll just write the price into the variant label. 

0 Likes
chcsep
Excursionist
28 1 10

I finally figured out how to add the variant price to the label on the product listing!

The problem is that product.options_with_values only has very limited information, and doesn't include the price. That's the tag that's used to populate the variant label in sections/product-template.liquid

However, since the variant title and product option name will be the same, we can find the price on the variant with the same title, and then add it to the button label separately:

{% for price_variant in product.variants %}
  {% if price_variant.title == value %}{% unless value contains "$" %}{% assign value_price = price_variant.price %}{% endunless %}{% continue %}{% endif %}
{% endfor %}

 (The above code includes a carveout for the products where I manually added a dollar amount to the variant title, so it doesn't display the price twice)

Then between the <label></label> tags, replace {{ value | escape }} with {{ value | escape }} {{ value_price | money }}

Because this is only applied on the display label, it does not affect any other logic with the value name (such as Locksmith lock properties)

0 Likes