Build Your Own Business Website header image

WP eStore Update – New Features in Version 5 – Part 3 – Old Price Feature

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.

This is the third in a short series on looking at the new features in WP eStore 5.3. In this lesson we’ll look at the “old price” feature. We’ll add the old price to a product and then add some custom styling to make it look better.

Video Transcript

Okay, there’s one other thing I want to show you which I think is kind of interesting and then we’re going to do a different exercise. And the thing I want to show you is the old price feature. So if we go to Manage Products and we edit this product, under Additional Product Details, there is a new category called old price. So if you add the old price in, say it was $39.95, if you add the old price in, what it’s going to do is show the old price with an X through it or a crossed out and beside the new price.

So if we save that product and then if we come back over to our page and we refresh it, there’s the old price, $39.95, there’s the new price, $24.95. It doesn’t show that in fancy 3. Obviously, it’s not going to show it in this style either but nevertheless, it does show up like this. And if you were to… and it’s a fairly simple fix here in CSS to you know, make this red and float up beside. In fact, all you really have to do is inspect this element. So let’s get the… it’s a div class eStore product description. Okay so what we’re going to do here is find our shopping cart, footer, categories, simple product display.

Okay and so if we come down here and say .custom… let’s see, control V… actually I want to put div in front of that. I want this to affect the div only and then give it a position of relative, if I can type it right. And then one more time, .custom and then what are we looking for? We are looking for div eStore price, div .estore price and we’ll call it color red. Oh not price, old price. And then one more time… oh no, and then we’re just going to say position absolute and then we’re going to make it left colon, call it 150 pixels. Not left, right. No, no, no, it’s left but it’s -150. You’re right, thank you very much Brian. So maybe that was my problem. Was that my problem? Yeah, that was my problem. So okay, call it 100 pixels. There we go.

So now the old price is beside the new price, off to the right and it’s a fairly you know, a little fix to make it look that way.

0 Comments… add one
0 comments… add one

Leave a Comment