Building A Website: Part 4
Customizing The Checkout Page
We are finally on the final step of our users buying journey, the checkout page. Go ahead and click the checkout button and let’s see what the page looks like.
It seems like the top bar and the stars are the only things we need to change, so let’s get to it.
Start by going to the customize section and inspecting the top element.
Looks like it has a class of “woocommerce-info”, so let’s go ahead and add this code to the CSS:
.woocommerce-info{
border-top: 5px solid #000000 !important;
}
Next let’s inspect the stars that indicate our required fields. It looks like they have a class of “required’.
Add this code to the CSS:
.required{
color: #000000 !important;
}
Looks good. Publish the results and check to make sure everything is working. If it all is then we are done and we can move forward to our next section, “Creating The Rest Of Our Content”.