CSS Help!

Zenify

Hi,

I`m using Elementor Pro and WooCommerce and I'm trying to hide a button on a product page with custom css.

I would like the button to be visible when the item is not in stock.

I know this is a very simple thing but I always just copy and paste css and cant find this anywhere online.

Thanks for the help in advance :)

biketard

So you want the code to hide something and you would manually put it in there/take it out? Or you want something that knows when to hide/unhide the button? For just hiding something, this is a common option:

display: none;

See https://www.w3schools.com/css/css_display_visibility.asp

Zenify

https://www.boards.ie/discussion/comment/120219178#Comment_120219178

Thanks for the reply.

What I`m trying to achieve is a little more complex. I am editing a product template that is used to display all my woocommerce products. When the item is out of stock I want a button to appear that says email me when back in stock. When the item is in stock it should be hidden.

display: none; (works perfectly to hide the button when in stock but does not show when out of stock)

Trying to determine if the item is in stock/out of stock is a little tricky but the product page will actually have the text "out of stock" displayed so the css could just look for that? example pic attached!

out of stock.jpg

biketard

Off the top of my head, I can't think of a way css can hook into the "out of stock" text to display or hide the button. I think you may have to go down a javascript route or something for that (and I don't know the answer to that one -- sorry). Hopefully someone else will come along with a better answer.

(I suppose if you knew the code that was telling it to display the "out of stock" text, you could get that to also display the button.)

Zenify

Just an update on how I ended up doing this. I used 2 plugins (I already had them) Advanced Custom Fields (ACF) and Ultimate Addons (UA). I created a radio button in ACF called stock email with the value choices yes/no. I then used the Display Conditions in UA with the ACF dynamic tag . It isn't automatic as I have to click the toggle in the woocommerce product page but its good enough for me. I sent hours on this....

igCorcaigh

This is business logic.

Is there no back end service you can call to retrieve stock levels?

Zenify

I couldn't find anything online for this. Which I found surprising. I spent about 4 hours with Chat GPT writing JS and PHP and CSS to no avail. Tried lots of different things. I wouldn't be able to write any code myself. Chat GPT has been great for lots of code and this was the only thing it failed at for me.

igCorcaigh

@Zenify

How are you checking stock levels?

You need that information to set the visibility of the button, right?

Zenify

@igCorcaigh

Stock levels are all managed as normal via WooCommerce. When out of stock the "add to cart" button disappears and an "out of stock" message appears on the product page, again all normal WooCommerce functionality.

I have to manually select a toggle in the WooCommerce product to turn on the email when out of stock button (pic attached), ACF enables this function. Connecting it to dynamically show the button was done via UA. I tried to have it all automatic but the code wouldn't work. There are paid plugins but they wouldn't do what I wanted for the signup details. It all forwards to Mailchimp for me.

igCorcaigh

@Zenify I'm not familiar with those components you are using. You seem to be constrained to using those.