Now that we’ve customized the Add to Cart Button for our WP eStore in Thesis 2 the next thing I would like to do is to customize the price.
Let’s come over to Boxes, Manage Boxes and then I’m going to delete the WP eStore Elements Box. I was monkeying around with it here today and I think I uploaded an old copy. We’re going to upload a box, choose the file, plugins, for Thesis 2.1 and this is okay. Notice it here in its unadulterated format.
New and Old Prices
So now what we’re going to do is style the price and really, more to the point, the price we’re going to style is the old price because we have this new price and old price. Now, notice how the old price is 15.00 and the new price is 12? I made a mistake here when I set these products up and that was that I didn’t include the decimal points in some of these so that’s something that you need to do if you want the decimal point to show up.
Style the Old Price
Let’s just inspect this element for a second and this is span class=”old-price”. So what we’re going to do is come over here to our Custom CSS and then for our class .old-price we’re going to say color:red. Then I think it is text decoration. Let’s see, we’ll go over to w3schools and check. Go to CSS and I believe that is text-decoration:line-through that’s what we’re going to use, text-decoration:line-through, which will make it look like we’re crossing it out, right?
Save it, come back over here and refresh it and now it looks like it’s on sale and instead of $15 it’s $12. I think I’d like to shove that over just a little bit so I’m going to give it a little bit of left padding and see how that works. Yeah, there you go. That moves that a little bit. There’s a little bit of space and we end up with I think a fairly nicely styled pricing. Let’s look at the plugin itself, there’s the original price, there’s the new price and there’s our product.