Hide prices of sold out products on product page

Store Design

Topic summary

A user seeks to hide prices for sold-out products on individual product pages in Shopifyā€™s Dawn theme, having already succeeded with collection pages.

Solution Provided:

  • Add CSS code to the base.css file:
.product__info-container .price--sold-out .price__regular {
  display: none;
}
  • The code should be placed near the top of the file (under the /* base */ section)
  • This successfully hides sold-out product prices

Additional Issues:

  • After implementing the fix, available products now display prices twice on product pages
  • A follow-up question emerged: the CSS solution stops working when ā€œcompare atā€ pricing is enabled, requiring either additional CSS modifications or removal of compare-at-price settings

The original issue is resolved, but related pricing display problems remain under discussion.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

hey,

I am using the Dawn theme and needing to hide prices of sold out products on the individual product pages. I have managed to hide the prices on collection pages. I have tried many different codes however nothing has worked.

Any help is greatly appreciated

Thanks!

2

Hey @Dusty_Dot ! I think you should be able to do this with CSS.

  1. Go to Online Store > Themes > Edit code (I assume youā€™re familiar with this since youā€™ve tried a few other options
  2. Look for this file - base.css
  3. Add the following CSS code -
.product__info-container .price--sold-out .price__regular {
  display: none;
}

Save, and that should be it! Let me know if that worked?

3

Hi @Dusty_Dot
Please put this code in theme.liquid before body closing tag

Thanks!

1 Like
4

Thank you for your option, but sadly itā€™s still showing the price

5

Hey,

Iā€™m not sure if I entered it in the wrong part of the theme.liquid file but sadly didnā€™t work

6

Sorry to hear that! I tested this out on our test store with a fresh copy of Dawn, and it worked then. If you need help with it, let me know and Iā€™ll be happy to give it a look. :slightly_smiling_face:

7

did you just add it to the bottom?

8

You can add it anywhere to the ā€˜base.cssā€™ file and it should work. I added it close to the top, and that worked for me.

9

I added it further up (just under the /* base */ section) and it worked!

Thank you so much!

I am now realising the available products are showing the price twice on the product page, not sure if you have any tips on removing that too :joy: so it just shows the price once

10

Glad to hear that worked! (If you donā€™t mind, please consider marking that as the solution :grin: )

Do you have a screenshot or store link I can look at? If you could send me that in a DM, Iā€™ll definitely give it a look. :slightly_smiling_face:

11

Thank you and done! :blush:

hereā€™s a screenshot of the product page

Dusty_Dot_0-1715653389063.png
Dusty_Dot_0-1715653389063.png1530Ɨ1038 277 KB

12

Thanks, Iā€™m DMing you to get a link to the page. Thatā€™ll help me find the right solution right away. :slightly_smiling_face:

13

Hi @Dusty_Dot
Can you please provide screenshot of theme liquid where you put this and also the URL of the frontend where issue is appearing, It will help me to look into more details
Thanks!

14

Hi @Sandy-STOQ I think I sniped this soultion as well, but now we started using the ā€œcompare atā€œ option. When using this the prices keep showing on the shop. Is there some extra CCS we could add to make this work? Otherwise we would just have to remove all the compare at settingsā€¦