Hi everyone,
I’ve been looking to hide prices on my sold out items using the Focal theme.
I have so far been able to hide sold out items altogether but I would only like to hide their price specifically. I have tried some methods I found that were recommended for other themes but none appear to have worked for Focal so far, unfortunately.
Below is an image of the area I am looking to hide:
The store is not quite live yet but here is a link to the preview:
https://jvt52q1ot67am2pe-72498282780.shopifypreview.com
If you can please point me in the right direction that would be greatly appreciated.
Thank you,
Trident
Hi @Trident , need add some code to make it works as your require. You will need to hire an expert to do it for you.
Hi [email removed]RamenGlow,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.css
Step 3: Paste the below code at bottom of the file → Save
.product-meta__price-list-container .price-list{
display:none !important
}
.product-meta__price-list-container:has(.product-meta__label-list:empty) .price-list{
display:inline-flex !important
}
Hope my solution works perfectly for you!
Best regards,
Victor | PageFly
Hi @PageFly-Victor ,
Thank you for the quick reply!!
I’ve just tried this and it certainly hides the price for the sold out item but unfortauntely it also hides the price for all the in stock items.
Is there a way to modify this code to only affect the sold out variants?
Thank you,
David
I checked but I see it works fine
I’ve just done some testing and the normal pricing only doesn’t show on Firefox!
How odd. On Chrome and on mobile the prices both show fine.
I’ll do a bit more testing and let you know. Thank you so much for your help so far, it’s been fantastic!
You can remove old code and change by new code
.product-meta__price-list-container:has(.product-meta__label-list .label.label--subdued) .price-list{
display:none !important
}
Hi,
With this change all prices are back unfortunately.
Am I correct that I was meant to delete the whole section from your first post and replace it with the recent code? Or only the second part?
I’ve tried both ways and it seems all prices are back on both Chrome and Firefox.
Thank you
You can try new code
remove the old code
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at bottom of the file → Save
Thank you so much for your help, this has been absolutely fantastic.
The most recent code works perfectly. Initially it looked like it was behaving a bit unexpectedly but as soon as I published the store I was working on everything worked exactly as intended across all browsers.
Thank you again for you invaluable help.
I am trying to achieve a similar thing on my store https://opportunityfactory.co/ (Pass: Avocado2023)
I am requesting guidance on how to make all prices to be hidden site-wide. I am using the Impact theme.
Any advice is appreciated.
