Remove price on sold out product pages

This modification will hide prices on a product page if the item is sold out. This is an intermediate to advanced change and requires to to modify the theme's Javascript. Only attempt this with a duplicate them and if you have some knowledge of editing Javascript code. 

Difficulty: Intermediate. Requires you to modify the theme's Javascript files. Careful placement of adding code in the correct position. Having a backup is required as this code change can break your theme easily with the slightest of errors. 

Result:

Before:

How to:

1

Make a duplicate of your theme

Do not skip this step, it's required.

2

Modify your Javascript file - theme.js

Open the Code Editor:

From the Assets folder, open theme.js:

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

addClass( "variant--soldout" );

Example:

That will take you to this line:

Add a couple blank lines after that line:

Be sure the closing bracket is unchanged. 

Next, paste the following code in the blank area. Make sure it's above the closing bracket:

$("h5.product__price").hide();
$("span.buttonPrice").hide(); 
$("span.unicode").hide();

Example:

You can align the code with the rest of the code in that section. I've left that out for simplicity.

Verify the closing bracket has not been changed. 

Save the file:

Your sold out products will now have the price hidden from both the top of the product page and in the Add to Cart button. 

2B

For older versions of Pipeline: Pipeline 2 - 3 only

From the Assets folder, open shop.js.liquid:

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

products.product.sold_out

Example:

That will take you to this line:

Add a couple blank lines after the next line which ends with .hide();

Example:

Verify you've done it after the .hide(); line and also verify the closing bracket is unchanged. 

Next, paste the following code in the blank area. Make sure it's above the closing bracket:

$("h5.product__price").hide();
$("span.buttonPrice").hide(); 
$("span.unicode").hide();

Example:

Save the file.

You can align the code with the rest of the code in that section. I've left that out for simplicity.

Verify the closing bracket has not been changed. 

Your sold out products will now have the price hidden from both the top of the product page and in the Add to Cart button.