[austsParticipant]

Hi guys,

I’m designing a site for someone who would like the prices for products to not show up until a customer has chosen all applicable options and is ready to add it to their cart.

Just to clarify what I mean (as I’m still trying to grasp exactly what they want and why they’d want it myself)
– On a category page they only want products to show with no prices or price ranges
– Then when a customer clicks on a product they don’t want the price or price range to show at the top of the page
– Once a customer chooses the model, the size and shape they want the price should then show up down the bottom of the page next to the add to cart button.

I’ve tried some of the css suggestions in other posts but it seems to hide the prices everywhere. I hope this is achievable without too much hassle.

Thanks in advance 🙂

[John EzraMember]

Hi there,

Thanks for writing in! To assist you with this issue, would you mind providing us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything. Thanks!

[austsParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello Dave,

Thanks for clarifying. To hide the prices in the product category archive, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.woocommerce .price,
.woocommerce-page .price {
    display: none;
}

To display the price only when the user selects a variation, you need this custom JS code in your customizer as well, Appearance > Customize > Custom > Javascript

(function($){
  $(document).ready(function(){
  	$('.variations_form.cart select').change(function(){
    	$('.woocommerce .price').css('display', 'block');
    	console.log('changed');
  	});
  });
})(jQuery);

We would loved to know if this has work for you. Thank you.

[austsParticipant]

Hi,

Thanks again, I put the code in the right places and it kinda works but not exactly how I’d like. It hides the price until the customer selects one of the options. After they select an option the price range pops back up on the top of the product page and when they’ve selected all relevant options the definite price (as in the price for their options not just a range) doesn’t come up down the bottom next to add to basket.

I’ve saved the changes if you’d like to have a squiz for yourself to see what I mean. I think my description of where things are on the site and the page changes each time haha – sorry about that 🙂

Cheers,
Dave

[Paul RModerator]

Hi Dave,

Kindly change the code to this.

(function($){
  $(document).ready(function(){
  	$('.variations_form.cart select').change(function(){
    	$('.woocommerce .single_variation .price').css('display', 'block');
    	console.log('changed');
  	});
  });
})(jQuery);

Hope that helps.

[austsParticipant]

Hi, I changed it and now the price doesn’t show up at all. The little box shows to allow to choose how many a customer would like to order but no price shows next to it.

If it’s too difficult to do site wide I totally understand. The logic behind hiding a price until a customer is ready to buy seems illogical in itself to me but apparently the customer is always right? haha 🙂

If you have any other suggestions I’ll try any and all of them, or if it’s something that needs more customisation that’s fine too. I have inserted the code and saved the changes if you would like to see.

Thank you again for all of your help,
Dave

[Paul RModerator]

Hi Dave,

Please change your css code with this.

.woocommerce p.price,
.woocommerce-page p.price {
    display: none;
}

Thanks

[austsParticipant]

Hi,

I am so sorry to be a pain but with this, the product page is perfect! Nothing shows until they have selected all the options but on the category page the price ranges still show. I had a play around with the css but couldn’t work out a way to hide it on the category page without it then hiding the price altogether once the options have been chosen. I’ve saved the most recent changes for you to see what I mean.

Thank you again for your patience,
Dave

[Rue NelModerator]

Hello Dave,

To hide the price in the product category page, please also insert this code in your customizer;

.archive.woocommerce .price,
.archive.woocommerce-page .price {
    display: none;
}

Please let us know if this works out for you. Thank you.

[austsParticipant]

That worked perfectly!

Thank you so much for all of your help and patience.

Take care,
Dave

[LelyModerator]

You’re welcome Dave!

Always,
X

[austsParticipant]

Hey again 🙂

Just noticed that the price range is showing up on related products. Any way of not showing these price ranges? I had a play with the css but when I managed to turn them off it also turned off the price showing up when all options were selected before adding a product to your cart.

Thanks again,
Dave

[ChristopherModerator]

Hi there,

Please add this :

.related.products span.price {
    display: none;
}

Thanks.

[austsParticipant]

Awesome

Thank you! Have a good weekend 🙂

Dave

[Author]

Posts