Getting Started With WooCommerce in Bricks

1 0:00:00 Hello everyone.

Welcome back to another session in the Inner Circle. Today we’re going to be taking a look at the basics of WooCommerce in BricsBuilder. It’s basically called Getting Started with WooCommerce in BricsBuilder.

This is going to focus on BricsBuilder WooCommerce features, the capabilities of WooCommerce in BricsBuilder. That means I’m not going to cover WooCommerce, WordPress, as it were, like setting up products and all. I might give you a tip, just show you how I did some things but I’m not going to go deep into that.

This is not a WordPress WooCommerce tutorial. This is Bricks WooCommerce tutorial. So I will not go into the WooCommerce settings in WordPress.

I’m not going to go into all the little nitty-gritty details of how to set up a WooCommerce in WordPress but I’m going to show you how to design a WooCommerce website in BricsBuilder. So we’re going to cover the Brics WooCommerce settings and then we’re going to build a home page for our WooCommerce store. A lot of times when people are doing WooCommerce tutorial, they forget the home page.

The home page is a very important part of the WooCommerce build because in the homepage, you might have things that you don’t have in the category page or in the archive, the shop archive or in the single product page. A lot of times in tutorials, people overlook building the WooCommerce homepage. The reason I want to build a WooCommerce homepage is I want to show how to do certain things.

There are some things you want to put on your homepage in a WooCommerce store and mostly it has to do with maybe the category grid where you show the different categories and then you show maybe your featured image and now I’m going to do just about three sections and that three section is going to give you an idea of how to do other things if you wanted to do other things. I also want you to note that this tutorial deals with the fundamentals of WooCommerce in BricsCAD so it’s not an advanced level tutorial even though you’re going to learn things that you feel are pretty advanced. After building the WooCommerce homepage, we’re going to build the WooCommerce shop page.

That is the product archive page. And as a result, we’re going to take a look at the WooCommerce theme styles in Brics and that deals with how to set up your WooCommerce style in BricsBuilder. It’s not extensive but it just basically deals with setting up how the buttons look, setting up how the notices look like.

And then we’re going to introduce dynamic WooTags for BricksBuilder. So BricksBuilder has what you call dynamic tags for WooCommerce and that is going to enable you to build out different components in your WooCommerce store. When we get to building the cart page, even when we’re building from the very beginning of the homepage, you’re going to see us use this dynamic tag for WooCommerce.

Then I’m going to show you how to build the badges like the discount percentage, the sales badge, that is the discount percentage. I’m also going to deal with the out of stock badge. So if a product is out of stock, we’re going to see how we’re going to put that badge out of stock in the product loop.

Moving on from there, we’re going to build the single product template that deals with the single product page. We’re going to customize it and make it bespoke. We’re just not going to have the default feel.

We just want to do something different, something customized to show you the possibility of how you can customize your WooCommerce single product page to look different from the regular vanilla look. Once we’re done with that, we’re going to deal with the other template which is the card templates, the checkout template. We’re going from there to show you how you can make these templates, the card look different, the checkout looks different.

We’re going to show you how to make your Thank You page look different and a few other things you’re going to pick up on the way. So I have here my WooCommerce product setup. I have six products here.

They’re all phones and some of them are out of stock, some of them are in stock. Some of them have these percentage discounts, sales price, some of them are on sales, that’s what I should say. A couple of them have stock management like I think this Samsung, if I go to Quikrdeed, nope, Samsung doesn’t have.

I think the LG has stock management. So we have stock quantity, three here. So that means there is stock management, you see in stock three.

This one doesn’t have stock management, just in stock. So all these are going to come into play when we are building the WooCommerce site. I’ve also set up my WooCommerce categories here.

Setting up categories is pretty elementary but what I’ve done is I’ve added pictures to it. When you’re setting up your categories, you just put the name and then you add the picture and basically that’s it. And then I’ve set up my attribute that I’m going to use for my product variations.

The attribute are basically things like the color, the disk space, and the operating system, the RAM and the size. And then once you set up your attribute, what you want to go in to do is to go in and configure them like the color. I’ve gone in to add the different sizes of RAM.

That is all about setting up my products. And then we’re going to go into the Bricks settings. The Bricks setting has a WooCommerce settings here.

There is option here in the miscellaneous, you have Disable WooCommerce Builder and you have Enable WooCommerce Notices element. Now what are WooCommerce notices? When you add a product to the cart, you have a message that shows you your product has been added to cart.

That is a notice. Now if you go ahead to enable Brics WooCommerce notice, the default notice is going to be disabled. That means for wherever you want the notice to display, you’re going to have to manually add those notices using the Brics notices element.

Okay. Now, it’s called the notice element, not notices. All right.

So now I’ll recommend not doing this except you have a definite reason, a real reason you want to disable the default WooCommerce notice. Yep, we don’t also want to disable the WooCommerce builder because we want to build a WooCommerce page. And then the product sales badge, now we’re going to choose how we want to show it.

Do you want to show it none? Now so we have here a default WooCommerce page. Now this is a default WooCommerce shop.

So when you install Brics and you open the shop page, of course when you install Brics and WooCommerce and then you open the shop page, this is what you’re going to see. Now I want to mention that this installation is powered by automatic CSS so the styling might look different. Now when you set the product badge to display as percentage, this is what you’re going to see on any product that is on sale.

So you’re going to see this but if you want it to be text, so let’s see how that looks. So it’s going to show sale, okay? It’s not going to show the percentage and then if you select none, that means what you’re going to have is none.

You’re not going to see any sales badge. But what I always love is the percentage because it gives the user an idea of how much they are going to be saving. So it’s just perfect.

It just makes sense. And then the new product badge is to show how many days. If a product is less than how many days, when do you want the product to show the new badge?

Now let me refresh this. So right now, none of these products is showing the new badge. But if I say I want my product to show the new badge, that means it’s a newly added product if it is less than 1,000 days.

Now the reason I’m using 1,000 days is these products I have here are imported products so I created them a while back so the published date is over a year. So I just want to put this and then I’m going to save this. Now for those products that are less than 1,000 days old, you can see that the new batch shows.

Now I want to point that this new batch only shows in the default WooCommerce shop page. If you’re using a loop builder, this is not going to show. None of this batch is going to show when you’re using a loop builder.

For you to show it in a loop builder, there are elements in Brics that you’re going to use to show maybe the percentage but there’s no element for new. If you want to do that, perhaps maybe you could just use a custom function. I’m not sure we’re going to cover the new.

So like I said, this deals with the fundamental. It should be very easy to do it and I’m going to see what I can do to make that happen. So I’m going to leave it there and I’m just going to leave it there for now because if I’m going to do it, then I would like it to show up in the front end.

Now for the single products, the gallery, disable product gallery, zoom. Now what that means is let’s select one product. Now so you see if I go ahead to refresh, I don’t have that ability to zoom.

You can see now, let me show you the difference. 2 0:09:28

Let me refresh. 1 0:09:30

You can see this. Now, a lot of times if the image is big enough, you see this icon here? If I disable that, you’re not going to have that icon and the cursor is not turning to a magnifying glass.

But you can still have your light box. But then if you don’t want the light box, you can go ahead and disable the light box and then you’re not going to have the light box. So no more light box.

If I click here, it just opens the image in a new tab, like loads the image. And then you can also enable AJAX Add to Cart. I think I would not want to do that.

Now the reason I don’t want to do that is if I go back to my shop page, let’s go back to the shop page, refresh that. Now if I add to cart and then I go and view cart, nothing happens. Let’s click on this image.

Nothing also happens. If I add to cart, okay, you see this shows my product has been added to cart. See, no notice.

Now if I turn on Enable AJAX Add to Cart and then let’s go back. Now if I add to cart, you see it doesn’t show that notice. So if you turn on AJAX, it just shows you Review Cart.

It doesn’t show that notice. Now I want the notice to show but this is a preference. So I’m going to turn off all of these.

It’s a matter of preference, whichever one you want. I’m going to turn those ones off so that when I refresh this and then I add a card, it’s going to show me that notice because it refreshes to show me the message. So that’s the kind of things you should bear in mind.

All right. So that is all for the WooCommerce setting here. So what I’m going to do is to go ahead and build a homepage.

So I have a homepage set up. I’m going to open my homepage in Brics. So what I want to do is to build a homepage that has the hero section and is going to have the category loop and is going to have featured products listed on the homepage.

So that’s what I’m going to do now. So the first thing is to add a section as usual and I want to give that section a background. Now I want you to note that sometimes I might skip a couple of best practices not on purpose but sometimes because I just want to be fast, okay?

So as much as I can, I’m going to try as much as possible to do things the right way. But if I, for any reason, skip it, please understand that I really need to move as fast as possible because a tutorial like this can get really long and I don’t want it to get too long. So I’m going to select this as the background image and then I’m going to go here.

I want this to be center, center and then that I want it to be no repeat and then I’m going to go to the overlay and then I’m going to apply to the overlay. I want to add a gradient that moves from white to transparent. I’m going to select a white color here and then I’m going to add another one.

I’m going to select a transparent color. I’m going to set the angle to 90 degree and then it moves there. But I want this white color to move up to 40% to this side and then I want to give this just a little bit of transparency.

Okay, so I have that. I’m going to go ahead and add a heading. Now, let me unpin these elements because I’m not going to be using them here.

All right. Okay, so I’m going to go ahead and add a section. Sorry, I did add a section.

What’s wrong? What I wanted to do was to add a heading. I’m going to add a basic text.

I’m going to add a button. It appears I didn’t add that heading. Is there any reason?

Okay, I pinned it instead. I’ll let it be there. So my heading is going to be the H1.

I’m going to go in here and set it to H1 and then I’m just going to copy a text somewhere here and paste here. Here I’m going to copy a text and paste here. This container I’m going to set the row gap to content gap and then for this button, I want this to be a maximum.

I want to give it a maximum width. I want to have this, sorry, the heading, a maximum width. The maximum width is going to be like 640 pixel and then for this, we’re going to have this to be like 560 pixels.

Now you could use CH to do that but I just want to use pixel. For the button, I’m not going to do anything with it. I’m just going to leave the button as it is.

Maybe I’m just going to go ahead and just make it a circle around it. That’s all. So I think that’s basically all for that.

The picture here looks a little bit blurry. So when you are adding a background, always remember to set your background to full if that is what you intend. Now it’s clearer.

So I’m going to check this on the front end and it looks good. So I want it to have a minimum height. So that section is going to have a minimum height of, I want to make it a minimum height of let’s say 65 VH, VH not W.

Alright, I think 60 should do. Alright, I’m giving it a minimum height of 60 and then for this container, I want it to center align like that. So I’m just going to move it like that to the center.

So I’m done with that. I’m going to go ahead and add another section. Here I want to add my category loop.

So inside here I’m going to add a block so let’s just put a block there and then that block is going to be my category loop. It’s going to be my category loop container or wrapper. Okay, so inside here, I’m going to insert a block.

That block is going to be my category card. Okay, so what we want to do here is right here, I want to add a heading and that heading and H2 and I’m going to say call that categories, change it to H2. These let’s change this to the P tag, that’s the paragraph.

And so we have these and these. So I’m going to set the row gap to be contents gap. And here I want to change this category card to a loop.

All right. So I’m going to use query loop and I want to query the term because it’s going to be category. And then for the taxonomy, I want to choose product category.

So not product type. Let’s look for product category. Where is it?

Product category. Yeah, that is it. Okay.

So we have that and I want it to be a four column grid. So I’m going to select the parent. I’m going to display it as grid and then I’m going to use ACSS grid 4 for it and that gives me the grid 4 and then I give it a grid gap.

Okay. I’m going to turn off this overlay. I don’t need it.

Then here I’m going to insert two blocks. Now when you insert it in that manner, it’s going to automatically set this to display flex and change this flex direction. So I don’t want to enforce that.

But then I want this to be like this. So I want it to be like that. So this is going to be my image wrap and then this is going to be my content wrap.

Now for the image wrap, I’m going to insert an image and that is going to be my category image and then I’m going to just say image, so product category image. I’m going to set that there. Now that is the reason we added these images in the product category.

So if you come down to product categories, this is the reason we added this image. Without that, you’re not going to have these images. So they’re showing up right now.

The content, I’m just going to add maybe a heading and that is going to be an H3. And that is going to be the term name. That’s the category name.

So I’m just going to write term name, put it there. Okay, now I want that term name to link. Now for this content wrap, I want everything to be centered.

So I’m going to center this and I also want the text to be centered. So I’m going to go to typography and center it. Now notice that I’m already styling it with the ID which I’m not supposed to do.

So what I’m going to do card, card, card. What is that? Okay.

Let me just make it full category card. And then this is going to be my category card. Let me just copy that.

Image, wrap. Okay. And this is going to be my category card image and then this is going to be my category card content wrap and this is going to be my category card title alright so we have that so for the category card I’ve already I’ve already styled it on the ID okay I think so what I’m going to do is that I’m going to select that and copy the style, copy style from the ID and paste it on the class and then I’m going to reset the ID styles.

So the styles are now on the ID. So I’ve set that up and I want to give it a gap of let’s say 0. 6 rem, maybe 1 rem.

I’m not sure. Okay, so that’s it. Now for this heading, I want to link it.

I want to link this. I want this to link. Now, let’s look at the front end.

Okay. So, we have this here, but I want this to link to the category archive page. But before I do that, I want to select my section and just give it sort of a background, you know, something like that.

Okay. Okay, so now I can select my category card and just make the background white. And then in the category content wrap, I’m going to give that padding.

So I’m just going to give padding all around. This M, all around. So I have that but it doesn’t feel alright to have that.

Now, these images, they are somehow, all these whites are from the image. So it’s kind of tricky. Now, so you can see I don’t have any padding there.

So to give the image itself a margin top. Now the reason – I’m going to tell you why I’m going to give it a margin top as we go along. Now normally I would give this a padding top, okay?

So I’m going to give it the margin top the same as space M, okay? So we have that and I’m going to select that card and give it a border radius. Okay, so let’s go to border, border, radius, M.

Okay, so we have radius M there and that is all for that. If I refresh this, it should take effect on the others. All right.

Now, what I want to do is to link this to the archive URL. Now, so if you select that, you can link it in two ways. One way you can link it is to do dynamic data and then you say term archive here, term URL.

Now if you save that and then you click on, you see, click that is going to take you to the Android archive, category archive, featured category archive. But another way of doing that and a simpler way is just to put a colon there and write link. That is going to do the same thing and then it’s still going to link the way we have linked it.

Now I want all the cards all to be clickable so I’m going to put this clickable parent from ACSS. Clickable parent allows you to click the whole card based on the link in the card. So for it to work, you’re going to choose the parent that you want to be clickable.

Now if I select this as the clickable parent and set it to position relative, the whole of this space is going to be clickable. But that’s not what I want. What I want is for the whole card.

So I’m going to select the whole category card and set the position to relative. So I set that position to relative. So the clickable parent should be relative to the category card.

So if I save this and then go back to the front end, you can see that I can click the whole of the card which is what we want. One more thing, semantically, this heading is supposed to be at the top and then I’m going to take this image wrap and just put an order, okay? Save for order and write negative one.

Let it move on top. So semantically, the content comes first, the heading comes first and then you have the image. And that image could have a tag of figure and other things can follow but I don’t want to go in the margin at the top.

I’m not quite sure why we lost that because of the figure. That is why, I guess, it’s not affecting it. So we’re going to use for this one, we’re just going to use that padding top there for the image.

I guess that’s what we should have done. Now, so we have created a category agreed. So if someone comes to the shop, now you notice that we lost the clickable on the image itself.

So I’m going to go into the heading, the content wrap and set a higher Z index. So I’m going to put a Z index of one there. Because of that order swap, the stacking context changed.

So that is why we had to put it as high as the index. In some cases, you might not want to do that. But for this case, that is okay.

So that’s all for that. And then we’re going to create another section. And that section, we’re going to have a featured.

So this is a category. And this is going to be a featured section. In that featured section, what I’m going to do is since I’ve already built this, I’m going to just copy this category loop structure.

But why would I want to do that? That means I’m going to change the class names. So let’s do this.

So I’m going to have the same structure. I’m going to have a block which is going to say product loop wrapper, okay? Product loop wrapper because the featured image is that product.

And then I’m going to insert a block there which is going to be my product card. Yep. And then I’m going to insert two blocks there also.

So I think my picture is covering this. So I’m just going to move it out. So yeah, let it stay small like that for the remaining part.

I don’t want to cover anything. Okay. Okay.

So I am going to insert a block. This one is going to be my content wrap. I’m going to duplicate that and this is going to be my image wrap.

I’m going to drop in an image there and then let’s go ahead and query this. This is the product card and we’re going to use a query loop on it and we’re going to query POS products. The image is going to be the featured image.

That is the featured image for this. For my content, before that I’m just going to go ahead and set this product image wrapper to grid. display grid and I’m going to use grid 3 for this one.

And then it’s going to hit to show all the products. I don’t want it to show all the products because I want it to be featured products. There’s a smelly mistake here.

I don’t mind. So, we’re going to go back to the loop and we’re going to go here to attempt to include featured product. So we only want to include the featured product.

Okay. And for the product card, for the image, we’re also going to go and give it an order of negative one. So move that to the top.

Then for this image wrap, we’re going to put a heading and that’s going to still be the H3 and it’s going to be the post title, which is the product title. I want to style this. So this is my product card and this is going to be my product card content.

These kind of things is very tedious, naming the style. So, product card title and this is going to be my product card image wrap. I already have some styles on the ID there which I’m going to copy and paste here.

I’m then going to remove the styles from the ID. I think that was our order. Okay, image wrap.

Was it? Yep. Okay.

So, that was the order property. Okay. So, for the content wrap, I’m going to go ahead and centralize this and then go to the typography and make a center.

For this, I want the size to be text M. For this, I think I’ll also like this to be text M. Text M looks a little bit too big, so text large should do it.

The same with this, text large. So that’s the style I want to use for there and save it. Now if you want to link it, the same way we link this, we’re going to put.

link here. Okay. And save it and if you check it out, it’s going to link to the page.

Okay. So we still want it to be clickable parent and so I’m going to add a clickable parent and I want this to be relative to the product card. So I’m going to set the product card position to relative.

And because we swapped that order, it’s probably going to mess up with. . .

So in this case, it did not mess up. Okay. Image content.

That is because that is how we started. Right? Oh, okay.

I’m not quite sure why but in this case it didn’t mess up with that. The image did not mess up with the stacking context. And so, yep, that, that, and I’m going to give it a row gap of content gap.

Okay, that should be fine. So right now we have a featured image and what I should do there is just to come here and drop a heading and that heading should be the H2 and then I’m going to just say, That is it. So we have built our homepage.

That is all we have for the homepage. We have the hero section, we have the top category sections, and we have the featured images. Now this gives you an idea of how you can query things for this sort of stuff on your homepage.

Now we’re going to go in to build the archive page. If you go to the shop page, this is how the shop looks like by default. Like I said, it’s powered by ACSS so the styling might differ.

The typography, I’ve gone ahead to set my custom typography and all that. So your typography might differ, your color scheme might differ, but generally this is the structure. 3

0:31:51 This is how it looks. 1

0:31:52 But what we’re going to do is we’re going to build something more bespoke, something much better than this, and we’re going to use the query loop. So what I want to do now is to go into the template and then create a new template.

I want to create my shop archive and then, yep, shop archive. And then I want to choose, what you choose is product archive as the template type and click create. Once you click it, you’re going to see it here and then I’m going to click to edit but I want to hold Ctrl, click so it opens in a new tab because there are things I would like to copy from here down here.

So right here, I have my shop archive. So what I’m going to do is I want to go ahead and copy this section to this archive page and get rid of all of this. As a matter of fact, I shouldn’t do that but since I’ve already copied it, I’m just going to change this to a Div and I’m going to remove the minimum height.

Then I’m going to go back to the background settings, the gradient overlay and I don’t need this type of gradient. I need just one color and that color I want it to be a shade, something like that. Okay, so that’s it.

And inside here, now notice I didn’t want this to be a section. I wanted it to be like a regular div, okay? So this is just a div because I’ve changed it to a div here.

And I want to add a title there. And that title, now as soon as I added that title, you can see that we no longer have those spaces that you saw. That title is going to be H1.

And for this, since it’s a dark background, I’m going to select the heading and then change it to, I’m going to give it a post product. Now because everything we’re going to do is going to be on the page title. So I’m going to say product page title.

So this is going to control the page title for all the product templates. Okay, so I’m going to select this and I want the typography to be center and I want the color to be white because we’re going to make sure that all our page title will be in this kind of heading, in this kind of background. And for these, since we don’t have the padding anymore, even up to this point, we don’t have so if I go like say 280, you can see that it flushes all the way.

There’s no padding at all. So I’m going to give it a top padding of section extra small and the bottom of section extra small. The right, I’m going to give it a section left and right margin, the same here, section left and right margin.

I believe everybody here knows what automatic CSS is. I don’t need to tell you, that is just a feature of automatic CSS. So now, the heading here is going to have the post title.

So that’s what I want this to be, it’s going to be the post title. Now, right now, it’s showing shop archive, so I’m going to save that. Now it’s not supposed to show shop archive because this is the shop archive template.

So it’s showing the title for the template. But I wanted to show the title for the shop page. So what I’m going to do is that I’m going to go into the template settings.

I want to populate content. So I want to populate a single page and then I’m going to select my shop page. And that shop page is the shop page that WooCommerce create for you.

So once I apply that preview, I’m going to see shop, okay? But you could go ahead and just do something like this or you could just say R shop, something like that. And then we have that.

So the next thing I’m going to do is I’m going to take care of the shop page design, the archive design. What I want here is that I want to have a filter on this side and then I want to have the product loop on the other side. So I’m going to add two, let’s just insert block, do that too.

So two blocks inside here and then I want to set this to display grid and I want this to be grid 10. And then for this one, this is going to be my filter wrap, okay, or filter sidebar and this is going to be my product loop wrapper or container. So this is going to be a sidebar, this is going to be a container.

The sidebar, I want it to span three columns and then this is going to span seven columns. The reason I like using 10 grid is it gives me the ability to choose in percentage. So this is 30% and this is 70% and then I’m going to go ahead and add the grid gap over

4 0:37:11 there.

1 0:37:12 All right.

So right here is where I’m going to have my product loop. So inside here, I’m going to insert another block. Sorry, did I insert?

No. I’m going to insert a block and that block is going to be the loop wrapper. And then I’m going to insert another block and this is going to be my product card.

But instead of putting a product card there, I’m going to just go to the homepage and copy the product card that I already have. I’m just going to copy that and paste here. I have that product card.

For my loop wrapper, I’m going to quickly set it to display a grid and set it to grid three. I’m going to give it a grid gap. So let’s see how it looks.

Yep. Usually like turning off this. So yeah, this looks good.

We’re gonna have something here. Now you might wonder, why didn’t I use this as the wrapper? Because I want to drop something there.

So what I want to give it a right margin also. Okay. Yep.

Isn’t that what I should do? Let’s just see what happens at the front end. So I’m going to go ahead.

Now this is how the shop was looking. I’m going to go ahead and open this and let’s see how it looks. Okay.

So it’s saying here products, no products not found, default sorting. Okay. So the reason product is not found is because but we have a loop here.

Okay. That loop loops our product and we, yep, the reason is because we had this feature. So we’re going to remove that feature.

Okay. Let’s remove that feature. So all the product is now showing.

So if I save this, let’s go to the front end and nothing is still showing. Not quite sure why it’s not showing. I’m going to leave that for now.

But I’m going to go into this heading and then I’m going to drop the break crumb element. So the WooCommerce break crumb element, I’m going to drop it right there at top and then I’m going to style the text as white. And then the link inside it, let’s see, the label, home, before.

So you have a lot of stuff here to do, but I just want this link to be white also. So I’m going to go into the CSS and then I’m going to say roots and then I’m going to target the A inside there. And then I’m just going to say color white and that is going to change that color to white.

So I’m going to save that. So over here, I’m going to come to this product title. I really don’t like the font size.

I know if I change it here, it’s going to change on the other side. So I don’t mind. I’m just going to go ahead and change it to that.

So it looks better like this. Okay. So I want it to be small like that and then I’m going to add the price, the type price.

You’re going to see the product price. It’s going to come up here. The regular price, I want the font size to be poppins.

That’s basically all. The sales price, the font should be poppins but I want the weight to be more like 600. So it has a sales price.

You see the sales price is going to be bolder. And after that, I want to add the product rating. So, I’m just going to go rating, I’m going to add a product rating, and I just want to quickly change the style color to something like this.

Okay, that’s okay. All right. All right.

So, I don’t want to have that customer review. So, I’m going to hide review link and then I’m going to add the add to cart button right here. Okay so the add to cart button is there and then here I’m just going to give it a row gap of let’s say XS.

Yep. I’m going to save that and then we’re going to look at the front end. Okay, now the reason we have this problem is that we have not yet defined, I think so, we have not yet set up the template condition.

So what I’m going to do is that I’m going to come here to template settings because now if you go to the default shop page, which is this one, and you refresh, that is not going to be applied. The template that we just created is not applied. And why?

Because we have not assigned that template a condition. So we need to assign a condition to the template. So conditions and we’re going to have this template you know apply to archive and the archive type is going to be post type and the post type is going to be product.

And once that is assigned, let’s see. So I’m going to come here let’s see. Nothing is happening.

I’m not quite sure why that is not working. It usually works. All right, we’re going to trouble that later.

So I’m going to come over here and I want to add the product filter. So what I want to do is just add the filter element. So we have the product filter.

For the first one, I want the first one to be the price. So what you do is when you add the filter, you’re going to add an item and then I want this to be other product price and that gives us the sliding, okay, product price and then you can add another one here. Now if you do it like this, so I have the taxonomy, the taxonomy is going to be category and I want it to be maybe checkbox, okay, so we have that and then you’re going to have another one.

I want to add maybe the product attribute. I want the attribute to be maybe the disk space, not disk space. And we’re going to have that to be maybe a radio list.

So let’s explore the different types. Okay, and then I’m going to add now for the spacing. I want to give a space of content.

Okay, content gap. Then I’m going to add another one. The other, let’s see, other product rating.

The product rating is going to show up on the front end, the stars. So it’s not showing up here. So I’m not quite sure.

I’m going to just say text list or box list. Okay, so that is something like that. I’m not sure why the stars are not showing up.

Let’s see. We do a checkbox or radio list. Let’s use what we have not used before which is the box list.

Okay so we have that and then I could give it a title and just say and then for the titles I could just go in and reduce the font size to like maybe space to ace. M, M, M is that okay so let’s make it M. Okay.

And that is it. We could go ahead and do many other things but I don’t want to do that for the icon expanded, icon you know collapsed. So you can see that you can expand this.

So sometimes if you want it to appear collapsed you can do that. Okay. If you want it to appear expanded you can do that.

So what I want to do now is let’s collapse this and this. Did we have a space here? Yeah, we did.

So I’m going to go ahead and give this a background color of white and also going to give this, and then I’m going to select the section. Should I do it in the container? I think I should do it on the section.

I’m going to select the section and give it a background, okay, light like that. Okay. Now for the filter sidebar, I want to give it a padding.

I have that padding there and I probably want to give it a background of white. And the image wrap, the content wrap, I want to give it a padding. So let’s go ahead, content wrap and give it a padding M.

Alright. So it seems we have just, this is a bit too wide. I’m not quite sure where that is coming from.

But just not to waste time, I’m just going to give it 1 RAM. 1 RAM is 2 minus 0. 6 RAM.

For some reason, is this a bug or something? So it’s overriding. Something is overriding from the ID.

So if I reset ID styles, it’s still not working. So where is this coming from? Okay, I don’t know where that is coming from but I’m just going to put this one RAM here.

So I just don’t want the card to be too much and the same thing here, the image wrap, padding top, just to make that card. So let’s see. Yeah, not the best of cards.

You can see that this image is sort of messed up in a way because some of them have a lot of white space and some don’t. So it’s just making everything not to look great. But for the product card, I just want to give it a border radius too.

So we have our cards now and we have this, we have that. So up till now, we have not been able to sort out why this is not happening. I’m going to do that later in the course of the video.

For right now, what I wanted to, what it’s supposed to show is this, okay? But it is not showing for some reason. Now, if I go ahead to refresh this, you can see that that applies to the shop and the default is now showing.

You see what I mean? So I think that was because it wasn’t applying. We were using, it didn’t detect.

So if I refresh this, it should work. So it’s still saying the same thing which I mean is, I guess is just the back end. So this should be auto.

Margin left should be auto. So why is it not doing that? I guess the reason is.

. . So let’s see what am I going to do.

So let’s do this. I’m just going to come here. Where did I drop this?

Yeah, that is where I want to drop it. And then. .

. and then okay and I will give it some gap okay let’s go down there and give it a content gap. Save this and we refresh the shop page and that shows so we can sort by popularity, we can sort by you know latest, depending, we can sort by how low to high, to low price.

You can sort by high to low. I click the product. High to low.

We have highest price there. So default sorting. Okay.

Now, not the best of design. You can see that this, we have a lot of space at the bottom here because of how these images are. I’m not quite sure why that space is.

. . yeah this.

. . yeah this.

. . but we could just make that zero.

So in BricsCAD, I think 1. 8 for some reason, sometimes a couple of things don’t show up. Let’s refresh that.

4 0:50:33 Okay, so it’s kind of looking better.

Coming close. 1 0:50:36

And then for this button, I don’t want it to be too close here. space large. Maybe M should be okay.

Okay. So just to separate it a little bit. Yeah.

Separate it a little bit. Yeah. So we have our shop page now.

So we are done with creating the shop page. We could go ahead and just create the category archive. So once we’re done with this, so we are done with this, right?

We are moving on to create the category archive. Now you might wonder, so can we use the same shop archive for the category archive? Yes, you can.

It’s possible to do that but I would advise because for example, the features are not the same. For example, you have product category here. So if you are on the category archive, let’s go to the home page, and then we go to the category, then you are already in the category.

So why would you want to filter it based on categories anymore? You see what I mean? So this is why it’s good to have a separate category archive.

There are cases where you might want to have the same. Let’s say you don’t have this kind of filter. It’s just the product listed and the filter doesn’t matter.

Okay, so what we’ll do is we need the whole of this for our category archive. So what I’m going to do is I’m going to come here. Now let’s close this home page.

I’m going to be page WooCommerce product archive. And then I’m going to create the template. And then I’m going to go ahead and edit this template in a new page.

And that’s because you know why? I want to copy this. So I’m going to copy this to here.

Okay. Now, for the category archive, what I want to do is, I’m going to come here and change this taxonomy because we don’t need the taxonomy in the category archive. I’m going to put radio list.

Okay, so if it is in stock, out of stock and all that, so that is what I want to do. Maybe I’m just going to increase this space to maybe container gap, just make it spaced out a little bit more, I don’t know, just for variation. But it’s good to keep things consistent, okay?

I just want to see how this looks. Now if we go here and refresh, you can see that that applies but it’s writing nonsense here. Now, we wanted to write IOAs here.

The category, we want it to be the category name. I’m going to select this. Instead of it coming in to write a timeline, blah, blah, blah, we want it to write the name of the category.

So we’re going to go back here and here we want to just change this to term name. So I could just say category and save that. Now if we go in to refresh this, you see it’s writing the iOS there.

For some reason, I not give this a row gap which maybe one rem should have been enough. 3 0:54:28

Okay. 1 0:54:29

So now if I go back to the homepage and then I select this Android category, you can see that I have only the Android and then I don’t have display category here. This is looking ugly. So I will have to take that back to space medium like we did.

What do we have there? I think we had content gap. Yep.

All right. I’m going to refresh this. Yep.

Okay. So we have the category Android. I go back home and then I go to phone.

We have category phone. To make sure that this template does not in any way affect any other product category, what I want to do is to go into the template settings condition and then we’re going to add a condition and it’s going to be archive and it’s going to be categories and tag and then it’s going to be all products, all terms, product category. And then I’m going to save that just to make sure that it is what we want.

So you want to do that. You want to make sure that you have that sorted out. So now we have here, we go home, see that, we go to the shop, see that.

So right now, we’ll set up the shop page and we’ll set up the category archive also and then we are left with our single product page. So I’m going to, we’re going to deal with this. We’re going to make sure that we set up a very nice single product page.

So what I’m going to do now before we do that, what we’re going to do is to go into the WooCommerce theme settings in Brics. Now you can see that our buttons are still the default buttons. So I’m going to go to theme style.

I’m going to scroll all the way down here and then I’m going to go to buttons. The first thing I want to do is to change the background color of the buttons to transparent and then I’m going to go to the border and I want to set the border to the 50mm width. That is going to give it a peel shape which is going to be 2 pixels border, all round, solid and I want it to be primary dark.

Yeah primary ultra dark. Alright, so for the padding, I want to give it M here. I’ll give it M here.

I just want it to have a little bit more padding. I think that is basically all that I want to do for these. and the text, I also want the text to be paw pins and font width is going to be medium.

So I’m going to save that. So you can see that we have that and that is going to affect basically any page that has a WooCommerce button. So you have here, it’s going to affect that.

If I add to cart, it’s going to affect the. . .

This is rounded but it’s not completely that. So what I’m going to do is I’m going to go ahead and style this. So let’s go ahead and style that.

We’ll finish with the button. Now the notices. So what I want to style is just the success.

Now you could go ahead. There are different notices. These are success notice.

You have error notice. But I’m going to style only the success notice. So the background color, I want the background color to be my primary light, my ultra light.

So if I save this and go ahead to refresh this, so you’re going to see it’s changing to ultra light. Okay. And then the typography, I want it to be my primary ultra dark and then that is going to deal with that.

Then for the button, it’s called Socks Link. For the button, I want the background color to be transparent. I want the typography color to be primary dark, ultra dark.

Primary, Ultra Dark and then we already have the border radius the way we want it. So I’m going to refresh this and that. So we have the consistent look of that but the typography is a little bit too heavy.

So I’m going to choose the Poppins Medium just like I did with the others and then if I refresh this, you’re going to have it look just like the AutoCAD button. So we have that consistent look. So we’re going to move into the dynamic tags and the badges.

Now we have been using dynamic tags all this while, just that I just didn’t mention it. What you have here is a dynamic tag. It is a very powerful Brics feature that allows you to place different kinds of elements instead of having to write custom codes.

So what I’m going to do here is this. For this image wrap, I’m going to add percentage discounts in this loop. On the image, I’m going to add out of stock also here.

So the first thing I want to do is add out of stock. So I’m going to add it in the image section, in the image wrapper. You see why you want to have an image wrapper and a content wrapper?

Because there are some things you want it to be relative to just this image. And the problem is I’m having the image. So that’s not a problem because it’s in the image wrapper.

4 1:00:12 That padding.

1 1:00:13 So what I’m going to go ahead to do is to add stock, product stock.

So this shows the stock status. So you can see this is out of stock, this is out of stock. So if I save this and go back to Android, this is out of stock.

Some of them don’t have stock. This is three in stock. Now I don’t want to show those that have stock.

I want to show only those that are out of stock. So what I want to do here is I’m going to select this and I want to style it. So let’s go ahead and style it.

I’m going to come here. I’m going to set the background color to this. Now it’s not showing anything, but it’s showing the background color here.

I’m going to change the font’s color to white. And then I think I’m going to go. .

. Now this, you have different settings here and different settings here. So I think it’s out of stock that we want to style, not in stock.

So that is a mistake, out of stock. So you can put not available any text you want here. That is a great thing but I just wanted to show out of stock.

So the typography is going to be white and then it’s going to be ball pins, medium bold. I’m going to have a background color of that. Then I’m going to come in here and then I’m going to set the padding of let’s say maybe 2, 6 rem.

And you can see the problem with that is it’s not working. And this is why I don’t like this feature here. They should have a padding here.

This padding is not going to work. So we’re going to come here and I’m going to change the typography from here and then I’m going to use this as the background settings. That is going to enable me to add my padding.

So I have 8 which is too much. I’ll say let’s 0. 4, 0.

4 rem. I need something very small. I think I’m just going to use 3 pixels here and then here I’m going to use 8 pixels.

That’s because I don’t know if I want it to grow more than this perhaps and the typography, I want it to be all caps and I want it to be medium bold. Okay, so that is it and I think I don’t want border radius and all that. So for this, I want it to be positioned absolutely relative to the image wrap.

I’m going to come here and then I’m just going to type position absolute. That means the image wrap has to be positioned relative and I want it to position to the center. Now with the image wrap selected, I’m just going to go to the Flexbox setting and align this.

Okay, right there. The next thing we want to put, now we want to do something. Now if I refresh this, you’re going to see that it shows three in stock here.

I don’t want that to show three in stock. I don’t want, if it’s not out of stock, I don’t want to show it. So we’re going to add a condition and that condition is going to be dynamic data and that dynamic data is going to be product stock status is equal to out of stock.

That’s just how you write it. And then you save it. We want it to show only when the stock status is out of stock.

So I’m going to refresh. Now it’s showing here. But if I refresh it, you can see it’s not showing here but it’s showing here.

So it’s only showing if it is out of stock. And then I want to add the percentage discount. For the percentage discount, we don’t have an element in Brics, but we’re going to use Brics dynamic tag, which is what I say is very powerful.

So what I’m going to do is that I’m going to add a basic text. And this basic text is going to be a sales percent. And here, I’m going to put a dynamic tag.

So I’m just going to say, cells, product are products on sale. And then you can see that it immediately shows the percentage for product that are on sale. So if I go to the front end and refresh, so this product is on sale, it’s showing the percentage.

And so I’m going to go ahead and style it. I want to come here to the background and give it a background of let’s say black. I want it to be a circle, okay?

So I’m going to go into the border, border 50 viewport width, all around. But that gives it a peel shape. I want it to be a perfect circle.

So I’m going to go into the custom CSS. I’m going to say root. So there are a couple of things we want to do.

First of all, we want it to be aspect ratio of 1. And then we want to centralize this text. So I’m going to just say display of grid, place items, center and then I’m going to say position since we’re already here.

Alright, let’s remove that and just use the. . .

Now, like I said, I’m going to make it absolute. So it’s absolute relative to the image wrap. Good thing is that we already have that.

Let’s go to that where we have it there. I want the top to be 8, left 8 and then we have that. For the text, I need the text to be a little bit smaller, maybe text S and then a bit bolder, let’s say 700.

I’m going to save that. Fonts family, yep. Save that and let’s check it out.

So this is on cell, this is on cell, but we still have these elements rendered in this and this. We don’t want it to render. We want it to render only for product that are on sale.

So we’re going to go in and add a condition to this. That condition is going to make use of dynamic data. That dynamic data is going to be sales, product on sale.

If product on sale is not equal to zero, that means if there’s no product on sale, refresh, and that is gone and we only have this. So that is how you set that up. So now that we have that, I can now copy the whole of this image wrap to the page to the shop page.

I’m going to copy this. I’m going to open or rather I have my shop page here so I can just quickly replace the image. Delete this and then paste this and we still have that.

So we’ve updated our shop page. So if I refresh here, yep, yep, our shop page is updated with all that. So right away we’re going to go ahead and create a single template.

So if I click on this, okay, click on this here, we’re going to have this like this single page I want a font that looks good, maybe this. All right. So Huawei Nova.

Now we have this single page template is blank. You can see that everything is not properly aligned. There’s no spacing here.

So this is why you want to have create your own template because you want to make it look clean and neat. So I’m just going to go ahead and delete this. So we see the consistency in our shop page, category page.

We have this header here. We’re going to do the same thing but in the single product, we’re going to give it a different twist. So okay, I’m going to just delete this for now.

Sorry, close that. I’m going to go into template, create a new template. I’m going to just say, single product.

We’re going to choose WooCommerce single products. I’m going to create the template and I’m going to do it in a new tab and that I’m going to copy this. Copy this.

Once it opens, I’m going to paste it here and this is going to be the post title which is the product name. We already have that but then for us to have the name, we’re going to go into the template settings and we want to populate the template with a single, let’s say, what was the name of the phone Huawei Nova product. So I’m going to select that and apply the preview and then we’re going to preview.

So you always want to preview so that you know what you’re doing. So you can see that everything is looking great here. What I’m going to do here now is, for this, I’m going to do something different.

I’m going to add insert a container here and then I’m going to make this the row gap container gap. That is not what I intended to happen. Okay so that means I will have to wrap this with a block and move this inside here.

Okay centralize it. All right, something should, it should centralize, right? All right.

Okay, now we have that. I’m going to insert a two column here. One is going to be, I’m going to drop in my product gallery, which is the product image on the single product page.

And then for this column, I want to make the background, I think I’ll make the background sort of like black like this. It doesn’t even make any sense so I’m going to make it white. What am I selecting?

This. It doesn’t seem to show. No problem.

Sorry, that is typography. Okay, so let’s try that again. Black, transparent, black like that.

And I want to give it some padding, medium. We have that padding. So let’s take a look.

Right away for the single product, you don’t need to go into the template settings and set the condition because it’s going to automatically apply. So if I do that, it automatically applies, you can see. But then the only reason you would want to set a condition, if you wanted to create a template for a specific product, you want it to look different, maybe for featured products, you want to set conditions for every featured product should have a different design, the single product page, then you can do that.

But generally, you really don’t need to set conditions here. So I’m going to do the same here. As a matter of fact, I don’t want this to be used.

I want to use grid here and I want to use grid2. Okay. Grid gap.

And for this, I didn’t really see the value that I chose. So what you want to do is go to shade and then choose a specific value from the ACSS transparency. I think that, let’s see, too much, that much.

It should be okay. And then you can do the same here. Okay.

I go to shade. I think that was it. All right.

So over here, we’re going to start adding content. But before I add that content, I want to give it a padding all around. And then I’m going to add, the first thing I want to add is the short product description

3 1:13:01 here.

1 1:13:02 Yeah, it’s dark so you can’t see anything.

Now on a second note, I think I would like to make this background a lighter color. So I’m going to make it white. OK.

So let’s do that. I’m going to make it white. All right?

Let’s make it white. And we have that. And then maybe another thing we’re going to add.

So I’m just going to add things arbitrarily. OK? The product price, I’m moving up here.

Make it maybe a bit bigger. Yeah, go down here, go to the regular price, extra large, go to the sales price, extra large, on with that, opens. So we have that.

I’m just going to go ahead and just add that content gap there. You want to put in another thing there, maybe additional information and then the last thing I want to put is Card Button, okay? That is Add to Cart.

Okay. Additional information. I’m going to save this and I’m going to refresh this.

And then we have a nice product card. So if I come here and check another product, you see additional information is showing the Articart elements. Everything is showing there.

Now like I said, I don’t want to go into excessive styling. But then here I go again. I said I don’t want to do it but I’m doing it.

this border to be M rounded and this is going to be the same, border M rounded. Okay, so just to make it look a bit better. So after that, you would want to add maybe another section, okay, turn another section add your tabs, your product tabs, and then you could go ahead to style the product tabs any way you want.

So if I do this, you can see that I have my product tabs down here, and then you want to go in and maybe add another section. I’m going to duplicate that, remove the product tab, and then I want to add related products. product.

And then for the related product, you can go ahead and style this. Now, you go to the related product, there is no option to style this. But this is an A tag and this is a span.

I know that because I’ve checked it before. This is an A tag. So if I come Let’s save this.

Okay. Then, let’s refresh this. 3

1:16:04 All right. 1

1:16:05 So, we have that. I’m not sure why we have such a massive space down here.

Not quite sure. There seems to be a massive space down there. It’s a massive space, a very massive space.

to do is that I’m just going to take up the section padding there. I’m not sure why we have because this already has a very massive padding. Okay, I’m going to save that and let’s look at it.

3 1:16:38 So something is not showing down here.

1 1:16:40 That is because of this specific product, okay?

The Samsung Galaxy A14 has, let’s just deal with that. It has something that is not showing. So I’m going to come here and then check there.

I should see something. Yeah, there is an empty image there which was causing all the problem. I’m going to update that and then go here and refresh again and yeah, it looks good.

So we have the additional information here. You could style that. Let’s go in here and then you can come here for the tabs, the typography, you want them to be large maybe.

That’s for the tabs and maybe bold. Okay and then the text, you want it to be black. Yep it should be black but for some reason it’s not.

For the active tab, I want the background to be something like that. I don’t know. Lighter.

So it depends. If we go in here and refresh, the active tab is not showing what it’s supposed to show. Typography, background, back typography, white.

Let’s try something. That’s for the panel. For the active tab, for some reason, it’s not reflecting.

The color here, I chose black. No, not the background color, the type of graphic color I have chosen. Different colors but it’s not for some reason.

Okay, and that’s because it’s being overwritten by ACSS. So when you see this blue color, it’s being overwritten with ACSS. So probably this might need custom code to override.

Okay, as you can see, that color is not taking effect. So what I’m going to do is, it is an A tag. That is why it is being overridden by ACSS.

To overcome that, you can go here and write root and then your A and then just make the color white. But you want to be careful that you don’t have white in your. .

. I think that is the problem. It is not going to deal with this sort of things.

Because ACSS applies that, the primary color to the link and then I go in again. Try to see if I can solve this problem for you and set the color to white. Okay.

Okay. Set the color to black. Okay.

And then that means I can have my active tab for the color to be white. Alright. So let’s see.

Okay so that solves it. So the solution is in doing that on set and then you go in. Now for this, to change the color of this, this one you do the same thing.

Now if you inspect this, I hit F12 to bring that out. If you inspect this, you’re going to see that this is a span. So I want to change the color of the span inside here.

Custom CSS, Roots, then Roots. I’m going to put color on East. I want to select both the span and the H2 at once.

So H2, span, and then I can change the color of both of them at once. I could just say color the primary ultra dark, close it. And that changes that color.

And if I refresh here, it changes the color. And then I could go ahead. Let’s see, do we have the option for font size?

So we could go ahead and do anything we want to do in that custom CSS section. So we could just say, our font size could be var, text, medium. And that’s all.

We could center align it. Let’s see, is there an option to center align? Okay, yeah, there’s an option for that.

I’m going to save this and when we refresh, it’s going to look better than it was. That is basically how you can set up your single product page. There’s a lot of things you can do, of course.

It is possible to build a related product using the query loop, but it is an advanced stuff. We are not going to do that. Maybe in subsequent advanced videos, we’re going to do some more advanced stuff for that.

But here is what Brics offers, gives you the ability to customize your shop page. Now let’s go ahead and we want to have, so once we add our elements to cart, let me go ahead maybe for this element, I want to add this to cart and then it’s added to cart. I’m going to view cart.

You can see the cart is just the default cart design. The reason you want to customize your cart is because you want to have the ability to write whatever you want. If you want to leave it like this, I don’t think it’s a good idea.

So I’m going to go into the template and then I’m going to just write card. The template type will be a WooCommerce card. I’m going to create that template and I’m going to just open it in a new tab, close this and that’s because I want to copy this to there.

So we have our card template and I’m going to change this to post title. So that’s going to be card. So you could just change this and say your card.

Now this template, the card template does not support conditions. So you go to template settings, it doesn’t support, it’s automatically rendered. So we don’t need to add any condition to it.

So, I’m going to add another section and in that section, I’m going to drop in my card elements. So, you have the card elements. The first thing you want to add is the card items and then you’re going to add your card titles.

Now, if you did not have this card coupon, you would add a card coupon but we already have it inside the card. The question now is why do we have it as a separate element even it comes with a card item? That is because Brics gives you the ability to build the cards, you know, this card item visually using what is called the card contents loop.

There is a content loop for Brics that you could use to build a card. It’s a special set of elements using dynamic tags that you can build and construct a tag. But that is far beyond the scope of this tutorial.

Now what I’m going to do is I’m going to show you an example of that. I think I have a card element that I built out some time. I’m going to show you.

So this is an example of a card that is being built with the card loop, the card loop builder. Now you can see that we have the card content, the card items. Every individual component here is separate.

You can see this is this. Everything is done by dynamic tags. So this is possible if I come here to this card content and I want it to be grid 1 or grid 3.

I can just change it to grid 3, okay? And I have that if I want it to be grid 1, I can change it to be grid 1. So this is a very powerful Cards Content Builder which we are going to explore in more advanced videos.

So we can’t address that in this video because it’s kind of like a more advanced feature. This video is focused on the fundamentals. So in subsequent tutorials, we’re going to bring this in.

All right, so that’s just what I wanted to show you. But for now, we can build our cart page like this. And maybe for this, I could put maybe a tool in here.

What do we have here? What am I doing? I just ruined everything right?

That’s what I did. So let’s stop that. I’m supposed to add another.

I’m going to insert another container. That’s what I should have done and I’m going to move this here. I’m going to move this here.

I’m going to move this like this. Just a way of trying to make that. .

. So now we have this is how our card page was like. If I refresh it now, you can see that we have a completely different redesigned card page.

So this looks good. So now you have, when you go to the cart item, you have a lot of options here. You could disable link.

You don’t want to link it back. You could hide the remove button. You don’t want to put that.

You could hide the name. You could hide the headers here. So there’s just a lot you can do.

So if I hide that header, I can just come here and refresh. And you see that. Now another thing you want to do is you could just come in here, you add another container.

Maybe you add another, insert a container and then you throw in maybe your upsells product. Now if you had upsells, it’s going to show up but I don’t think I have any upsells here so it’s not showing up. So you could throw in upsells.

So you could throw in featured product. You could throw in some advertisement somewhere. So this is the reason you want to build your template.

So the same way you could build your checkout page. So if we come here and we proceed to checkout, you can see we have this checkout page that is not very, very not pleasant to the eye. We could do the same thing.

So I’m going to go here. I’m going to add a checkout template. And then the template type is going to be Checkout.

I’m going to create that template and then I’m going to open it in a new tab. Let’s start closing this once. This, this.

Okay. So this is the checkout. The same thing.

I’m going to copy this, paste this. So I’m going to just say, yay. I can say yay.

Checkout time. You know. Something like that.

Okay. And then I’m going to drop in another section and in that section I’m going to drop in my checkout element. So you have the customer checkout details and then you also have the checkout order review.

So what you want to put here is the customer details. I want to insert a block here. Okay.

Two blocks and the first one is going to be for this and then the second one is going to be for the checkout order review. And then I want this to be placed side by side. I’m going to make this grid and make it grid 2.

So we have that. Okay, so we basically still have something the same way. So I’m going to save this and then I’m going to refresh this and then we have a cart page looking more interesting.

You can see and for each of these items you have things here you could hide stuff, you could change stuff, the fields, the typography of the fields, placeholder, hide additional information. You see additional information. add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, add a title, this WooCommerce coupon is still showing up here breaking our design.

Now if you don’t want it here, you could remove it. Bricks has given in their documentation, they gave a snippet that you can use. So I think I’m going to call up that snippet.

So in Bricks Academy, you have this remove checkout coupon form. and put it in your code snippet editor and then that is going to go off. So I already have a snippet here.

That snippet, I dropped it here. I’m going to enable it. I put it here.

I put it here. Okay. Let me open it.

So you see that is gone. Of course, there’s a way you can introduce it using maybe Bricks filters, but that is beyond the scope here. Is it possible to use the coupon element here?

Let’s see. I don’t think it’s available to use. All right.

So no coupon element. All right. So we can reintroduce that using filters is an advanced topic.

We’re not going to do that in this tutorial. And so this is how you can do your checkout. You could also drop in some elements maybe under here to say, oh, look at my, you know, like if I go here to, if I go to my archive page, let’s say my shop archive to edit it, I can just go in and copy the product loop wrapper.

Just copy it there and just place it under here. And then all I need to do is just to change the styling, make this two and then restrict it to maybe the loop item, maybe restrict it to only the featured image. Come here and just say, terms include featured category.

save it and then if you go to the checkout page, you can just see other stuff that you want to add to cart. I mean, this is not a good design. I’m just showing you what is possible.

So, it doesn’t have to be like that. You could drop it in a different place, maybe somewhere outside this. So, maybe you duplicate that, remove this, that, move this up here, remove this, okay.

Remove this and then make this grade 4, okay. And I think that’s it. So let me save that and see what is going on.

So for some reason, it’s not, let me see. This. This.

Okay, this is set to grid 2. Sorry. That’s the reason.

So, I’m just going to set this to grid 1. Okay. So, if I save that and I duplicate.

So, we can see that we have this product listed here in the checkout page. So, it depends on what you want to do. You could customize your checkout page to be great.

Now let’s place our order. I’m going to place this order and then we’re going to have the thank you page. This is another template you want to customize.

Thank you page is a good part of the checkout template. You can do that and just say thank you credit template. Then I’m going to open this in a new tab, copy this section, and then I’m going to paste it here.

Now the thank you page also does not require a condition. I’m going to add the thank you, checkout thank you. For that, I don’t want a checkout thank you.

I don’t want to show the message, this thank you message. I think I would drop in. You could just centralize this.

You could make this 50% width. What I would love to do is just to put in two columns here and then I have the thank you in one column and then I have my products listed in another column. Again, to put it down, put it there.

I have my product card in another column which I can set to just display as grid 2. And that is it. And this spacing, I didn’t use grid there but I should use grid because everything I’m using grid.

So, let’s be consistent. I’m using grid2 and then gridGal. So you could put in something there and just say, what am I going to say?

Put in a heading and just say Consider these items. Okay, so that’s going to be. .

. Okay, it should be inside here. All right.

So this is my grid. So I’m not going to use that as the grid. Okay, so what I’m going to do, I’m going to wrap this with a block and then I’m going to move this up here.

So consider these items and then my normal gap, content gap. So you can see that my thank you page is nicer, better and more purposeful. Now I can just go ahead here and set this to be a width of 100%.

I’m going to save that and then let’s look at that. Yep. So this is a better thank you page than the default one.

It looks nice. It looks purposeful. It looks deliberate.

So those are the basic templates you should create. There are many other templates like the pay template. You have the email template.

That’s the email or the order receipt template. Those ones, you can also customize them but these are not things we can view here. So for more advanced stuff, we might deal with that later.

These are the basic templates that you should create when dealing with your WooCommerce site. Now the final thing we’re going to do is to add the mini card. So I’m going to go in here to the header and to edit that header, we’re going to add the mini card.

Okay, so I have my mini card here. I’m going to display this as a flex like that. Yup.

So I already have a content gap here. Okay, so this mini card, I want the icon color to be white. I think that’s basically all I want there.

I’m going to save this and let’s go to the front end and check. So I’m going to go to the homepage. I don’t have any item in the cart so I’m just going to add this to cart and then let’s click there.

No product in. Okay, I click to open. All right, so product is added to cart so I see that now.

So I’m going to go ahead and style that. So I’m going to go to this and add this to card. I’m going to add this to card.

Now I have three items in the card. Let’s go back there, refresh this. We have three in the card.

I’m going to go to card details and that card detail is going to give me the option to do this. Off-canvas, I want off-canvas to come out from the right so we can see it’s now an off-canvas. For our buttons, we could go ahead and style the buttons to look like our WooCommerce buttons.

But let’s look at it at the front end because sometimes these things don’t appear the way they look. So, you can see our button styling did not apply. This is one of the things that Bricks should really get a grip of.

So, we’re going to style WooCommerce things. Everything should be styled. Anything that concerns WooCommerce should be styled.

So I don’t like the fact that this is happening but it gives me an extra work. But then we’re going to go in there and for the buttons, the background color for our button was transparent. solid primary dark and then we had this 50 VW and the text was let’s leave the text like this.

It was poppins okay and it was medium. Okay, so now if we go to the front end, refresh, check this, you can see that we have that. So you could go ahead and style every bit of this here.

I’m not going to go into details of styling it. You have the subtotal, position, height, left, right. 2

1:40:16 You have the icon. 1

1:40:17 You want to change the icon to something different. Well good for you.

Let’s say I want to change it to this. Who knows? So, a lot of things you could do here.

A lot of things. The buttons, the transform, how you want it to come out, the box shadow, the height, the width, the image width. Let’s say I want my image to be 80, maybe a little bit bigger, maybe 100.

Okay. So I’m just going to leave it at the default. So, so many things you could do here.

So when we come here, we are going to see the changes and this looks good. So this can lead you to the Cag page, which we’ve already created, and leads you to the Checkout page, which we also have already created. All right, there we have it.

That is the end of the tutorial. We’ve looked at how to create a simple WooCommerce homepage. We also learned how to create a category loop, where you have the category grid and then the featured product loop.

And then if you click the category loop, you’re going to go to the category template which we created. We also saw how to create the out of stock badge, the percentage badge. We also saw how to create the filters.

And then we also saw how to create the shop page. So we go to shop, you see the shop page and then we saw how to create the single product. We saw how to add this.

We saw how to create the view card page and then that is the card page and the checkout page. We also saw how to place an order for a thank you, how to create a thank you page. I mean not to create a place an order.

So those are the things that we learned and these are the basics of WooCommerce in BricsBuilder. Like I said, there are other things that we could do in subsequent trainings when we go into more advanced features of WooCommerce building very extremely complex and dynamic templates, building custom cards, loop using the card loop elements in Brics. So if you’re looking forward to those kind of tutorials, please let me know in the comment section.

If you have any questions you need to ask, let me know in the comment section. I will do my best to take a look at them and answer them if I can. So until next time, have a great day.

So until next time, have a great day. Bye.