Modify display of compare at price field - Debut theme

New Member
6 0 0

I have items that are sold by the case; however I'd like to display the price per square foot next to the case price, as it has less "sticker shock" than the case price. 

I do not want to pay for an app, as I just want it to show up on the display not be used for any calculations when people order, so I want to change the conditions to use the compare at price field to handle this; by changing the field's display and calculation properties to not be crossed out and to have a label of "per sq ft."

I've read through the existing threads on this topic, all of which say it can be done, but all of which show "this post is outdated" and none of which work - I've modified my site's language settings for compare at price, and I've attempted to implement several different code options found on the forums in my product.template.liquid and .js - however none of them work. I can get the field to load briefly without the label but once the page finishes loading the price disappears. 

Any help with this would be appreciated! 

83 0 25

Hi there,

Instead of using the compare at price you could use tags to get that displayed (code placed in "product-card-grid.liquid"):

{% for tag in product.tags %}
	{% if tag contains "per sq ft" %}
		<span class="product-price__price"> / {{ tag }}</span>
	{% endif %}
{% endfor %}


New Member
6 0 0

Thanks Nick! I was able to modify this exactly to work for me, except I needed to also update the .js callback so the price per sq foot updated properly with a new variant selection.

My next hurdle is figuring out how to connect that data with my google merchant....