Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
Hi @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
This is an accepted solution.
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
<script>
window.addEventListener('DOMContentLoaded',(event)=>{
const hidePrice=()=>{
const check=document.querySelector('.product-meta__price-list-container .product-meta__label-list span')
if(check){
document.querySelector('.product-meta__price-list-container .price-list').style.display="none"
}else{
document.querySelector('.product-meta__price-list-container .price-list').style.display="inline-flex"
}
}
hidePrice()
document.querySelectorAll('.block-swatch-list label').forEach(item=>{
item.onclick=()=>{
setTimeout(()=>{
hidePrice()
},100)
}
})
});
</script>
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.
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
Hi @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
This is an accepted solution.
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
<script>
window.addEventListener('DOMContentLoaded',(event)=>{
const hidePrice=()=>{
const check=document.querySelector('.product-meta__price-list-container .product-meta__label-list span')
if(check){
document.querySelector('.product-meta__price-list-container .price-list').style.display="none"
}else{
document.querySelector('.product-meta__price-list-container .price-list').style.display="inline-flex"
}
}
hidePrice()
document.querySelectorAll('.block-swatch-list label').forEach(item=>{
item.onclick=()=>{
setTimeout(()=>{
hidePrice()
},100)
}
})
});
</script>
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.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024