We just finished adding the BYOB MarketPress Connect with Thesis 2 Box that removes some MarketPress automatically added elements like the product page on the menu, makes the taxonomy archive work properly and allows you to add featured products and more. Now we’ll take a look at the next box, the MarketPress Product Elements Box, and continue customizing our MarketPress store on a Thesis 2 site.
What the MarketPress Product Elements Box Adds
This MarketPress Product Elements box essentially adds the price and quantity and variations and that kind of thing to a page. Right now, when you’re looking at this product there’s no place in here for you to add it to the cart because we’ve overwritten the default MarketPress behavior by placing it down here at the bottom. So now, in order to add a backend to this and give you complete control over where it goes, we have this Elements box.
Using the Box
Let’s come over to our boxes and activate that MarketPress Elements box which is just right here. We’ll activate it and save it. Come back over to edit our product, now we have a new box available to us and that is the BYOB MarketPress Product Element box. So I’m going to make this one a price, add the box…actually I’m just going to drag it up into place now too. Take the price and drag it up here, go to Content Area and I’m going to drag it down to inside the Single Post Box directly below the image.
With this box you have a choice of, of course, the standard HTML choices, for example, if you want it in a span or its own div and you want to give it a class. But you also have the choice of what type or product element to display. Whether you display the price alone, a “Buy” button alone or the entire list of things like price, quantity, variations and “Buy”.
Let’s look at an example. We’ll choose price, quantity, variations and “Buy” and save our template. Here you can see what it does and that is it adds that right here, right? In this case, it gives you the variations and there’s no price because the price is dependent upon the variations. So you get the variation, you get a quantity and get an “Add to Cart” and that’s what that adds.
However, if we change this to just price and save the template, notice that it’s not showing us anything here. And the reason why it’s not showing us anything here is because there are multiple variations. Here’s an example of a product that doesn’t have variations so you’ll see the price here is $50.
If we come back over to our typical 2 Column content and say, “Your Price:” Let’s add the text to this, save the template and you’ll see it says, “Your Price: $50.00”. That’s because there’s a single price here. In the case where there is a multiple price that is where there are variations. In that case, what you want to do is decide whether or not you want to display multiple prices and if you do, how you want to display it.
Add Buy Button
The next thing we can add besides price is the “Buy” button and we’re just going to drag this over here, put it down below price. Now, you have two choices with the “Buy” button, you either have it as an individual item or you have it as a “Buy” button inside of a list.
This is an individual item so that’s what we’re going to choose. Hit save and…my mistake, when the product has variations and when it’s an individual item, the “Buy” button actually has the variation, the quantity and the “Add to Cart”.
Products with Price Ranges
Now, if you are looking at something that does not have variations, then it displays the price. That’s your price, quantity here and “Add to Cart”. So this whole thing is the “Buy” button and this is the price.
Let’s pick one that has a price range so let’s see, what we do we have in mind? From $25 but it’s got a $35, $25 and a $45 version, right? So you have this ability to display a price when there is a variation or not and if we take out this “Show “From” label”, the price isn’t going to show up there at all on products with variations because now the variation has this, okay? Now, this is entirely different though on an Archive page in this case, the Product Category page.
Buy Button on a Product Category Page
On a Product Category page, when you put in the “Buy” button, we’re going to create a new one, I’ll call this one “List Buy”, drag this up and drop it into the Post Box and then right below Thumbnail Image. In this case, what I’m going to do is pick “Buy” button within a list and when you have no options then you have an “Add to Cart” and if it’s in a list, it doesn’t assume a quantity, it’s going to add a 1 to the cart inside of a list.
If it has variations rather than having an “Add to Cart” button it has a “Choose Option” button and it takes you over to your Product page where you can choose the option you want. So the “Buy” button inside of a list either gives you an “Add to Cart” or “Choose Option” button depending upon whether or not there are variations.
In fact, let’s come back over to our taxonomy and I’m going to drag the List Buy into the Post Heading and I’m also going to drag the Price into the Post Heading and the Price is going to have a “Show a From” there.
I’m going to drag List Buy to the bottom, Price to the bottom and actually, Categories, Date and Author are pretty much irrelevant here so I’m going to drag those out of the Post Heading and drop them into tray. And, while I’m at it, the number of comments also can be dragged out of here and then dropped into the tray.
I’m going to change the Read More Link to Complete Description, save the template. So now you’ve got the “From: $20.00” or “Your Price: $50.00”, “Add to Cart”, “Complete Description”. The “Complete Description” now takes you to the Product page, your price, quantity and that kind of thing.
That is the product element and obviously, there are 4 different things listed there but there’s really only two bits to it – the text associated with the price and the stuff associated with the “Add to Cart” button. Depending upon what kind of template you’re styling, you’re going to choose the different “Buy” button for that condition.
Inside of the Archive Template, you could choose to use the whole thing so you could choose to place the price, quantity, variation and everything in one fell swoop in one container if that’s what you wanted. And that is the MarketPress elements box.