Creating a Dynamic Pricing Table in Bricks

Hello, Inner Circle. Cracker here for another exciting tutorial.

Hopefully it’s going to be exciting because we’re going to be taking a look at how to create a dynamic pricing table in BricsBuilder.

The table you’re seeing on the screen right now is fully dynamic. That means you could control every part of the data shown in this table dynamically from the title to the pricing to the currency to the year to all these, every little thing here and all the lists here, you could control them dynamically.

And this one is sort of like the featured one. You could decide which one is going to be featured dynamically and you could also control the order which one comes to the middle dynamically.

So all these are going to be dynamic. Now you see some of them are bold.

Some of them are highlighted, for example, this one. Now I took the inspiration for the design of this table from MetaBox IO, so let’s see if we can quickly pull that up.

We’re going to be doing all this with MetaBox IO. The basic bundle, the ultimate bundle, and the lifetime bundles are all going to be post types and all these are going to be controlled with custom fields.

Now I’m going to go to the back end. Now if you notice, we have each of the bundles has a price like this is worth 250, this is worth $900, this is worth $25, $50 and then you have these prices which are kind of like the promo price because these are worth higher prices.

Now, so let’s assume that you know the company says we no longer want to offer these discounts, we want to revert to the original price, let’s say for the basic bundle. All I need to do is to go back here, go to Pricing that I’ve created.

I’m going to open the basic bundle and then I’m going to just turn off that this is no longer on sale. That is what I’m going to do.

All I need to do is just to turn off that it’s no longer on sale and then I am just going to save that. Once I come here to refresh, you see that it’s now 250.

I don’t need to go into the builder and do anything. Another thing you will notice is that you have the some of them are bold and this particular one is highlighted and then the boss says, oh, instead of highlighting this one, why don’t we highlight this one?

And then this should just be bold and then for the one year of support, let’s bolden this one too. All I need to do is to go back there and check this.

This one was highlighted. Okay, I’m not highlighting that one.

I’m highlighting this one and one year of support. Let’s emphasize it.

Save. Go to the front end.

Refresh. Boom.

This is highlighted and this is added. Let’s say we wanted to highlight annual renewal.

I’m sorry, I’ll emphasize annual renewal and I’m going to refresh that. And they said, no, we don’t want this to be here.

So since we have bolded it, let’s move it up just above the one year. You don’t need to go into the builder.

All you need to do is to come back here and just move it up. up and then refresh.

Boom! So you see that then, let’s say okay, let’s revert it back to the sales price.

Let’s give it that discount. All I need to come here is and then this is the price.

Let’s bump up the normal price to 300 and this is going to be 245. And then let’s save that and I’m going to come back here, refresh.

Boom! It’s what?

300. It’s now 245.

So you see that everything here is controlled by the custom fields. And I’m going to learn here for other things.

So this will come in handy for other use cases. All you need to know is how this thing works and then you’re going to be able to apply it to other use cases.

So I’m going to walk you through the steps of creating the custom fields, creating the post types, and we’re going to go into BricsBuilder and we’re going to build out this thing and apply the necessary conditions using BricksBuilder’s conditions to display and style all this dynamically. Let’s assume we want the lifetime bundle to be here, to be the recommended.

All I need to do is to come here. Right now it’s the basic bundle.

And you see the basic bundle is not featured. I’m going to come back here.

I’m going to go to the ultimate bundle. Now the ultimate bundle is featured.

I’m going to just turn that off. It’s no longer going to be featured.

All right, so I’m going to refresh this. You can see it’s no longer featured and you see the style is the same as the others.

Now, I want the Lifetime Bundle to be featured. So I’m going to go to the Lifetime Bundle and I’m just going to turn it on, just turn it on Featured and then it has the order of three.

So that means that when I go to the front end and refresh again, you see it’s going to be here. We want to move it to the center.

I’m just going to take it back to the order of two. Now, this other one already had the order of two, so we might just have to go back and take that to the order of three.

So I’m going to go to the ultimate bundle that was the order of two. I’m just going to change that to the order of three.

Now, this might require you moving in. You see, so the lifetime bundles comes into the center and everything just looks like it was before when this was here.

I want to also mention that there’s an alternative to using the custom field for this. For example, you could put a plugin that is called post type order, but I’m just going to quickly go into plugins and then we’re going to choose search for post type order plugin.

I’m going to click add new and then I’m going to search for post type order plugin. Post type, let’s just make that small later.

Post type order. I’m just going to install this and probably we’re going to just get rid of that order field because it requires us opening more than one post type to edit the order.

So you have to go in here and change this one, go in here and change that one. So let’s see how this works.

I’m going to just go to the settings page and then I’m going to configure it. Let’s see.

I think everything here looks okay. I’m going to go to my post type here and then I’m just going to say yes for this, archive drag and drop.

I’m going to save that for the pricing and then if I go to the pricing, I should be able to move this around. Now that means I’ll have to change my sorting, my ordering inside of WordPress.

So in what we’re going to be building, I’m going to be using this. So I’m going to be using this.

So when you drag this, so anyone that you move to the center is going to be the one that works. Now, when I was planning this tutorial, I was planning to use a custom field for that.

I’m just going to show you both. I’m going to show you how to use the custom field.

I’m going to show you how to use this. Okay.

But I think that this is easier. So the one that is at the center will be the one at the center.

The one that is at the first, the first one will be the one that is at the number one. So this is much more easier than using a custom field.

avoid going opening this to go inside the detail here. Okay, the WordPress detail to change the order twice for two of them when you want to change the order just like I did.

Alright, let’s jump into a clean installation and start this step by step. The first thing we’re going to do is, we’re going to create the post type.

So I’m going to go to MetaBox post type and then I’m going to create a new post type. This new post type is going to be pricing.

So I’m going to give it a name, pricings, and then this is going to be pricing. And nothing else here.

I think I’m going to go to advance here and I don’t want it to be publicly queryable because we don’t want it to have their own pages. We want to use this like on the home page, so we don’t want it to have their own URL.

So I’m going to publish this and if I go to pricing and let’s say we add a new pricing, I’m going to call that bundle. What we call that basic bundle.

So I’m going to call that basic bundle and then I’m going to publish that. Alright, so you can see that it doesn’t show you view once you publish.

So I’m going to go back to the, you know, so you can view it. Normally, if you have like a post, you have the option to view, but because we made it not to be publicly queryable, we don’t have that option.

That means it doesn’t have its own single page. So that is what we want.

I’m going to go ahead and create other post. Now I could go ahead and change the icon here.

So we still have that. So under here, we have the icon.

I want to just use a dollar sign, which is going to be like money right there. And then that’s all.

That’s all I want to do here. So let me just update this and it’s going to change that to the dollar sign.

I’m not going to do any other thing. I’m not going to use taxonomies.

I don’t need to do any other thing here. So I’m going to go ahead and create all the bundles.

So I’m going to add here the basic bundle. The next one is going to be the ultimate bundle.

Then we have the lifetime bundle. So let’s do that.

I’m going to do ultimate bundle. And I’m going to save that.

Then we’re going to add another one and that’s going to be the lifetime bundle. Lifetime bundle.

I’m going to save that. How do you save it?

So we’re done with creating all our bundles. Now the next thing we’re going to do is to create the custom field.

So we’re going to go to MetaBox again and then we’re going to go to Custom Field and we’re going to add new custom field. And I’m going to add a new custom field and that is going to be for my prisings.

And let’s just publish that and then we’re going to start adding fields. So what I’m going to do is that I’m going to make my screen into two.

I’m going to split it into two so that we can look at something. I want to bring this out, just like that.

And then I want to be seeing the fields, like from here, I want to be seeing the fields. I’m just going to keep that in view.

Let’s just do that, keep that in view. We see the first field that I want to create here is the currency.

I’m just going to add a field. That is going to be a text field.

And that text field I’m going to call it currency. And then I’m going to give it a default value of dollar sign because that’s going to be default.

And I’m going to create another field. The next field I’m going to create is also going to be a number field.

So that’s going to be a number field and that is going to be my normal price. I’m just going to call it normal price.

The next field I’m going to add will be a switch field. The switch field is like a toggle that returns the value of one or zero, true for one and false for zero.

Sorry, zero for false. This is going to be on sale.

It’s just going to be like a question on sale. If it is on cell, yes.

So we’re going to have the on is going to be yes and let’s just make it caps and then the off is going to be no, so not on cell. And for our use case, because it’s always on cell, the default should be on.

It should be on by default. So when you create a new post site, it is going to be on and then you’re going to save it.

After that, we want a sales price. I’m just going to do this.

I’m going to duplicate that and move down here. This is going to be the sales price.

So I’m just going to say sales price and that is going to have a conditional logic. That is going to only show if on sale is toggled.

So if this is toggled, we only want that to show if it is toggled. So I’m going to go to advanced and then I’m going to add the conditional logic and say if on cell is equals to one, that means if it is toggled, that is going to work.

So I’m just going to save that and I’m going to quickly go to my custom field. Let’s go to one of the fields and then we’re going to check something.

We want to check if that is conditional logic is working. Now we have not assigned that yet.

In the setting, I’m going to quickly assign this post type to our pricing post type. And then I’m going to go back here and refresh.

So we have here, so is it on sale? If it is not on sale, this should have gone off.

So let’s go back there and check what is wrong with it. So sales, advance, yep, it should be.

Okay, so I see what the problem is. We are not supposed to have this question mark in here.

So I’m going to just update that and let’s update. Yeah, I don’t think it’s okay to have that question mark in there.

You shouldn’t have it. So even if the label shows a question mark, this should not show.

So let’s go back there and check that conditional logic again and this, remove that question mark. Yep, so if you click here, it will be that.

Save. And then if I go again and refresh now, see it’s not working now.

I go again and refresh, it should work. Okay, so yeah, you can see that the sell price is not there and then when we turn this on, it shows up.

So that’s one thing. Don’t make the mistake of leaving that question mark inside the ID, inside the slug.

So right now, we’re going to create another one. So that one will be the duration.

So I’m going to add the duration. For the duration, I’m going to use a select field because I want to select whether it is one time or is it per year or per month.

So I’m just going to call this duration. And then type is select and then the choices will be month, year, and one time.

And then that is it. So we’ve taken care of everything here.

Then the next one is the description and that is going to be like a basic text. Okay.

And I’m going to just call that description. And nothing much there.

You know, that is just it. And the next one will be this.

And this is going to be a repeater. It’s going to call that Features.

I could just call it Feature Group. Okay?

So let me just call it Feature Group and under that, I’m going to make it clonable and I’m also going to make it sortable. So I want to be able to drag it, move it around just like I did when I demonstrated how I moved it around.

Okay? And then I’m going to scroll all the way down under that group.

Under the group you have another field here, another place you could add. This is the general adding field.

This is under the group. So I’m going to add my fields and this is going to be just the regular text.

So the first one here is going to be just the feature. And then we’re going to do the second one is going to be a switch.

That one is going to determine whether we’re going to emphasize it or not. So this is going to be emphasize.

I’m going to put a question mark there, but I’m going to remove this. So the switch, you emphasize.

Okay, yeah, emphasize. Not sized, just switch.

It’s not going to be on by default. Now one thing I want to show you is that if you have a sales price, then you should make that required because it doesn’t make sense for you to turn on that is on sale without giving the sales price.

You want to make sure you force the user to include the sales price if it is on sale. Also you want to make sure you force the user to add the price.

So I think those both should be required. Those are the two things that should be required.

Okay so let’s go back to the group. Now we have Emphasize and then I’m going to duplicate this again and then I’m going to change this to a highlight.

Okay so right now that is what changes the color. For example, this okay so you want to highlight.

Anyone you want to highlight, that is what is going to control it. So let’s do that and I think those are the only three things that we need there in that field.

We need the feature which takes care of all these features. The emphasize takes care of the ones that are going to be bold and then the highlight takes care of anyone that will have a different color from the rest just to highlight it.

I’m going to go ahead and save this. We still have some other fields to add.

I’m going to add another one. This one is going to be URL and that is going to be the link.

So I’m just going to call it link. That’s going to link to the bottom.

Even mine I didn’t add any link but just put that in case you need to add a link to the bottom. So that is going to be the link and then I’m going to add another field and that is going to be a switch also and that switch is going to take care of whether it is featured or not.

So it’s featured, if it is featured then you switch it on, if it is not, you switch it off. Then I’m going to add another field, it’s going to be a number field and that is going to be the order.

That order is just the order that we tried to do that I said I wasn’t going to use, but I’m going to use that and then I’m going to show you how to use that feature if you want to use and also I’m going to show you how to use that free plugin if you want to use it. Then the last one is going to be a text button.

Just in case you want to have this text button to be dynamic, so I’m just going to put it like a text and then I’m just going to call it button text. And then that’s just going to be a regular text.

The default value should be by now, something like that. Okay.

Now let’s go back to that feature. Now I’m going to save this and I’m going to take a look at this.

Let’s refresh this again and see what it looks like. All right.

So, we have this. We have the link.

We have this group. Okay.

So, you could add another one but you see that it’s taking up a lot of space here. So, we don’t want this to happen.

That means the whole of this, I want to move this, you know, so it’s taking up so much space. We want all of this to be on one line so we’re going to go back there to that group, okay?

And then for the feature, I want it to have a column of 2. I’m going to update that and then we’re going to go back here, refresh and let’s see how it looks.

Yeah, so right now it’s properly organized. So you have the feature here, you have this here, you have this here.

So I can add more, so I can move this, so it’s all on the same line. All right.

I’m just going to refresh that because I’m not going to fill that in right now. So it appears we have all the fields that we need.

So we’re going to go ahead and populate this. I’m going to populate this off camera and then I’m going to get back to you because I don’t want you to watch me populating all this.

All right. So I’ve gone ahead to fill in and populate all this.

So what I was doing here was all these are straightforward. When it has to do with a group, you just add an item.

You can add an item. So I’m just going to remove that one.

It’s very easy, very straightforward. So I’m just going to go back here.

Everything is in order, all my fields, my ultimate bundle is set to featured. So that is the one that is going to be featured and it’s going to be number two on that page.

And then the basic is going to be number one. So I just want to ensure that I added that, that is going to be number one, yep.

And the other one is going to be number three. So the next thing is for us to go into Brics and start building this.

So I’m going to go ahead and launch Brics. I want to create a new page.

So I’m just going to create a new page. I’m just going to drop in a section that has a container and then I’m going to drop in a block there.

And that block is going to be my pricing wrapper. And it’s going to be an unordered list.

I’m going to give it a class of pricing-wrapper. You know what, let me just change this to card wrapper.

Okay. So I’m just going to call it card wrapper and I’m going to change this to pricing card wrapper.

Okay. Pricing-card.

Okay. So I’ve changed that and then I’m going to drop in another block there.

That’s going to be my pricing card and that is going to be an LI. So I write this so I can remember when I see it and this is going to be my pricing-card.

I’m going to drop in another block there and this is going to be my featured info. So whether it is featured or not.

So I’m just going to say pricing card underscore underscore featured-info. And then inside there I’m going to drop in a text, a basic text and that basic text is going to be have a class of pricing card featured text.

So pricing-card and that’s called featured-text. And I’m just going to change this to featured text.

Okay. All right.

Featured. Okay.

So we have that structure. So we have the card wrapper, we have the card, and then inside that card we have the feature text.

I’m going to drop in another block there and this is going to be an inner wrap. Now we’re going to have an inner wrap for the card.

Now that is going to take care of things like having an inner wrap allows you to have something that takes care of the padding instead of placing the padding on the card itself. So I’m just going to call this Featured, sorry, Pricing Card Inner Drop.

So inside here we’re going to drop in is the title and that is going to be a heading. Alright, that’s going to be a heading and we’re going to make that an H2.

Yep, and that is going to be our featured card heading title. Okay, so a pricing card.

You need to copy that. heading or title.

Then after the title, we’re going to have the pricing group like this. This is going to be like a group of stuff inside a div or a block.

So I’m going to just insert a block. What did I do?

Did I wrap it? Yep, it’s going to be the price wrap.

I want to give everything a class, okay? Pricing card, price wrap, and then inside there we’re going to have our prices.

So it’s just going to be a basic text. Alright, so this is going to be the sales price.

That’s the number one price. I’m going to duplicate this.

This is going to be the normal price. And this, I’m going to duplicate this.

This is going to be what it is worth. See, what price.

So this is like this, what it’s worth. Sales price, the normal price.

The normal price will show up if it is not on sale. So this is going to be pricing card worth price.

And then outside there, instilled here, we’re going to have another text which is going to handle the description. This is going to be the description.

And then we’re going to have the class there, PricingCardDSC, like that, description. So now we have just added a couple of things.

Let’s start applying the style to it. So this is the content.

This is the card wrapper and this is going to be the card. So the card is going to be the loop item.

I’m going to turn it on to the loop and then the post, okay, is going to be the pricing. And that’s basically all for that.

And let’s look at this, the feature text. We’re going to just drop in the feature text there.

So we’re going to go to meta box, pricing, okay, a feature. Now I don’t think we put anything in that feature text.

I’m not sure we had a featured text. Let’s go back to check.

Let’s see. So the featured text is, what are we going to write here?

It’s going to be recommended and all that. So if it is featured, we want to have a label, what we’re going to put there.

So I’m going to go back. So we need to sort that out.

So in the Metabox custom field, we want to go into the pricing custom field and then we’re going to add another. It’s loading.

So we’re going to add a field here. So it’s featured.

Okay. So I’m going to add a field.

It’s going to be a basic text. Sorry, text.

Text field, I’m going to move it right on the featured and that is going to be my featured. Sorry, featured text.

And it’s going to be conditional. It’s going to show you if it’s featured.

Okay, featured is the switch. So if featured is equal to one, then it should show up.

So now I’m going to go to the pricing and then for our ultimate bundle is the one we’re going to feature. So the ultimate bundle is going to feature.

So if it’s not featured, it’s not going to have a text. So the feature text is going to be recommended.

Yep, that’s going to be a feature text, recommended. Okay, so remember when we change this, we didn’t put the feature text and it did not show up.

So that was, we changed this to a lifetime bundle. So just to demonstrate that, I’m just going to go ahead and put, instead of putting recommended, I’m just going to say best option.

Okay. All right.

Just put an exclamation mark there just to be dramatic about it and it’s going to show best option there. All right.

So that’s what we want to do. So we have already done that here, recommended, you know.

In this case, I could just put popular. Okay.

Let’s just change it up okay so in Brics definitely you have to refresh for it to recognize something the dynamic data is going to kick in so yeah so this is supposed to be featured a featured text I wrote true what did I write there? Featured Meta Box.

Featured Text. Okay, yeah, that is it.

Okay. So the featured text should show.

So it’s showing here popular, right? Okay.

Let’s just go back here to the Card Wrapper and I want this to be a three-grid layout. So I’m going to select the Card Wrapper.

I’m going to set the display to grid and then I’m going to use ACSS and do that. It’s going to give me three column grid.

I’m going to select this and this is going to be my post title which is we didn’t need to create a field for that. And this is my sales price, the way it works is that we have a dollar here, we have the price here, we have the duration.

So we are going to have all that on the sales price element. So let’s go there.

So for the sales price, the first thing we want to put is the dollar. That is the currency.

MetaBox pricing currency. And that currency, I’m going to wrap it with an HTML tag so that we can have something like this up here.

It’s going to be a superscript. So the HTML tag for a superscript is SUP.

Then I’m going to close it. Then we’re going to have that to be a superscript.

And then the next one we’re going to add is the sales price, MetaBox pricing, sales price. And the MetaBox pricing sales price, we want to wrap it with a span because we will need to target it.

And then the next one will be this one, which is the duration. Is it one time?

Is it per year? Is it one time?

Okay. Like the lifetime should be one time year.

Okay. So we’re going to have that duration.

And that is going to be, the way it is here is down. So it’s going to be a subscript and the tag, the HTML tag for subscript is sub.

And I’m going to close that. All right.

So if you can see, you can see how it looks here, we’re going to deal with that later. So let’s continue styling.

So the normal price here, I’m going to just take that off and that is just going to be our normal price. But you can see that the normal price we have worth, okay?

So it’s not just going to be normal price, it’s going to be worth than the normal price. No, that is wrong.

That is wrong. I’m not going to supposed to do that.

I’m going to cut this out. That is supposed to be the worth price.

The what price is going to be worth the normal price. Then the normal price is I’m going to put this.

I’m going to copy the whole of this and then put it. So it’s just going to be basically the same thing like this okay it’s just that when it is showing this worth it’s not going to show okay all right it’s going to be the same thing as how we wrote the sales price but this time around this time around we’re going to replace this you see this this sales price a dynamic tag we’re going to the normal price.

The normal price shows something is wrong there. My span is not properly close.

That’s why it’s showing up here. Okay.

So you can see this is worth 900 and this is the normal price. Then this, what was this?

The description. So let’s drop it in.

So, pricing, Metabox pricing description. Okay, so that description shouldn’t be, should it be there?

That description should, yeah, it should be there. Yeah, just right below the worth price.

Okay, let’s save this for now. The card wrapper is going to be an unordered list, so it’s going to be a UL.

We want this to be like a list of pricing. We want it to be an unordered list of pricing, so that card wrapper is going to be that.

On an ordered list, this is an ordered list, and then it’s going to introduce some default styling which we want to reset. So this is 40.

We’re going to take it back to 0, 0. Okay.

Let me turn off this. And then this is going to be an LI.

So the HTML tag is going to be an LI. And we should have a proper HTML structure for that list.

Let’s go ahead and start styling this. Anyway, I’m just going to save this and I would like to preview what it looks like on the front end so it doesn’t look really pretty.

I’m going to go to the card, not the card wrapper, the card. Then I’m going to make sure I have my class selected.

I want to go to style. I want to give it a border.

So let’s go down to border for that. It’s going to just be one pixel and we want it to be solid and I want to give it a base, a shade light, okay, so we have that border.

I’m going to move next to my featured info. I want to give it, let’s select that class, I want to give it a background of my primary color and I want the typography to be white.

I think I like it to be that and uppercase. Okay.

Centralized, centralized. Yep.

And I think I want to give it a padding. Let’s give it a padding.

Let’s go here. I want to give it a very small padding all around.

So the padding up is just a bit too much. I don’t want it to be too much.

I’m just going to say, dash, dash, space. Sorry, that is just messing up everything.

So let’s go back there. Turn this off.

So I’m just going to say, dash, dash, space, extra small. I want to multiply it by 0.

5, you know, to reduce it by half. Yeah, so I have that.

But now I want this to show only if it is featured. So I’m gonna select that.

Then I’ll go to condition, add a condition, dynamic data. And I want that dynamic data to be featured, the pricing, okay, featured.

So the featured, if the featured is equal to 1. I’m going to save that.

Let’s go to the front end and check. And then it’s only showing up if the featured is equal to 1.

But I want it to be on top of this. I don’t want it to be inside here.

So I’m going to be, so it’s going to be on top of the card. So we’re going to make the card position relative.

Let’s go down to position. It’s going to be relative.

And then I’m going to come to this feature and I’m going to make it position absolute. And the bottom is going to be 100%.

That means 100% across all the way to the top. So it moves 100% means it moves 100% the height of the parents.

So if I save this and we take a look at the front end, you’re going to see it’s going to move up there. Right, good.

So right now, we need to have this kind of. .

. Now, look at the way it looks right now on our own.

This, the bottom, we need to have that bottom move away. So what I’m going to do is that we’re going to select the card again, okay?

And we’re going to give it a margin bottom of, let’s say, L. So we give it a margin bottom of space L, but we don’t want that margin bottom to affect this one.

So, but then they already have that margin bottom and it’s affecting all of them. So what I’m going to do is that I’m going to go to the data attribute.

Now, we want to find a way to style this differently. I’m going to go to the data attribute.

I’m going to add data featured. So if it is featured, I want to give it a value of the featured under the pricing featured.

So this is going to return the value of the switch. I’m going to save this and then we’re going to go to the front end and open the inspector.

I want to inspect this card. Remember our pricing card.

Let’s see. Our pricing card.

Okay, yeah, it’s showing. So it’s showing the.

. .

So this is our pricing card. It’s showing the data featured one.

So this one is showing one and the others are showing zero. That means they are not featured.

So this is the attribute. We’re going to use the attribute selector to style that one separately.

So let’s go back in there. Still with the card selected, we’re going to go into the custom CSS and we’re going to use the attribute selector, which is a square bracket.

Inside there, we’re going to make we’re going to undo the margin bottom and we’re going to just make it 0. The data featured equal to 1 root so that is not going to have a margin bottom.

So let’s see. Alright so you see the other ones have a margin bottom but this one doesn’t have a margin bottom.

So we’re going to go with the inner wrap and start styling the inside. So the inner wrap, I just want to give it, let’s select that.

I just want to give it a padding of medium all around. Everything start looking well.

I’m going to go to content, I’m going to give it a row gap of contents gap and then I’m going to give it a flex screw of one so it fills up the parent. I’m going to save that.

Let’s see what is inside here. So we have a heading and we have the price wrap and then we have the description.

We want to move to the next set of information that is here. So I’m just going to drop in another block, set a block there.

This is going to be my features wrap. This is going to be my pricing card underscore feature features wrap.

And inside there I’m going to drop in another block. My image is blocking this.

At this point I need to take this image down a bit. So this feature strap is going to be like the wrappers to our features, the repeater that we’re going to have.

So here I’m going to just insert another block and this is going to be my features list. And that is going to be our loop item.

I’m just going to say pricing card features, feature list, not features. I’m just going to call that feature list.

So inside here, we’re going to have an icon. Okay.

I’m just going to drop in an icon and a basic text. And this is going to be the bullet.

Okay. Like bullet points.

And then this is going to be pricing card feature. Let’s go ahead and change the tag of this to paragraph.

I’m going to change the tag of the description to paragraph. Which other one?

These other ones, I’m going to change it to paragraph. Change this to paragraph.

Okay. Yeah, I think that may have altered something, those paragraph spacings.

I guess that is okay. When we start applying these tiles, they will all come in.

Yep. So, for here, I think for this one, I want it to be like this and as usual Bricks is delaying its thing and I want this to be, now it’s supposed to be at the center like that.

Can anyone understand this? This, this, okay?

So we’re going to have a gap here and that gap is going to be space XS. And then this is going to be a feature.

Now, before we do that, let’s go to the Features list. The Features list is going to be a loop item for the features, for the repeater.

And I’m going to come here and select MetaBox Feature Group. Okay, we’re getting there.

And then here, we’re going to have a feature, MetaBox pricing feature just the feature text. Not feature text.

The feature. Yeah, the feature of the feature group.

And everything should start listing up. Yeah, it’s listing out there.

And what’s the matter with our stuff? See, see what I said?

That thing wasn’t I knew something was wrong there. This is what it was supposed to be like.

Okay, I’m going to change this icon. We’re going to use that and C for check.

Yep, that. That gives us the check mark and the size.

I want to make it like 20. That should do, but I want it to be bold.

So I’m going to go to the typography and choose a font weight of say 700 and 700 should work fine. Now a features wrap is going to be a UL.

So I’m just going to write UL there and then the features list is going to be a LI. So I’m going to come here and change the tag to li.

Let’s go back to that ul and clear off that default styling from Brics. Usually, there’s some styling up and down here.

Let me just anticipate that and just take that off. Anyway, if it’s not showing, no problem.

Let’s go back again. It’s not showing.

Okay. So we have only one to take care of.

So we have a li here. Okay.

And then we have a UL. And then this wrap, we want to have some spacing, row gap.

So I’m going to give space X for all of them. And that’s things are starting to look good.

And then under the features in the inner wrap, I’m just going to drop in give it a class of pricing card BTN. That’s a call to action button and we’re going to put in our bottom text.

Let everything be dynamic. Everything can be changed there.

So right now what I’m going to do is, for the inner wrap I want to centralize everything and the problem is that this refuses to centralize. So let’s look at the front end.

Close this. So everything centralizes but this doesn’t because it is a block.

It’s 100% width. What is that?

This. So we’re going to change it to a Div is going to make the width auto.

As a result, it’s going to, if we check here, it’s going to move it to the center. That means we have lost our spacing.

So, we’re going to go back and display it as Flex and we’re going to get back our spacing. So, let’s see that.

And that should come back. Oh dear!

Bricks! Let’s change this to no wrap.

Wrap! Yeah!

And this to this. Yeah!

Yeah! No need for wrap if you’re putting it this way.

Right? Let’s see.

I hope Bricks doesn’t start some of his stuff. See!

Alright! Cool!

Everything is looking fine now. So, what we’re going to do is to make sure that these buttons, these other buttons are black background and this is the only one that will be highlighted.

So let’s go back. I’m going to select the button.

First of all, we want to make the width kind of like full width, like 100% per se. So this width is going to work, you know, having a 100% like that because it’s going to be overridden by, you know, the bricks.

So what do we do? So let’s go to the front end and check why it is not a 100%.

So you can see that we have with a 100% here, but we have other stuff here that, you know, making it difficult. this button, this is span and all that.

First of all, let’s make it a button like by putting that URL. Okay.

So we have a button here and we want it to link to the dynamic data which is a link, a pricing link. All right.

So let’s save that. And what do you know?

I think that fixed everything. Good.

So I’m applying that style to the bottom link. Okay.

It helped it work. Yeah.

So right now we want this to be black while this one should be this other color. We want the color to be different.

So what I’m going to do is, I’m going to select this button and we want to change the background to black. Okay, black.

And for some reason, it’s not working. For some reason, and if I do it on the ID, it doesn’t work either.

So I’m just going to remove that. So let’s save that and check the front end, see what is going on with the button, why the color is not changing.

I’m going to select this and you can see I have a background of black here, but this is overriding it. So I think I might need to enforce this by using BricksButton.

mySelector, BricksBackgroundPrimary. All right, so that’s what I want to do.

I’m going to remove this from here and then I’m going to go to the custom CSS. I’m just going to say Brics-Button.

It’s a root. brics-button.

I’m going to make it a background color, black. Did I get that selector right?

Bricks-button. So if I copy this selector and add it to the list of them, just see if I can change this to make it work.

It still doesn’t work. Okay.

Let’s try adding importance and see what the problem is. Okay, so you can see it works here.

So it has a very strong override. I mean, putting importance works.

So if you’re going to put importance, then it just negates the whole selectors here. And let me just make the color white.

and that you also have to put importance now while I was walking I didn’t have to, in my own case it had to be the reverse my black was my own color so what I’m going to do is I’m just going to go into bricks and then I’m going to change my primary, my main color, okay? Sorry, my bottom color to the primary color to black, okay?

And then I want to change my typography to white. So I have that.

Now, what I want is, I want my action color to be this one. Okay?

So I’m going to select the button and then I’m just going to write data. Let’s go to the class.

Let’s go to this. Let’s go to the card.

Okay? And I’m just going to select this.

Come to the button, put there, and I’m going to give a space here, a background color of action. Okay.

It’s not working. First of all, to ensure that the problem is not what I’m typing, let’s just put that important.

All right. So my CSS is correct.

So let’s see if we add. brxe-bottom.

If it’s going to work. It’s still not working.

That is a strong override. What if I add that.

brx-bottom. Oh yeah!

That is strong enough to override it without the need to add importance. And then I’m going to change the color to black.

Alright and we need to deal with the hover. This one doesn’t have a problem with hover.

On hover we want the color to be white. On hover we want it to be action hover and we want the color to be, to remain black.

So this should be dot hover. Okay.

So that should be it. So no need to re-declare the color because it’s the same color.

So instead of using that action color, I’m just going to use my primary color here and this color will be white. Okay, so it’s going to be the same as up here.

Let’s go ahead and style this one, the C chart. Let’s go to the card.

So we add a margin bottom at zero. Let’s look at it, how it looks.

So here everything looks normal, no problem. But the buttons, the buttons are just hanging.

So let’s just fix that. Just all I need to do is to give the button a margin top of auto.

That fixes it. Now let’s go to the card and time to style the card.

Okay I’m going to give it a border of 4 pixel solid. The color is going to be primary and I don’t want it to have a border top because I you know I want you have the border top this one this ones are not going to align with it properly so I could just just remove that border top.

You know, it’s going to say zero. So I don’t want it to have a border top.

And I want to give it a box shadow. I want to give it a box shadow of Trans, maybe 80.

Okay. How about 50?

Lighter. Good.

Alright, let’s look at the front end. Okay.

Now, this was positioned absolute and you can see that this one has a border. This is not aligning.

Now if I go back to that feature, this. Let’s select this.

Featured info. What I can do to it is go to Roots.

If I give it a border, let’s say border, and we give the same border of 4 pixels. Solid.

Let’s say black for example. If you notice that it’s still not coming out because the border box is, the box sizing is border box.

So yeah, if I’m correct. So that is not going to work because it’s absolutely positioned.

We need to extend it out. of 4 pixels.

Not 4, negative. Negative 4 pixels.

That should work. So it’s going to be inset.

Okay, beautiful. So if I save it and let’s look.

It looks like it’s going to give it a max width. I’m just going to unset the max width.

Yep, that works. and style this.

So how do we style this? All right, so let’s go back to that price wrap.

The price wrap, we want to select this, make sure that we put this at the center. That is why you group these things like that, so you could control them.

And I’m going to open this up. First, the sales price.

I’m going to select the style, go to custom CSS. So I’m going to say roots, so it’s targeting the span, which is the main price inside.

I’m going to give it a font size of text. I want it to be that big.

I want the font weight to be bold. Then I’m going to go down and I want to target the subscript and the superscript.

So I’m going to just say ease and close. I’m going to say sub super.

And what I want to target there is the font size also which is going to be text, dash dash dash text L and I want the text transform to be lower case. Alright, something, it should be slash.

So let’s go down there, the content, the currency, the subscript should be slash. Okay.

like we have here. And then what else are we going to style here?

So we want this superscript to have a light shade, a light color. So I’m just going to say root super, I’m going to do is I’m just going to quickly jump to ACSS dashboard and just adjust that shade.

So we have a light, so we want our light to be 80. Let me just make it 75.

We’re going to see on the front end, let’s save this again and the front end, you should see, okay, it shows up a little bit more, which is beta. Okay, so I have that nicely styled.

So the style, the second one, normal price. Actually, select that.

It’s basically going to have the same style as this. So first of all, let me just go into the content and add that slash.

So it’s basically going to have exactly the same style as this. So what would we do?

We have the option of just copying this. The easy thing would be to just copy this and paste.

We have that. But if we don’t want to repeat the CSS, then we have to find another way to do this.

So the way to do this would be to just put all of this and target both classes. So I’m going to delete that and then I’m going to take this, I’m going to move this all the way up to the parent.

Okay, I’m removing that. It’s not updating.

I’m going to move that all the way to the card and I want to target it from the parent. Now, that is not what I want.

Okay. So, I need this sales price.

Copy that. Come here.

I want to comment that. Pricing card.

This pricing card. Okay.

I’m going to copy this. I’m going to put a comma there.

That is sales price. This is going to be normal price.

Okay. Okay.

So we have that updated there. I’ll copy that.

I’ll come here. I’ll copy that.

I mean there are other complicated ways of writing the CSS without having to do it like this, but I just want to do it like this. Normal.

Okay. And this also, copy that, normal.

And then for the worth, for the worth price, it’s still the same, basically the same thing to this, to the sub. Okay, the sub because the what price has, you know, the what price is supposed to have a superscript and subscript also.

Okay, so I’m just going to come here and and copy the normal price and take it to the worth price. Yeah, that’s how it’s supposed to be.

Okay, so that’s how it’s supposed to be. Okay, so let’s go back to the pricing card and then target the worth price.

Also do that and change this to worth. But I’m not seeing this change to lowercase.

Okay, double this. Okay, so everything should work now.

Let’s see. Alright, but this one is not working.

This is the normal price. For some reason, I didn’t change this to normal.

I thought I did. Okay.

All right. So it’s working now.

So we have to do the same thing. We need to make this text a year here, a bit smaller.

Okay. So for this, I’m just going to say pricing card pricing card worth.

Okay. What price?

SUP. Sub.

Okay. Not SUP.

We’re going to give it a font size of text, text M. And yeah, so that just makes the text size the same.

So we save that. Let’s look at what we’re referencing this.

So you see this one is light, you know, all true. So the year is supposed to be light also.

Year, the worth is supposed to be light. So we’re going to make this the pricing card, just the pricing card, worth price, is going to have the color, the whole of it is going to have that color.

Okay. And here, I think what we’re supposed to make, you know, this is supposed to be the sub, not the sub.

Yep. It shouldn’t be the superscript.

It should be the That’s how it’s supposed to be per year. And boom!

Okay, that’s good. Now, we don’t want this to show when it is on discounts.

So, we’re going to select the normal. First of all, we don’t want the sales price to show when it’s on discounts.

We don’t want a normal price to show when it is on discounts. Okay?

So, we’re all going to have conditions for the three of them. So the first one is the sales price.

We’re going to go to conditions and then we’re going to put dynamic data. is not equal to zero, that means if it is on sale, then show it.

And this one, we’re going to do the same as this. Unfortunately, we can’t copy conditions in Brics so I’m going to have to write it out again.

Sell, MetaBox, MetaBox pricing is not equal to zero. I’m going to save this and let’s see the front end.

Boom! So, this shows, if you go in and toggle, that shows.

So, a primary color is not very, very bright and different. So, I might just go back here and just slightly make it more interesting.

Something like that. Okay.

Save that. And it just looks a little bit better.

Okay, save that and I just want it to be a bit more interesting, that’s all. Erase that, yeah, something more interesting like that.

Oh, unfortunately, this is atrocious. Okay, let’s not worry about that.

So let’s look at this now, how to make this bold. Okay.

So I’m going to come here and select the inner wrap. Also this feature wrap and I think I want to put a border top.

Border top 1. Save it.

The color will be this same color, shade light. Let’s give it a padding top of, let’s say L.

Just separate it, or maybe M. Okay.

Let’s just separate that. So we’re going to go to the features list, okay?

Now we’re going to give it two attributes, one for bold and one for highlight. So let’s go all the way to the end.

the emphasize, okay, the feature group emphasize. I’m going to add another one, data highlight, and this one is going to be highlight, MB pricing feature group highlight, okay, and we’re going to save that.

If we go to the front end and check. So if I come here, you’re going to see that this one has a data highlighter 111.

Data Bold. Data Bold.

No, nothing is there. Nothing is there.

Nothing is there. Data Highlight.

Let’s check this. Data Bold.

Data Highlight. So, this is all ProExtensions is supposed to be highlighted.

Oh, yeah, this 12 ProExtensions is supposed to be highlighted, this basic bundle. See, data highlight one.

So let’s go back to a builder. I’m going to go to the custom CSS.

I’m going to use the attribute selector. I’m going to say data bold, qual to one, root.

Roots. We’re going to set the font-weight.

So if the data-bold is 1, meaning it’s facility-emphasized, we’re going to set the font-weight to 700 or 800 maybe. Oh, it’s already lighting up.

Okay, it’s bold now. I’m going to do the same thing with data highlight equal to one root and then we’re going to set the color to primary so we’re going to go ahead and check it out the front end and see what it looks like.

Okay, so we see this highlights up and all the ones that we checked to be emphasized, they are all emphasized. Now let’s fix this button.

We don’t want that highlight to be like that. Okay, so I’m going to select the button, go to the CSS.

The hover is supposed to be, let’s just change that to primary hover. Okay.

Change that and let’s see. Okay.

So that fixes it. So it’s already taking shape.

So what is left here is the order. So we want the basic to be the first one.

We want the lifetime bundles to be the last one. We want to set it up here.

I’m going to go to a use meta numeric value. And then I’m going to choose ascending.

Okay, so that’s switched. So we have this number one and these are the last.

So if I save that, you see this basic bundle comes all the way here. So let’s go back and do just one last thing and then look at the responsive.

So the buttons here are supposed to be the primary color, which we haven’t. I’m just going to choose primary.

I mean, we haven’t refreshed our builder since we changed something in ACSS, but it should update here as the correct primary color. So I think that’s basically all, and we are going to go in and take care of the responsive.

So here, I want to start stacking this, you know that. But at that point, I don’t want it to be that wide, so I’m going to limit the width.

I mean from this break point, I don’t want it to be all the way wide. I’m going to give it a maximum Maybe 350, just maximum width.

Sorry, that is width. I’m going to put that in the maximum width.

Right? This is the grid and we want to move this to the center like that.

No, that is not it. This, okay.

So even at that screen size, just because we want it to start vertically at this screen size doesn’t mean that we want it to span all the way. So we don’t want our card to be wider than 350 on any screen size.

Or I could just make it 480. That should be something like that.

So maximum and then it would be that. And we have to give it some spacing.

Okay, let’s come here and we’re going to give it some gap of grid gap. And remember we had some margin bottom going on here on this card.

So we’re going to just take that to zero. And let’s see how it looks at the front end.

We shouldn’t be having, you know, shouldn’t be looking like that. So, let’s see.

And I want to just use responsive mode. Okay.

So, we have a gap here and we do not have a gap here because of this. So, for this one, I’m just going to give this a margin top equal to the content gap at that breakpoint.

And so it was going to be the customs. Let’s go back to the custom CSS of the higher breakpoint.

And this was going to be the featured. Okay.

I’ll take that and I could write a media query so I could just say, add media Max width 767 pixels and then I could just copy this. Our margin top is going to be grid gap.

Yep. If I save that and go to the front end, that should sort this out.

Nope, it did not. Okay, so I didn’t close this, right?

That should be the reason. Save that, go again to the front end, let’s see.

Okay, so we have that gap. The problem here is that we have, this is an absolutely position element.

So, typically, if you really want to dial it in. So you would check the height of this which is about 24 pixels.

Okay and the gap is the gap is yeah the gap is about right. But this also has a padding of a total of 10, okay, like 11.

So if we add that, we want to have something like the kind of padding we have here which is like the extra small, you know. So I mean if you really want to dial it in, you would just use a We’ve got plus, let’s say, space, extra small, times 0.

5, because that’s what we used there. This should be.

. .

we should do something like that. Like this.

This covers this. This, this.

This should be outside here. Sometimes it doesn’t get it right all the time.

And then this should have this should have this and this. Okay, so this plus the whole of this.

I save that, I should get a better result. Okay, so the result we get is similar.

So that’s about it for the responsive mode. So right now, we’re going to test what we just did.

So I’m going to refresh this build as I’m leaving it. So here, let’s refresh this also.

So the lifetime bundle, we have this. We want to increase the price of our lifetime bundle and then I’m going to say it’s not on sale anymore, no longer on sale.

That’s all I need to click, no longer on sale. Then let’s go to the front end and refresh and our lifetime bundle is no longer on sale.

Powerful. Alright, or you say if we want to highlight something here that is not here, maybe this all solutions.

So we just go back there and say just highlight all solutions. Highlight it, come here, refresh.

All solutions is highlighted. Get the gist.

So, and they say, okay, why don’t you move all the solutions to maybe after unlimited site, go back, all solutions, move it, move it down here. Oh, sorry.

All right. Yep, there.

It comes under unlimited site. Then you refresh.

Boom. Everything is controlled dynamically and you decide that okay now I want this lifetime bundle to be the featured.

Yep, we got you covered. This is now going to be the featured.

Then we want it to be at the number 2. Let’s save that.

Then we’re going to go out. The one that was featured which was the ultimate bundle.

We’re going to turn it off because if we don’t turn it off, of course, you have to turn it off. It’s going to be two of them are going to be featured.

So let’s this one, we’re going to turn this one off. Okay.

But we didn’t change the order. So we need to change that order.

So yeah, I mean, this is order two and the other one has to be order 3. The ultimate bundle should change to order 3.

Alright, so you can see you change all that right inside the Gutenberg editor without having to touch bricks. This one is one time, this one is per year, this one is per year.

You could change all this. Worth, worth and all that.

All right, all this could use a little bit more styling. I guess I must have left something out.

This shouldn’t be this big and all. So all you could just go in and just style the super of this.

The super of WOT. So we’re going to go to the card and we have the WOT WOT, WOT, WOT, WOT.

So this should be both the WOT and this. I think I should make this let me make this super and see what happens.

Okay, so I’m going to make it both of them. Okay, so I’m just going to say is super and sub.

Okay, and that should deal with both of them. And if I go to the front end, yeah, so that works.

So what if we want to use a different method to sort this? So we could go in here, go to the query loop and we change all this and we can use a many order for this.

here, remove all these orders. So lifetime, let me just open all of them.

Remove the order here. I’m going to remove the order here, remove the order here.

And I’m going to install that. We’re going to activate it.

We’re going to go to the settings page and we’re going to set it to our drag and drop. We’re going to set it to our pricing.

Yep. And that’s basically all we need to do for now.

And we’re going to save these settings. And when we go back to pricing, we should have the ability to drag and drop.

So right now, at the front end, we refresh. See the Lifetime Bundle is right here.

Okay. So we want to move it to the center.

So let’s do that. Lifetime Bundle, move it to the center.

That’s all. You don’t even click save.

Okay. And then let’s go back to the front end and refresh.

The Lifetime Bundle has come to the center. You see, powerful.

If we want this to swap this, and this comes here, this comes Let’s go back to the backend, move the basic to the first, move the ultimate bundle is supposed to be the last. So the basic is now the first, ultimate bundle the last.

So basic will be the first, ultimate bundle the last. I refresh that.

So you could use that plugin. I highly recommend that you can use the custom field to order it.

But personally, I would go for this because it’s faster and easier to order these things around.

All right, so that brings an end to today’s tutorial. If you learned something from this tutorial, I would like you to comment below in the comment section.

If you have any question, if you know of a better way this could have been done, any suggestion that could have made this better, I would like you to put it in the comment section and I’ll do my best to answer any questions that you have. suggestion that could have made this better, I would like you to put it in the comment section and I’ll do my best to answer any questions that you have.

Until next time, have a great day. Bye.