In this session a member asks how he can rearrange the product description on his WP eStore to make it look neater. We show how that can be achieved with a little CSS code.
Rick: But we’re going to start off this morning with Rosco. Rosco, I’m unmuting your microphone here. Are you with us?
Rosco: Yup, I’m here.
Rick: Perfect, okay so tell me about your question.
Rosco: Well, I’ve got a website I’ve been building and it’s powderkegllc.com and there’s the WP eStore on the design where the way that I’d like to display the products. And I think…do you have the web address there?
Rick: I do. I’m going there right now.
Rosco: I’ll get there as well.
Rosco: And if you scroll down, you’ll see… now, that’s odd. I’m looking at yours and I think it’s different than mine. Hang on just a second.
Rick: Well, I am looking at it in Firefox.
Rosco: That might make a difference. I’m at Google Chrome right now.
Rick: Well, let’s look at it in Chrome.
Rosco: Okay yeah, if you scroll up to the 2nd product…
Rick: This one here?
Rosco: Yeah, you’ll notice how that parenthesis, I would like to make it a default that the parenthesis always falls under like in the product I’m showing above. So I’m working if there’s a way that you’d see where we can do that. Because I’ve got… if you hit some of my other product, let’s look at the Polaris real quick. You’ll notice Polaris, the first one, if you go up there and hit products and you select the Polaris products, you’ll notice that the first one there does that. And just for you know, for presentation, it would be nice if I create a default. I think that it’s just putting in a paragraph you know, so that it’s like a 2nd paragraph but I’m not… I don’t want to mess up the plugin.
Rick: Well, it would be interesting to see what would happen. Why don’t you do that? I don’t know if this will work but not a paragraph but a break. A break tag is
. Why don’t you try to put that in the middle of the name because that’s what this is, right? This is the name.
Rosco: Yup, that’s the name of the product. Exactly.
Rick: And the reason why it’s dropping down or not dropping down is because of the width of the space provided. You know, you’ve only got so much space and so, actually, I think maybe, if you’d put a space in between here, between keg and the parenthesis then it would automatically be dropping off there rather than dropping off at the hyphen.
Rosco: Go ahead, I’m sorry.
Rick: It looks like what it’s doing on this one in particular is it’s trying to figure out where to break, sees the hyphen and breaks at the hyphen. Whereas if there was a space in between the G and the parenthesis, it would probably break there for this one but that doesn’t solve your problem forever. Like for this one here, it doesn’t.
Exactly. Let me… while you’re saying that, I can go to my dashboard and we can try that real quick.
Rick: Yeah. Go to your product.
Rosco: Yup and under…we’re looking at the Polaris Powder Keg in there so we’ll edit that.
Rick: And so in the name, what you’re going to do is you’re going to put a < sign and then br then space slash > and then save it.
Rosco: Alright, we’ll just give that a fly.
Rick: Tell me when it’s been saved.
Rosco: It’s trying. There we go. Go ahead and refresh and let’s see if it did what you’re…
Rick: No. It’s tripping out the HTML. So…
Rosco: And it didn’t…as I’m looking at it, it did not… yeah, it didn’t save it. It did not save that break. It’s not even a product name anymore.
Rick: Right because the field’s been sanitized, not being able to take any code and so, it strips out any HTML that you might put in there.
Rick: So I you know, I don’t think there is a way to do that. I think you might be better off repositioning the price so that it was below it all the time instead of immediately beside which will allow it to go on one line.
Rosco: That’s not a bad idea.
Rick: Or you could make the name smaller so that the price is larger and so the space available is less. Or you could you know, give yourself several spaces in here.
Rosco: I actually attempted that, Rick.
Rick: And it strips the extra spaces out?
Rosco: Yeah, I just gave it multiple spaces. In fact, I’ll do that again and see…
Rick: It could strip out the additional spaces.
Rosco: Now, go ahead and refresh on yours.
Rick: Yeah. It just strips it.
Rosco: And it didn’t strip it out here. It’s still showing those spaces but it didn’t change anything in the display.
Rick: But it’s not showing up in the display, right.
Rosco: Yeah. Well, alright I’ll mess around with it some more. I just thought you know, because I know that I don’t want to get in and start trying to write things into this plugin.
Rick: Well, not for that. You’re right.
Rosco: Destroy what I’ve done so… but I could, like you said, I could reposition the price part.
Rick: Yeah, you could make the price float left which would make it drop down in here under it and you could make the name of this, give it a width of 100%. I mean, let’s just do that for fun on this one. Let’s see…
Rosco: You’ll try it on Firefox, see if it’ll work?
Rick: Yup. So if we inspect this element here… so we’ve got fancy header right, right? So that’s that and then we’ve got fancy header left, that’s that. So where is the size coming from? Okay, left span so you’d make it float left and you’d make the width 100%. And then you could take the price and you could make the price float left.
Rosco: Yeah, I like that.
Rick: And now, you’d have you know, an arrangement like that.
Rosco: Now that was pretty simple and all I wanted to do is just you know, for you know, display purposes, just to look like we’re intentionally trying to get it…
Rick: Right. Absolutely.
Rosco: Well, I think that’s exactly what I’ll do right there, Rick. I think that’s a simple solution. So thank you.
Rick: Okay, perfect. You’re welcome. Have a good day.
Rosco: You too.