Hide 'In Stock", "Only 2 left" etc at archive page

[kevinchia83]

When a colour is selected, it will show ‘in stock’ etc, how to hide all these at archive page?

Yoga Clothes & Apparel By Vivre Activewear Singapore, Hong Kong &...

[ruenel]

Hello Kevin,

Thanks for writing in!

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.archive .woocommerce-variation-availability .stock{
    display: none;
}

The custom css code is needed because, by default, it is always get displayed.

We would love to know if this has worked for you. Thank you.

[kevinchia83]

Hi RueNel,

It doesn’t work. Below is my current css, not sure if there’s any conflict. I don’t remember see this ‘in stock’ recently and I’m not sure what triggered it.

@media (max-width: 980px){
.masthead-inline .x-btn-navbar {
display: block;
float: none;
clear: both;
width: 25px;
margin: 10px auto 0;
}

.x-nav-wrap.mobile {
overflow:visible !important;
}

.x-navbar-inner {
text-align:center;
}

.x-navbar .x-brand {
float:none;
}

.x-nav-collapse .x-nav {
text-align:left;
}
}
.x-colophon.top {
background: #fafafa;
}
.x-colophon.bottom {
background: #eee;
}

.x-nav-wrap.mobile {
overflow:visible !important;
}
.x-topbar { background-color: #202020; }
.x-topbar .p-info {
color: white; float: none; text-align: center;
}
.x-topbar a{
color: #fff;
}

.single-post .entry-thumb {
display: none;
}

.select_option.selected {
border: 2px solid #808080;
margin: 0 3px 0 0;
}

.woocommerce li.product .entry-header .button,
.woocommerce-page li.product .entry-header .button {
display: none;
}
.woocommerce li.product .entry-header h3 {
font-size: 128%;
}

.woocommerce div.product .summary .product_title {
font-size: 188%;
}

.woocommerce div.product .summary .price>.amount, .woocommerce div.product .summary .price>ins>.amount {
font-size: 20px;
}

.select_option.inactive {
opacity: 0.3;
background-color: transparent;
background-image: -webkit-gradient(linear, 19.1% -7.9%, 81% 107.9%, color-stop(0, #fff), color-stop(.48, #fff), color-stop(.5, #000), color-stop(.52, #fff), color-stop(1, #fff));
background-image: -webkit-repeating-linear-gradient(287deg, #fff 0%, #fff 48%, #000 5 0%, #fff 52%, #fff 100%);
background-image: repeating-linear-gradient(163deg, #fff 0%, #fff 48%, #000 50%, #fff 52%, #fff 100%);
background-image: -ms-repeating-linear-gradient(287deg, #fff 0%, #fff 48%, #000 50%, #fff 52%, #fff 100%);
}

@media (max-width: 480px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 48%;
}
}

.sg_title {
display:none;
}

.widget_wc_aelia_currencyswitcher_widget #aelia_cs_currencies {
width: 14em;
border-color: #202020;
background-color: #202020;
color: #fff;
}
.widget_wc_aelia_currencyswitcher_widget {
width: 10em;
}

.woocommerce-checkout .x-topbar,
.woocommerce-checkout .x-navbar,
.woocommerce-checkout .x-colophon.bottom,
.woocommerce-checkout .x-colophon.top {
display: none;

}

.woocommerce-cart .shipping {
display: none;

}

.woocommerce-checkout form .payment_methods label {
padding-left: 32px;
}

@media (max-width: 640px){
.woocommerce #shipping_method label {
padding-left: 8%;
}

.woocommerce-checkout form input[type=“radio”] {
position: absolute;
}

.archive.woocommerce p.stock.out-of-stock,
.archive.woocommerce p.stock.in-stock {
display: none;
}

.product .ywccl_stock.stock {
display: none;
}

[nabeel]

Hi Kevin,

I checked your CSS and there is missing curly bracket of your last media query @media (max-width: 640px){ please close the curly bracket to fix the syntax errors. Also i noticed you did not add the code provided above, please add the above code in your child theme’s style.css file instead.

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[kevinchia83]

Hi Nabeel,

I have added a } to fix the error you have mentioned and added RueNel’s code. It works.

The ‘in stock’ message will not appear at /shop etc.

How do I hide the same message at home page, at product page ‘more similar product’ etc, making it hidden everywhere. For example, at https://vivreactivewear.com/shop/new/

[nabeel]

Hey Kevin,

To hide the message on all pages you can replace the Runel’s code with the following:

.woocommerce-variation-availability .stock{
    display: none;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!