Hide the price on a specific collection (Prestige theme)

[oysterpots]

Hi there,

I'm trying to hide the pricing on this page:

https://maisonmargauxltd.com/collections/hire-the-look

I've added the following code but I can't figure out why it's not working!

{% if collection.handle == 'hire-the-look' %}
<style>
.ProductItem__PriceList, .ProductMeta__Price{
display:none!important;
}
</style>
{% endif %}

Any thoughts/suggestions?

TIA 🙏

[Ruben_Dev]

Hello there!

Tou may try with the .price-list class and ensure your liquid is clean

[Moeed]

Hey @oysterpots 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if collection.handle == 'hire-the-look' %}
<style>
price-list.price-list {
    display: none !important;
}
</style>
{% endif %}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[oysterpots]

Thanks Moeed, this has removed the pricing but also the product names! Is there a way to retain the name while removing the price?

Thanks again,

Lottie

[Moeed · Accepted solution]

Hey @oysterpots 

Upon checking your website, the prices are hidden and the product names are still there.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[oysterpots]

Fabulous! This worked. Thanks so much Moeed, it's very much appreciated.

Lottie

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[oysterpots]

It works on Chrome but when I check on Safari, all product information is missing:

Any idea how to retain across browsers?

Thanks,

Lottie

[oysterpots]

Also it has removed the pricing across the site, not just for that one collection. This won't be an acceptable solution unfortunately.

Please advise if there's another way to tackle this.

Thanks,

Lottie

[Ruben_Dev]

Hello back !

Here is how you can achieve this
If liquid handle doesn't help you, you can use javascript and retrieve the slug of the current page. Then catch and check if you're on hire-the-look collection page

Add the following script in the file theme.liquid above </body> tag :

    <script>
      function getTheCurrentSlug(url) {
        // Split the URL by "/"
        const parts = url.split('/');
        
        // Get the last part (word) after the last "/"
        const slug = parts[parts.length - 1];
        
        return slug;
      }
      
      // Then check the url and remove the filter prices display
      const currentURL = window.location.href;
      const slug = getTheCurrentSlug(currentURL);
      if (slug === "hire-the-look"){
        const priceElements = document.querySelectorAll("price-list.price-list");      
        // Loop through the elements and hide each one
        priceElements.forEach(function(element) {
          element.style.display = "none";
        });
      }
    </script>

Hope this is helpful !

Don't forget to like and mark as accepted if it works !
Best regards