Building A Website: Part 4
Customizing The Cart Page
We left off completing the product page, so let’s pick our users buying journey up from there. Go to the product page, and let’s click to add our product to our cart and see what happens.
Looks like the product is added to our cart, but that red has got to go. We know from our previous section that there isn’t anything in the builder that is going to allow us to change that color, so we are going to have to add some custom CSS. So, go ahead and open up the google developer toolkit and then let’s inspect the element.
It looks like the top bar sits inside a called “woocommerce-message”, but before we go change it let’s find the button as well.
It looks like our button is a woocommerce button with a class of wc-forward. Now that we have both our elements let’s go over to the customize area and override the styling.
in the custom CSS section enter this text:
.woocommerce-message{
border-top: 5px solid #000000 !important;
}
.wc-forward {
background-color: #000000 !important;
color: #ffffff !important;
}
publish the changes and go back to the product page.
Looks good. now let’s go ahead and click to view our cart.
More red buttons. Open up the developer tool and let’s inspect them.
it looks like they both have a class of ‘button’, and if I recall the button on the previous page also had this class. So let’s go back to our customize page and change our ‘.wc-forward’ to ‘.button’
Cool. Let’s make the link black while we are at it. Open up the body link tab and make it black.
That should be all there is to it.