My Courses > CustomizeWoo > Module 3 > Lesson 04: Customize Checkout Styles
Customize Checkout Styles
The most important page of a WooCommerce website. The checkout page often requires some styling. So, watch me code a few bits and pieces.
Video
Please note: English captions are enabled by default (click on “CC” in the video player to disable). Also, you can click on the “gear” icon to manage quality and playback speed. Enjoy!
Sorry, this video is visible to logged in and fully registered students only.
If you already enrolled in this course, please LOG IN
Otherwise, please enroll in the FREE / PRO COURSE
For any other queries, feel free to get in touch
If you already enrolled in this course, please LOG IN
Otherwise, please enroll in the FREE / PRO COURSE
For any other queries, feel free to get in touch
20 thoughts on “Customize Checkout Styles”
Questions? Feedback? Support? Leave your comment now!
_____
_____
If you are writing code, please wrap it between: [php]code_here[/php]
Hey Rodolfo
That’s my first interaction with your videos and i have to say that your way of explaining the points makes our lives a lot easier, a big thank you and a mega fat thumps up!
Thanks a lot Abu!
Is there a list of body class names? I want to change something only on a single product page but can’t determine what the body class is.
If I have to use a pade ID number, do you put that in the same place? Does it need to be in quotes or something? I can’t get that to work.
page-id-789 .type-product { border: 1.5px solid #000; box-sizing: border-box; }Hi Paul! So, do you want to target ALL single product pages (body class = “single-product”) or a unique single product ID (https://businessbloomer.com/woocommerce-apply-css-changes-one-pageproduct/)?
I really want to change the formatting for a custom shopping (loop) page.
https://kloverproducts.com/sound-shark/shark-shop/
I tried this code and it works on my staging site but not on the live site.
.page-id-789 #theme-page h2 { font-size: 18px; }I would prefer to use a body class instead of a page-id, in case the page ID gets changed, but I do not see one on this page.
Thank you! So, if it works on staging but not on live, this makes me think of caching. Try to apply the same CSS @ live and then clear the server and browser caches to see if it works.
You could readapt this in regard to targeting a class and not a page ID: https://businessbloomer.com/woocommerce-add-category-css-body-class/ (it’s for single products, but you could target a single page with a given page title)
This is very strange. I have tried this on two different computers, and two different browsers, after clearing the cache. In all cases the formatting works on staging site: https://klover-products.flywheelstaging.com/sound-shark/shark-shop/ but not on the live site: https://kloverproducts.com/sound-shark/shark-shop/
I checked the style.css on both sites and they are identical.
I am just wondering… why am I not being notified by email when you post a reply?
I see two identical pages. What’s the customization (H2)?
Re: email notification, I think you have to “check” the “Notify me of new posts by email” checkbox when you submit a coment
The product titles font size was made smaller, the price was set to bold, and I added a border (easiest to see).
The site works OK on my daughter’s computer so evidently my cache is not clearing out completely. I don’t know why that would be.
I’m looking at your post on body classes. Could I add a “Raw JS” box to that page with something like this and then use shark-shop as the body code instead of page id?
BTW – I have checked the checkbox on all my posts.
I’m sorry. I had to flush the cache on my host. Now everything looks correct.
Glad to hear that!
I’m looking at your post on body classes. Could I add a “Raw JS” box to that page with something like this and then use that class (shark-shop) as the body code instead of page id?
Yes, of course, give it a go and let me know!
Your instructions and method of teaching are excellent for a newcomer but also as a refresh on digging into the Inspector to locate and element.
Awesome!
Hey Rodolfo, you mention that background: none is better than background-color: transparent. Why is that?
Hi Noelle! It’s because “background” overrides “background-color” (i.e. it’s “more powerful”), and therefore there won’t be anything else in your CSS overriding your call. Hope this helps!
this is a key lesson, overcoming CSS hierarchy is not easy, but you coved it well.
Thanks,
Excellent!