In this session, we show how to create an on click version of a WP eStore add to cart button using the focus pseudo-element in CSS.
So you want to go about creating an on click version of the Add to Cart button in WP eStore. Do you have a… can you point me to the page where you want to do that?
Yeah. I’m messing about… it’s ardacards.com. And down the bottom of that page, there should be an Add to Cart… button. I’ve got the thing where I’ve got the basket version but I want to be an on click version and I’ve got the 3rd graphic there as well.
For the graphic itself or…
Yeah okay, what’s happening here, I think, is that you’ve got… this is all happening automatically via WP eStore. That is, you’ve specified the Add to Basket button and it’s automatically just changed in the opacity so its hover condition is not your hover condition. Its hover condition is this opacity change. The way to overrule this would be to…yeah let’s see, okay. I think that the way to do that is just to use your custom… let’s just make sure we’re talking about the right one again. This is the eStore button, class eStore button. So input the eStore button… let’s see. Let’s just say border red for just a second. Yeah, border color.
Okay so now if what we wanted to do was to…okay so transparent. I just did that to test. So input eStore button colon active and then red, input eStore active… it should not be red now.
Let’s see, custom input eStore button border color transparent border color red button…eStore.button active. Well, you know what? I said that confidently that it was active but let’s just make sure. Let’s go to W3 Schools and just make sure that we understand what the… okay CSS and then we’re going to look at forms. Actually, let’s just look at… let’s just look at border and scroll down to… okay. Where are forms? Okay, let’s go to reference.
It’s interesting that it’s not actually using my 2nd graphic. It’s just changing the opacity.
Yeah, that’s what it’s doing. Okay. Okay, active selects the active link. Okay, focus selects the input element which has focus. Let’s see, a active. You know what? Maybe focus is the right term here too, actually, now that we say that. Maybe active is right for a link but focus is right for an input element. Maybe that’s the deal here. Yeah, there it is, that’s it. So you would use the focus pseudo element. So .custom input .estore button: focus and then you just change the background image. I mean, I played with border because it was there for me to play with but you just… you would have background image such and such and you would use that. Does that make sense?
It does, yeah.
Okay. Anything else?
No, thank you very much for your help.
You’re welcome. Have a good day.