Change product price layout in the grid

[Peter123]

So basically what I want to do is make the price in the grid display when it's discounted. I want it to look like this:

In the grid as shown below 

And when there id no discount I want it to just display the normal price.

I've tried doing this for a while now.. I know i need to edit the product-grid-item.liquid file but I can't get it to work correctly :/

I would really appreciate some help!! 

//Peter

[Peter123]

Still can't get it to work. Would really appreciate some help!

[Peter123]

Still trying to figure this out.. 

[LukaszFormela]

Hi Peter123,

Would you mind sharing the code you have tried? This is absolutely achievable, but without knowing what you've already done we can't track down the issue.

Thanks,

Lukasz

[Peter123]

Sure. I'll admit I'm not the best at coding so that may be why it's not working but basically what I've tried is to transfer the code used to display the price on the product page which looks like this: then put that code into the product-grid-item.liquid file.  Again my coding abilities are limited so I don't really understand how to do this without messing something up... Also, I'm using the Brooklyn theme if that helps.

Thanks for the response, appreciate it. //Peter

[LukaszFormela · Accepted solution]

Okay, now you may need to know few things. Discounted price on collection page will be displayed only if all single product variants have the same price. Otherwise price is displayed as "$99.00+" anyway (as in $99 and higher).

Moving on, on your product-grid-item.liquid find the following line (should be lines #96 - #98 in unmodified file):

{% else %}
    {{ product.price | money_without_trailing_zeros }}
{% endif %}

and replace it with:

{% else %}
    {% assign has_flat_price = true %}
    {% assign compare_at_price = '' %}

    {% for variant in product.variants %}
        {% if product.price_min != variant.price %}
            {% assign has_flat_price = false %}
        {% endif %}
        {% if variant.compare_at_price %}
            {% assign compare_at_price = variant.compare_at_price %}
        {% endif %}
    {% endfor %}

    {% if has_flat_price == true and compare_at_price != empty and product.price_min != compare_at_price %}
        <span style="text-decoration: line-through; padding-right: 5px;">{{ compare_at_price | money_without_trailing_zeros }}</span>
        <span style="color: red">{{ product.price | money_without_trailing_zeros }}</span>
    {% else %}
        {{ product.price | money_without_trailing_zeros }}
    {% endif %}
{% endif %}

This should do the trick :)

Thanks,
Lukasz

[Peter123]

Thank you! Just one problem, when the item isn't discounted it still displays like it is.

For example:

Should display like:

Again thanks, everything else works great!

[LukaszFormela]

Does any of these product have "Compare at" price set? Even if it's the same as original price.

Anyway - I have updated my answer to check that as well ;) Let me know if it helped.

[Peter123]

Oh yeah. I had set the compare at price to the same as the actual price. I just tried removing the compare at price and that solved the issue. Thanks!

[mario_sire]

I get this problem