Atomic Smash homepage splash

Styling the WooCommerce Checkout with the Chrome Debugger

Words by Anthony HartnellJuly 6, 2018

Illustration of the Chrome DevTools logo on a blue background.

In my first video blog post (vlog post), I’m demonstrating how to use the Chrome Javascript Debugger to style the WooCommerce checkout form when the spinner is loaded. If you’ve ever needed to style dynamic elements, e.g when an Ajax call is requested, you’ll understand how difficult/impossible it can be to add your customizations on an element. After researching for a while, I found out that you can pause the browser on an event of your choosing, e.g. a DOM change or on an event listener such as the ‘click’ handler.

View the video below to follow this tutorial.

Adding Other Breakpoints

Aside from setting the breakpoint on an element (by right-clicking in the inspector), you can also enable other types of breakpoints, e.g. Event Listeners – Animations, Mouse Clicks, Device Orientation etc, Global Listeners – window error, focus, scroll events and more.

To do this:

  1. Open the inspector panel .
  2. Click Sources.
  3. Slide out the Debug panel – if you can’t see it, click the little icon on the right that looks like a play button inside a square.
  4. Scroll down to Event Listener Breakpoints.
  5. You can click the little arrow next to the checkbox to reveal more options.
  6. E.g. If you expand the Mouse controls you will see ‘click’, ‘mousedown’, ‘hover’ etc.
  7. Check a box you want to set a breakpoint on and Chrome should pause at this point.
Screenshot of the Google Chrome Debug Panel

I've highlighted the section in the Debug panel that lets you add more breakpoints based on Event Listeners.

WooCommerce Demo

You can try out the WooCommerce Storefront Demo here for yourself: https://themes.woocommerce.com/storefront/checkout/

 

Further Reading

Click the link below to see an in-depth tutorial written by Google: https://developers.google.com/web/tools/chrome-devtools/javascript/

Profile picture of Anthony Hartnell

Anthony HartnellDeveloper

Anthony works in the development team and enjoys creating plugins and integrating maps, libraries and other APIs into Wordpress.

Go back to top

Keep up to date with Atomic news