Hide Woocommerce shop stock quantity

I am having a couple of issues on the Woocommerce product page.

  1. I would like to hide the stock quantity value and simple show a green checkmark with the words “In Stock” next to it.
  2. I would like to change the font size and decoration for the prices.
    Please refer to the attached image for details.
    Thank you.

Hi Giulio,

Thank you for writing in, 1) Please navigate WooCommerce > Settings > Products > Inventory and set the Stock display format to Never show quantity remaining in stock


Then add this to Theme Options > CSS to add a check mark.

.stock.in-stock {color: green;}
.stock.in-stock:before {
	content: "✔";
}
  1. Please add this to Theme Options > CSS too.
del .woocommerce-Price-amount {
	font-size: 11px;
}
ins .woocommerce-Price-amount {
	text-decoration: none;
	border-bottom: 0;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

Hi Friech,

Thanks for the help, and for the link to the CSS tutorial. Your suggestions worked, except for the underline beneath the price. It seems to be coming from elsewhere.

I’ve added info to access the site, if necessary. Your continued help is appreciated. THanks.

I have come across a couple of other issues that are related to the price formatting, so I am adding them to this post.

There must be separate CSS code selectors for the two prices I am now seeing, although using the Chrome browser developer toolbar, they both (to me anyways) look to be the same – I must be doing something wrong. Please have a look at the attached picture to see what I am looking at:

Secondly, on the product gallery page, I would prefer to, again, remove the price range and replace it with "Starting at " followed by the lower amount in the price range. For example, the item below would have “Starting at $49.00”.

Many thanks again for your help.

Hi Giulio,

It say invalid username.

At this point we need to check the exact page URL with issue to see where it is coming from. Please provide correct username

To hide price range, we can use this custom CSS:

.product-type-variable .entry-summary p.price {
    display: none;
}

We still need access the final variation product page to see where the underline is coming from.

Unfortunately, this will include customization on the template by editing the existing funtion that controls the display of variation prices. This will be more than CSS. This is outside the scope of our support and you might need to consult a developer to achieve this. Thank you for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.