Change product price layout in the grid

Solved
Highlighted
New Member
8 0 0

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:

 

41071ba24d40098902407dae323eed1d.png

 

In the grid as shown below 

Inkedcd40395e0297b2729d65c5477b2e0cec_LI.jpg

 

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

0 Likes
Highlighted
New Member
8 0 0

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

0 Likes
Highlighted
New Member
8 0 0

Still trying to figure this out.. 

0 Likes
Highlighted
Excursionist
17 5 6

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

0 Likes
Highlighted
New Member
8 0 0

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: 41071ba24d40098902407dae323eed1dthen 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

0 Likes
Highlighted
Excursionist
17 5 6

This is an 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

 

1 Like
Highlighted
New Member
8 0 0

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!

0 Likes
Highlighted
Excursionist
17 5 6

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.

0 Likes
New Member
8 0 0

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!

0 Likes
Highlighted
New Member
6 0 0

 

I get this problem
Screenshot 2019-12-06 at 22.46.37.png

0 Likes