Can I hide the price of a single product on its page?

[Offertissimo]

Hello, could I hide a price only for a single product in the product page? I want to hide the price only for one product and not all product in catalogue.

Thank you and kind regards

[Ujjaval]

@Offertissimo add below code into theme.liquid file below might me helpful to you

{% if product.handle == 'yourproducthandlename' %}
      {% stylesheet %}
        .price--large{
              display: none;
          }
      {% endstylesheet %}
 {% endif %}

[Offertissimo]

Hello,

When i Tried to add this code, there is an error in the code and I can’t save and publish it:

{% if product.handle == ‘offerta-limitata-smartwatch-effettua-e-rispondi-alle-chiamate-compatibile-con-iphone-android-per-uomo-donna’ %}
{% stylesheet %}
.price–large{
display: none;
}
{% endstylesheet %}
{% endif %}

Thank you and kind regards

[Ujjaval]

@Offertissimo add that code into theme.liquid file or main-collection-product-grid.liquid file. not in css code outside.

[Offertissimo]

Could I add a css code in personalized code? Because I don’t like to add the code in the theme files

Thank you

[NomtechSolution]

Yes, it is possible to hide the price for a single product on a product page while keeping the prices visible for other products in the catalog. There are a few different ways you can achieve this, depending on the platform or technology you are using for your website. Here are a couple of common approaches:

1. Conditional Rendering: You can use a conditional rendering technique to hide the price for a specific product based on its unique identifier or any other distinguishing attribute. In your product page template or code, you can add logic that checks if the current product matches the specific product you want to hide the price for. If it does, you can conditionally hide the price element or replace it with a message like “Contact for Pricing” or “Price Upon Request”.

2. Custom CSS: Another approach is to use custom CSS to selectively hide the price for the desired product. Each product on your website likely has a unique identifier or class associated with it. You can inspect the HTML of the product element using browser developer tools and identify the class or ID of the specific product you want to hide the price for. Then, using CSS, you can target that specific element and apply a style to hide the price. For example, you can use the display: none; property to hide the price element for that product.

[Ujjaval]

@Offertissimo ohk, then nothing gonna to happen with it. it just remaining as it is.

[Offertissimo]

I tried with this code, the price disappear but i can’t save the code for the css syntax error, what’s the reason?

{% if product.handle == ‘offerta-limitata-smartwatch-effettua-e-rispondi-alle-chiamate-compatibile-con-iphone-android-per-uomo-donna’ %} {% style %} .price–large { display: none; } {% endstyle %} {% endif %}

[Offertissimo]

I tried with this code, the price disappear but i can’t save the code for the css syntax error, what’s the reason?

{% if product.handle == ‘offerta-limitata-smartwatch-effettua-e-rispondi-alle-chiamate-compatibile-con-iphone-android-per-uomo-donna’ %} {% style %} .price–large { display: none; } {% endstyle %} {% endif %}

[Offertissimo]

Hello NomtechSolution, I want to add a custom CSS in the shopify theme editor…

[Ujjaval]

@Offertissimo in which file you have added the code ? you must be add code either in theme.liquid file or main-collection-product-grid.liquid file. Then it will be work perfectly.

[Offertissimo]

Hello I added the code here, in product information and then custom code:

[gr_trading]

Hi @Offertissimo

You can add custom liquid block in product template and paste all your code their.

Since you code has handle in your code.

It will only work at your product only.

Hope it will helps…