Out of stock variations are still showing

Hi

if a variation is out of stock e.g. https://oikosoikos.com/product/only-women-jeans-10/ W25 L32, it doesn’t put X or disable selection

Instead you can still click add to cart, but of course add to card does nothing

my customers are confused. i havew Blur with cross enabled

items that are in stock, correctly say “in stock” under them e.g. W27 L32

Also adding my custom css if there is something wrong in there:

/remove LINK CLICK OUTLINE/
a:active, a:focus {
outline: 0;
border: none;
-moz-outline-style: none;
}
a:focus {
outline: solid 0px !important;
}
*:focus {
outline: 0 !important;
}

/SEARCH AWS/
.aws-container .aws-search-field {
border: 1px solid #ffffff;
border-radius: 25px!important;
padding: 12px 20px;
font-size: 13px!important;
color: #111111!important;
background-color: #ffffff;

}

/* Placeholder styling / .aws-container .aws-search-field::placeholder { color: #111111; / Change to your preferred hex code / opacity: 1; / Ensures color isn’t washed out in some browsers */
}

/* OceanWP WooCommerce menu bag/cart icon size on mobile only / @media only screen and (max-width: 959px) { .wcmenucart i, .wcmenucart-icon, .bag-style .wcmenucart-cart-icon, .oceanwp-cart-link i { font-size: 16px !important; / ← Change this value */
}

/* Basic sticky header */

site-header {

position: sticky;
top: 0;
width: 100% !important;
z-index: 999;
box-shadow: 0 1px 10px rgba(0,0,0,0.1);/* Ensures it stays on top */
}

/* =======================================================
Mobile Cart Redesign (Max Width 768px)
======================================================= */
@media (max-width: 768px) {

/* 1. Hide the standard table headers */
.woocommerce table.shop_table.cart thead {
    display: none;
}

/* 2. Turn standard table rows into cards using Grid */
.woocommerce table.shop_table.cart tr.cart_item {
    display: grid !important;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto auto;
    gap: 0px 15px;
            padding: 15px 0; 
    margin-bottom: 10px;
    position: relative;
    border-bottom: 1px solid #eaeaea; /* Added a faint line to separate items */
}

/* Hide the default mobile labels (OceanWP/WooCommerce adds these) */
.woocommerce-cart table.cart td::before {
    display: none !important;
}

/* 3. Position the Product Image */
.woocommerce table.shop_table.cart td.product-thumbnail {
    grid-column: 1;
    grid-row: 1 / 4; 
    padding: 0 !important;
    border: none !important;
}

.woocommerce table.shop_table.cart td.product-thumbnail img {
    width: 100%;
    height: auto;
}

/* 4. Position Title, Quantity, and Price */
.woocommerce table.shop_table.cart td.product-name {
    grid-column: 2;
    grid-row: 1;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    font-weight: 600;
}

.woocommerce table.shop_table.cart td.product-name .variation {
    margin-top: 3px;
    font-size: 12px;
    color: #777;
}

.woocommerce table.shop_table.cart td.product-quantity {
    grid-column: 2;
    grid-row: 2;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
        padding-right: 10px!important;
}

/* Make standard quantity inputs look neater */
.woocommerce table.shop_table.cart td.product-quantity .quantity input.qty {
    width: 40px;
    height: 28px;
    padding:  5px;
    font-size: 13px;
    color: #333333;
}

.woocommerce table.shop_table.cart td.product-price {
    display: none; 
}

.woocommerce table.shop_table.cart td.product-subtotal {
    grid-column: 2;
    grid-row: 3;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
    font-weight: bold;
    font-size: 16px;
    color: #55b27e; /* Using your green price color from the screenshot */
}

/* 5. Reposition the Remove (x) Button to Top Left */
.woocommerce table.shop_table.cart td.product-remove {
    position: absolute;
    top: -5px;  /* Pushed slightly outside the image */
    left: 5px; /* Moved to Left */
    right: auto; 
    padding: 0 !important;
    border: none !important;
    width: auto !important;
    display: block;
    z-index: 10; /* Ensures it sits on top of the image */
}

/* Styled the X button to look like a small circular badge so it's visible over the image */
.woocommerce table.shop_table.cart td.product-remove a.remove {
    color: #111111 !important;
    background: #3DC3A1 !important; 
    line-height: 20px !important;
    width: 22px !important;
    height: 22px !important;
    text-align: center;
    border-radius: 50%;
    border: 0px solid #ddd !important;
    font-weight: normal;
}

.woocommerce table.shop_table.cart td.product-remove a.remove:hover {
    color: #000 !important;
    background: #f9f9f9 !important;
}

.woocommerce table.shop_table.cart td.actions {
    border-top: none !important;
    padding: 10px 5 !important;
}

}

/* Center the group of items as a block, but left-align the text within */ mobile-fullscreen #mobile-nav {

text-align: center;
} mobile-fullscreen #mobile-nav ul.menu {

display: inline-block;
text-align: left;
} mobile-fullscreen #mobile-nav ul.menu li a {

text-align: left;
}

The page I need help with: [log in to see the link]