Return to previous page

Hide variation swatches when out of stock

This topic has 14 replies, 2 voices, and was last updated 5 months, 2 weeks ago ago by Rose Tyler

Diana

Participant

October 14, 2024 at 19:31

Hi! I created in my site a product with two attributes “Type” and “color”, but when I choose the type I see all the color options even if there is no availability, only they are either blurred or with a crossed line, but I do not want them to appear because I need to put many more colors as they depend on the selected type and it would be very uncomfortable to show so many unavailable, I need to disappear the color circle when select the first attribute.
I read many blogs and you recommend to select “Hide out of stock items from the catalog” and i did but does not work with the variation swatches and in the custom options of the theme just appear options to blur/default/or croos-line, but not to hide.

Thank you

https://fingocases.com/product/cordones-para-movil/

#418667 Copied Theme version: 9.4.2

13 Answers
Rose Tyler

Support staff

October 15, 2024 at 08:00
Hello, Diana,

Thank you for reaching out to us.

We understand your concern regarding the display of unavailable color options when selecting the “Type” attribute on your product page. As you mentioned, the current settings allow for blurring or crossing out unavailable options, but do not provide the functionality to completely hide them.

While the “Hide out of stock items from the catalog” option is a general WooCommerce setting, it may not apply directly to variation swatches in the way you’re expecting. Unfortunately, the theme’s built-in options currently only allow for blurring, default, or crossed-line styles for unavailable variations.

To achieve the functionality you’re looking for, where unavailable color options are hidden based on the selected type, you may need to implement custom code, for example, this CSS:

ul.st-swatch-preview li.sten-li-disabled { display: none !important; }

Best Regards,
8Theme’s Team
#418710 Copied
Diana

Participant

October 15, 2024 at 09:26

Hello, thank you for your prompt reply. I implemented the code in the section “theme custom CSS-global” but it works only if I’m logged into wordpress, I send you a video to see the comparison, if I’m logged into my wordpress user and preview, it works, but when I publish it and open the website on my mobile or on another computer, it still looks the same.
Thank you very much

Files is visible for topic creator and
support staff only.

#418721 Copied

Rose Tyler

Support staff

October 15, 2024 at 10:26

Hello, Diana,

Could you please provide temporary wp-admin access? We need to check your settings.

To grant WP-Admin access, please proceed to create a new user account with an administrator role through your WordPress Dashboard. Once the account is established, you may securely transmit the username and password to us via the Private Content section designated for this purpose.

Best regards,
8Theme Team

#418735 Copied

Diana

Participant

October 15, 2024 at 13:11

I created the new user. Thank you

Please contact administrator
for this information.

#418757 Copied

Rose Tyler

Support staff

October 15, 2024 at 13:13

Hello, Diana,

It appears that the wp-admin link is redirecting to a “Page Not Found” error. Could you kindly provide the correct URL for the login page?

Thank you for your assistance.

Best regards,
8Theme Team

#418758 Copied

Diana

Participant

October 15, 2024 at 15:39

Sorry i forgot

Please contact administrator
for this information.

#418789 Copied

Rose Tyler

Support staff

October 15, 2024 at 15:58

Hello, Diana,

We appreciate your prompt response.

We’ve changed the code. Please check the result on the single product page.

Best regards,
8Theme Team

Please contact administrator
for this information.

#418798 Copied

Diana

Participant

October 15, 2024 at 19:17

No is the same problem

Files is visible for topic creator and
support staff only.

#418813 Copied

Rose Tyler

Support staff

October 16, 2024 at 07:46

Hello, Diana,

Private Content

Best regards,
8Theme Team

Please contact administrator
for this information.

#418878 Copied

Diana

Participant

October 16, 2024 at 12:24

Yes that is what I sent you at the beginning, that when I’m logged into the wordpress panel works perfectly, but when I log out of the session no longer works, I leave the video so you can see the difference.

Files is visible for topic creator and
support staff only.

#418965 Copied

Rose Tyler

Support staff

October 16, 2024 at 12:30

Hello, Diana,

If the admin and a new user (who is not logged in) are seeing different content, it likely indicates that the cache has not been cleared. Only a logged-in admin can view the uncached version of the site. We recommend temporarily disabling the cache plugin and CDN to check if this resolves the issue.

Best regards,
8Theme Team

#418967 Copied

Diana

Participant

October 16, 2024 at 17:18

Hello! We logged into wp-admin and cleared the cache entirely, and also purged the SiteGround cache (our hosting), but the issue persists. Also we added ?nocache to the end of the URL, but the issue is still there. You can test it yourself as well.

https://fingocases.com/product/cordones-para-movil/?nocache

However, I can confirm that it’s not related to any caching.

Thank you

#419003 Copied

Rose Tyler

Support staff

October 17, 2024 at 07:57

Hello, Diana,

Have you had the chance to try disabling the WPRocket plugin? https://prnt.sc/_kcL11fUAEn1

Best regards,
8Theme Team

#419085 Copied
Viewing 14 results - 1 through 14 (of 14 total)