We just got through customizing the products archive template in Thesis 2 for our WP eStore and now I’d like to customize this “Add to Cart” button but with a style rather than an image.
Customize the Add to Cart Button in Thesis 2
And I think what we’ll do is use a style similar to this one here. It’s dark black and this light green. Let’s inspect this element and then we’re going to do this, of course, using very typical CSS systems. And we’re using Thesis 2.1 so we’re going to use our Custom CSS but the class is eStore_add_to_cart_button and the eStore_add_to_cart_button.
Let’s copy that and come over to our Custom CSS. So eStore_add_to_cart_button. Let’s give it some padding and I’m going to do 10 pixels top and bottom and 20 pixels right and left. So padding and then for background-color let’s just say black. For font-color let’s pick this color here.
Now we’ll save our Custom CSS and see what it looks like. Not too bad. We’ve got a nice little thing going on there. Now if we wanted to get rid of the border, we could say border:none and that will do the job.
If we want to give it a little drop shadow, it’s box-shadow and we’ll call it 3px, 3px, 3px and then #888. Let’s give it a font-size of 18. Save our Custom CSS and refresh it. Now when we hover over it let’s just make that drop shadow go away and change the cursor to a pointer. So now we’re going to say eStore_add_to_cart_button:hover and we’ll start off with cursor:pointer.
Notice how when I’m typing it goes from black to this bluish gray? As soon as it hits this bluish gray, that means the syntax is right. So you can use that to help you as you’re working along. For example, if I spelled box-shadow with two d’s, it would be black because that’s not proper syntax. So cursor:pointer and then drop-shadow: and obviously I’m doing something here, it’s not drop, it’s box-shadow. Note again box-shadow and now we’ll say 0px and save it and now we hover, that didn’t work.
It worked with the pointer but let’s see I think box-shadow maybe it’ll take none. Go to w3schools, we’ll just take a look at that. CSS3 and Borders is a box shadow I believe, it is. So Box Shadow and Available Box Shadow Elements are none so that’s what we’re going to say. None will be the default value which makes it looks like the box is being depressed right? That’s the point of it. So it looks like you’re pushing the button down when we do that.
So we’ve got I think a fairly nice looking button put together. How big is that text there? That text is 16 pixels, this is 18. I suppose we could take that down to 16 and maybe drop the height of that a little bit. Well, let’s just take it down to 16 pixels and see how it looks. Yeah, I think it looks good. Obviously the sky’s the limit at this point right, you can do anything you want with the style once you’ve got this button here styled.