This member asks if it is possible to hide the “Add to Cart” button for a particular type of product display in WP eStore. We look at an example of the “Fancy 3” product display and discuss how to hide the button using custom css.
Rick: Okay so now it looks like Patricia is back and I’m kind of hoping that Patricia, the sound is working now, I trust? Or not the sound but the video so let’s see. Patricia?
Patricia: Yes. I can see and I can hear.
Rick: Okay perfect. Okay so let’s see, where on earth did I go? Oh yeah, I haven’t finished myself to presenter again. There we go, okay show my screen. Okay so now what we’re going to do then, you asked a question. Is it possible to hide the add the card button in certain short codes? Now didn’t you ask me that question a couple of weeks ago and I said no? Or was it somebody else?
Patricia: No, that’s not me. I asked a question on the forum and I got no answer so as I am persistent…
Patricia: I’m back here with my question.
Okay well then, the answer to your question is yes, you can although you have to do it via CSS. And we’re going to… I’m going to show you how to do that using Jackie’s site as an example since she’s got a whole bunch of those things.
And so, she’s got these grids with the quantity and the Add to Cart button that are just sitting there. And I’m assuming that what you want is you want a page of this stuff but you don’t want that stuff, those 2 things displayed.
Patricia: Yes and I have the exact same… I have a page that sort of looked like that but yes, I have to send display, I use the (1.49) and at this point, I’d like to show a photo, the title with the link to the page to the past, the price but I don’t… I sell… for me, the Add to Cart at this point is kind of pushy. The people aren’t going to buy yet. They have to click and know more so I just want to show everything, what is available with just a link and a price but not Add to Cart.
Rick: And so, what we’re doing here is I just inspected this element in Firebug to find out what this section is and you can see that when I hover over this down here, that is this thing called object. And object is within this div class eStore fancy 3 footer. And so what we’re going to do is we’re going to tell that to display none.
And so, if we go into our custom CSS where we’re doing our styling for our shopping cart, if we type .custom and then .estore fancy 3 footer. I’m just going to copy that. And then object which is an HTML object essentially… and all you have to do here is say display none and it will… and that will go away. And so all you have are these you know, it’s the price and link and the image. And then if you link off you know, click on the image link then it takes you to the specific page, at which point, you can put your Add to Cart button again.
Patricia: Okay. So yeah, that’s really what I want to do. Now, if I wanted…. If I understand all the other lessons, if I wanted to do that only in some pages, I have to go with the class, the custom class.
Rick: Yes, the custom body class.
Patricia: Yes and then I can say I want to do that only in this page or in this page.
Rick: Yes and or you could add a custom class to specific pages. And so, you could say this…let’s just say for example, you have 100 pages like this. On 50 of them, you want the stuff hidden and on 50 of them, you don’t. Well, you don’t want to have 100 definitions, right? What you’d have is 2 definitions and you would make one of those definitions… you would have the standard definition so you really only have 1 definition. You’d have the standard definition and then you would have a say, hide button or yeah, hide button definition. And then what you do is… maybe you already understand this but what you do is you’d go to those pages and let’s see, for example, edit this page. You would go to those pages and go down to SEO details and additional style. And here under CSS class, you would type hide button, for example. Now if you did that on each of the 50 pages that you wanted the button hidden from and then just have a hide button alternative you know, CSS… so for now, we say update, you’re going to see that hide button… this hide button has been added to my custom body class for this page. And so, if we view the page again and we just view page source…
Patricia: If you have not declared hide button yet?
Rick: Well no, I haven’t declared it yet but I have created a structure… I mean, what I’ve done is I’ve added the class to the page so that…here we are now in div id page… pardon me. Come up to body… where on earth is body? It’s right in here someplace. Body class so first it’s custom because it’s custom then it’s live answers because that’s the name of the page. And now it adds hide button. So if I add this hide button to 50 pages, I can still just have a .custom .hide button space dot estore fancy 3 footer object or footer and then object and then hide or display none and it would affect all 50 pages, any page in which you put this hide button on. Does that make sense?
Rick: Okay, okay so anyway, that’s how you would handle that. Anything else?