Adding Metafield Next to Product Price in Collection Image Section

[leeroyster]

Good Afternoon

I've successfully added a new metafield and displayed it on my product page (Venture theme) next to the price by adding the following line of code into the product-template.liquid file:

{{product.metafields.product_unit.unit }}

This works a charm, but now what I'd like to do is add the same piece of data next to the price on the featured collection icons:

You can see in the image where the price is - this particular section is a feature collection, but I can't figure out what piece of code (or .liquid file) I need to edit in order to display the same metafield - can anyone point me in the right direction? 

Cheers,
Lee

[JHKCreate]

Hello What theme are you using? You should normally see a product-grid that contains this required info, let me know

[leeroyster]

Hi there, it's the Venture theme. I read about this product-grid file, but this doesn't exist for me.

There is a collection-grid-item file, but no reference to price in there. 

Also, there are two files: featured-product.liquid and featured-products.liquid where I've attempted to add in the metafield, but nothing shows 😞

[JHKCreate]

I would suggest to get the name of the div related to that grid, paste it in the search box added by this app on Chrome/Edge: Chrome Web Store - Extensions (google.com)

That way it will tell you which files contain that reference and then you can add the metafield. 

PS: You might need to run the search twice for the results to show correctly

Let me know if that helps!

[leeroyster]

Wow, that app looks good, will definitely use that, thanks!

What you say makes sense, but I think the core of the issue is finding out what that div is and where is lives, as I assume it only references variables and not static text (such as product name and price), if that makes sense?

[JHKCreate]

Most divs have at least one static class that you can leverage to what you're looking for. Usually the price has a fixed div as a baseline.

[leeroyster]

Now to just find it! I did find various references to price across a few files, but couldn't get it to work. I'll try that app and see how I get on.

Am I right in assuming that when I create a product metafield, I can still display it anywhere?

[leeroyster · Accepted solution]

Managed to figure this out!

The line of text I needed to edit was in the div class: product-card__info within the product-card.liquid file. 

I added the reference to the metafield, and now I have the unit showing in the collection images 🙂

Well happy - thanks for the help!


Cheers,
Lee

[JHKCreate]

Fantastic! Amazing perseverance 😉

[leeroyster]

We got there in the end, now to figure out how to write an IF statement to exclude this feature from certain products (perhaps those tagged with a certain value), but I'll start a new post for that! 

[leeroyster]

Just keeping this thread up to date with progress for the future benefit of others. I've successfully managed to exclude any product I want from this rule of having "per m2" show after the price in the collection, simply by writing an IF statement that checks for the particular product tag "nom2":

{% if product.tags contains 'nom2' %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}  </span>
            {{ product.price | money_without_trailing_zeros }}
 {% else %}
           <span class="visually-hidden">{{ 'products.product.regular_price' | t }}  </span>
           {{ product.price | money_without_trailing_zeros }} {{product.metafields.product_unit.unit }}
{% endif %}

So now, if I'm selling something (say a tool, instrument or adhesive etc) that naturally doesn't come wit this unit of measure, I simply add the tag on the product page of "nom2" and it won't show in the collection! 

Cheers,
Lee 

[Daniel_Ward_CC]

I'm really struggling to get this to work in broadcast theme - can anybody help me? 

The Meta field I have is: my_fields.product_summary

Following this thread I have been trying to add {{product.metafields.product_summary}} into the code in a number of places, but cant seem to get the metafield to display. 

Thanks for any help!