WooCommerce checkout and extension checklist

Before adding an item

Check product variants and changing selections.

Use a variable product with more than one option, such as size and color. Review the live product page, not only the product editor or a theme preview.

1. Read each option name and value. The group should say what the shopper is choosing, such as “Size,” and each value should be understandable, such as “Medium” or “Blue.” A swatch or image alone is not a clear name. If two values look similar, add text that distinguishes them.
2. Operate every choice with a keyboard. Use Tab to reach the option, Space or Enter where the control uses them, and arrow keys for radio-style choices. A native select usually opens with Space or Alt + Down and changes value with arrow keys. The focused control must have a visible indicator, and the chosen value must remain clear after focus moves away.
3. Change the selection and check the result. If price, stock, product image, delivery information, or an add-to-cart button changes, confirm the displayed information matches the selected combination. Try a different option and then return to the first one. An unavailable combination should be explained, not shown as though it can be purchased.
4. Confirm the selection in the cart. After adding the item, check that the cart names the chosen variant and shows the expected quantity and price. Change a cart option only if the shop offers that control, then confirm the updated choice is still clear.

From cart to order details

Review cart controls, checkout labels, and errors.

Use a staging shop or a safe test mode for error checks. Do not submit a live order or enter real payment details just to complete this review.

1. Check cart actions. Quantity fields, update buttons, remove links, coupon controls, and the path to checkout should have clear names and visible focus. After changing a quantity or removing an item, confirm the new total and cart contents are shown. A short “added” or “updated” message should identify the result.
2. Check checkout fields before typing. Each name, email, address, shipping, and other customer field should have a visible label. Required status, accepted formats, and instructions should be available before submission; a placeholder by itself is not a lasting label. Check that billing and shipping sections are clearly distinguished.
3. Check shipping and payment choices. Labels should say what each method is, and a selected method should be distinguishable without relying on color alone. If changing an address or shipping method updates costs or available choices, make sure the new total and next step are clear.
4. Check validation on staging. Leave a required field blank or enter an obviously invalid value, then continue only far enough to see the response. An error should identify the field and explain what to correct. Focus should make the problem easy to find; after correction, confirm the error clears or changes appropriately.
5. Check confirmation after an action. Add an item, apply a test coupon, or change shipping and observe how the page reports success or failure. If content updates without a full page load, the updated result should be perceivable without having to guess what changed.

Check the storefront as installed

Look for barriers added by themes or extensions.

Product swatches, quick-view popups, sticky add-to-cart bars, mini-cart drawers, checkout blocks, coupon tools, address suggestions, shipping selectors, and payment fields may be supplied or changed by a theme or extension. Review only the controls your shop actually uses, including after a theme or extension update.

• Open and close each menu, popup, or drawer. Check that its opener can be reached and activated by keyboard, focus moves into the opened surface in a sensible order, and a visible close control works. Try Escape when appropriate. When it closes, focus should return to the control that opened it, and keyboard use should continue on the page.
• Repeat checks on dynamic controls. Change a variant, quantity, address, shipping option, coupon, or payment method and wait for the result. Check that changed content does not cover the focused item, move focus unexpectedly, erase an unrelated choice, or leave old totals or instructions on screen.
• Check embedded payment or shipping controls separately. Confirm their visible labels, focus, keyboard operation, errors, and completion state in the actual checkout. A shop owner cannot confirm every internal behavior from how an embedded control looks; mark it for human review if a behavior is unclear or the frame prevents a reliable check.
• Compare the same path after changes. In staging, repeat the product, cart, and checkout checks after enabling or updating a relevant theme or extension. Note which version or setting changed so a new problem can be traced to the right owner.

Put the path together

Take one complete shopping journey without a mouse.

Start from a fresh product page and keep your hands off the mouse. Use a staging shop if the journey could change a real cart or order. Common keys are listed below; a custom control may use different keys, so note any instructions it provides.

1. Reach and open a product. Press Tab to move forward and Shift + Tab to move back through the store navigation. Use Enter on the product link. If a navigation menu opens on focus, check that its links are reachable and that Escape or the close control lets you leave it.
2. Select product variants. Tab to each option group. Use arrow keys for radio-style options, or Space/Enter to operate a button or swatch; use the select control’s own keyboard behavior for a dropdown. Confirm focus is visible and that the chosen size, color, price, and availability are clear.
3. Add the item. Tab to quantity and Add to cart. Adjust quantity with the control’s keys, then activate the button with Enter or Space. Check for a clear result. If a mini-cart drawer opens, move through its controls; close it with its close button or Escape where supported, and confirm focus returns to the opener.
4. Review the cart. Use Tab and Shift + Tab to reach item details, quantity, remove, coupon, and checkout controls. Make one safe change and confirm the item, chosen variant, and total update as expected.
5. Continue to checkout. Activate the checkout link or button. Tab through the customer fields and instructions in order; type into text fields, useSpace for checkboxes, and arrow keys for radio or select choices. Confirm labels, required hints, visible focus, and any updated shipping or payment details.
6. Check how to recover or leave. Use Shift + Tab to move back to an earlier field or choice. Open and close any remaining menu, dialog, or drawer. You should not become trapped, lose your place, or need the mouse to return to the page. Stop before placing an order or entering real payment information.