Build Your Own Business Website header image

How to Create An On Click Version of a WP eStore Add to Cart Button

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

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.

Video Transcript

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.

Okay so in this case, well let’s just take a look at it in Firefox. But I’m going to say that in this case, the on click version is the pseudo attribute called active. And we just did focus but you’re going to want to do active. And so for example, if we just come down here, let’s just inspect this for a second, just to make sure there isn’t some javascript that’s really doing the work. Yeah so this is the class eStore button so you’ve got some custom CSS in here that specifies the… okay, I don’t see the code in here where the button is being specified. What code are you using?

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.

Right.

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.

And you.

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
2 comments… add one

Leave a Comment