Building A Website: Part 3
Customizing The Cart Navigation
Now that our product and membership are created, we essentially have a working store. What’s left now is to style it, and I always feel working your way through the users journey is the best way to do that.
So, let’s go to our homepage.
Looks exactly how we left it, but currently we are only focused on the purchasing journey. So go up to the cart icon and click it.
Not ideal. I want it to be black, and the shop link is white so you can’t see it against the background. Let’s change this.
Go the the customize panel.
you can look around if you want, but I will save you some time. Something that is very common with WooCommerce is, while it is a great eCommerce plugin, it doesn’t not give you a lot of freedom to customize it. It wan’t you to buy addons for this. However, we and your clients want to save money so instead we are going to customize it ourselves. This is something you can do for most restricted styling situations.
Go ahead and press F12. this will open your google developer tool.
It looks pretty intimidating, and it has a ton of functionality that we will not be using or get into. What I want to draw attention to is the element selector in the top left corner.
This nifty tool allows us to select different sections of our site and view information about it. So click the element selector and then hover over our cart section.
Now if you click on the section it will take you to and highlight that sections code.
I am not going to get to in depth with this because this is a design school and not a development school, but what is important to see here is the ‘id’ and the ‘class’. The ‘id’ is for this specific element where the class is a group of elements. There can only be one id, but multiple elements can share a class.
So to style this cart section we are going to copy the id name ‘slide-cart’. We are then going to go to the custom CSS section of our customize panel and paste in this code
#slide-cart{
}
This will allow us to now style the id. Any time you are styling an id you must use the # symbol. If you are styling a class you use a .
after this enter the following text inside the brackets.
background-color: #000000 !important;
color: #ffffff !important;
This is CSS, and it styles our web pages. There are tons of things you can do with it and as you continue to work as a designer you will get more and more familiar with it when you come across situations where you need to get a little creative such as the one we are currently in.
Anyway, our cart should now be styled, so publish our progress and we can click on the shop link and move forward to customizing the shop page.