How can I hide prices on sold out items in the Focal theme?

Solved

How can I hide prices on sold out items in the Focal theme?

Trident
New Member
7 0 0

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:

Screenshot 2023-03-30 135233.png

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

Accepted Solutions (2)

PageFly-Victor
Shopify Partner
7865 1786 3109

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
}

 

PageFlyVictor_0-1680147673749.png

 

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

View solution in original post

PageFly-Victor
Shopify Partner
7865 1786 3109

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>

 

View solution in original post

Replies 10 (10)

Dan-From-Ryviu
Shopify Partner
10096 2007 2058

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.

PageFly-Victor
Shopify Partner
7865 1786 3109

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
}

 

PageFlyVictor_0-1680147673749.png

 

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

Trident
New Member
7 0 0

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.

Trident_0-1680148871252.png

 

Is there a way to modify this code to only affect the sold out variants?

 

Thank you,

David

PageFly-Victor
Shopify Partner
7865 1786 3109

I checked but I see it works fine 

PageFlyVictor_0-1680148972864.png

PageFlyVictor_1-1680148985091.png

 

Trident
New Member
7 0 0

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!

PageFly-Victor
Shopify Partner
7865 1786 3109

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
}
Trident
New Member
7 0 0

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.

Trident_0-1680155336653.png

 

Thank you

PageFly-Victor
Shopify Partner
7865 1786 3109

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>

 

Trident
New Member
7 0 0

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.

mikhailkuzi
Shopify Partner
10 0 2

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.