Variable product make the “Choose an option” text bold for in-stock items

[ianlea]

I tried below but because thee parent is in stock the child products are green regardless of whether the variation is in stock or not
/* Make in-stock options bold in the variable product dropdown */
.single-product .variations select option:not(:checked):not([value=””]):not(:disabled) {
font-weight: bold !important;
}

/* Optional: Add a specific color to in-stock options for better visibility */
.single-product .variations select option:not(:checked):not([value=””]):not(:disabled) {
color: #008000 !important; /* Green color for in-stock */
}

[ianlea]

Even better would be show all variations not in a dropdown like this https://theshirtlounge.com/shop/mens-shirts/country-shirts/tattersall-shirt-small-check-in-cream-navy-brown/

[Aizaz Awan]

Hello, @ianlea,

Could you please explain what exactly you want with some screenshots along with the page URL, and with your site WP Admin URL and Credentials so that I can further look into it for you on your site and help you ou.

Best Regards,
PThemes Team.

[ianlea]

Aizaz thank you

Can I have the option to view variable products showing an in stock number in bold or a colour

I know I can disable out of stock products.

I tried the code above it shows all variants in a colour if the parent is in stock it does not differentiate.

Attachments:

You must be logged in to view attached files.

[Aizaz Awan]

Hello, @ianlea,

I am sorry, but I still couldn’t understand properly. Could you please elaborate more with some more detailed screenshots and with the page URL having issues so that I can check further and assist you accordingly.

Best Regards,
PThemes Team.

[ianlea]

In the screenshot all the size are same colour and same font even though not all options are in stock it would be good if that is an option

[Aizaz Awan]

Hello, @ianlea,

Unfortunately, there is no such option, so you can try with any third-party plugin or with some Custom Code.

Method 1:

1. Navigate to WooCommerce > Settings > Products > Inventory.
2. Check the box next to “Hide out of stock items from the catalog.” This will hide out-of-stock items from the shop page and disable the variations on the product page.
3. Click Save changes.

Alternatively, please refer to the articles listed below:

https://wordpress.org/support/topic/how-to-disable-out-of-stock-variable-products/

WooCommerce: Disable Out of Stock Variations @ Variable Product Dropdown

https://stackoverflow.com/questions/77330787/hide-out-of-stock-variations-in-woocommerce-variable-product-pages

Best Regards,
PThemes Team.

• This reply was modified 1 month, 3 weeks ago by Aizaz Awan.

[ianlea]

Thank you, yes I have seen that, I use a different them and that shows size icons in a horizontal row like this in another site I maintain https://theshirtlounge.com/shop/brand/fisk-of-oslo/fisk-of-oslo-blue-cotton-oxford-slim-fit-shirt/

[Aizaz Awan]

Hello @ianlea,

Thank you for the clarification and the example link.

The layout you are referring to — where variations appear as horizontal size buttons/swatches instead of dropdowns — is not part of the default Porto theme variation style. Porto uses the standard WooCommerce dropdown unless you enable Swatches, but even with swatches, Porto currently does not support showing dynamic in-stock vs out-of-stock styling (colors, bold text, etc.) inside the variation buttons.

✔ What Porto does not currently support

Porto does not automatically:

Change the color or boldness of individual variation options based on stock
Show stock numbers directly on the swatch buttons
Grey out swatches only when specific variation attributes are out of stock

For this type of advanced interactive variation behavior, you will need either:

1. Use a third party plugin.
2. Use a Custom Code.

Best Regards,
PThemes Team.

[Author]

Posts