By default, WooCommerce displays payment methods on the checkout page as radio buttons. Each option shows its title, icon, and description in a stacked list. While this works fine for stores with two or three payment gateways, it can make the checkout page look cluttered if you have more options.

In this tutorial, we’ll replace the radio button layout with a clean dropdown select menu. This saves space on the checkout page and gives it a more streamlined look.

Before: Default Radio Button Layout

Here’s the standard WooCommerce checkout page showing payment methods as radio buttons with descriptions:

Step 1: Locate the Template File

Navigate to the WooCommerce checkout template directory at wp-content/plugins/woocommerce/templates/checkout/ and find the file review-order.php:

For a permanent, update-safe change, copy this file to your child theme at yourtheme/woocommerce/checkout/review-order.php and edit the copy instead.

Step 2: Find the Payment Gateway Loop

Open the file and find the foreach loop that outputs the radio buttons for each payment gateway:

Step 3: Replace With Dropdown Code

Replace the entire foreach block (the radio button code) with this dropdown version:

echo '<select name="payment_method">';

foreach ( $available_gateways as $gateway ) {
  ?>
  <option value="<?php echo
    esc_attr( $gateway->id ); ?>">
    <?php echo $gateway->get_title(); ?>
  </option>
  <?php
}

echo '</select>';

The Result

After saving the file and refreshing the checkout page, payment methods now appear as a compact dropdown menu:

Conclusion

Replacing WooCommerce’s payment radio buttons with a dropdown is a straightforward template edit that creates a cleaner, more compact checkout page. Just remember to use the child theme override method for production sites and be aware that gateway descriptions and icons won’t display in the dropdown format.

Frequently Asked Questions

Q: Will the payment gateway descriptions still show?

No. The dropdown only displays the gateway title. If you need descriptions, you could add them as title attributes on the <option> elements or show them conditionally with JavaScript when a gateway is selected.

Q: Does this work with payment gateways that have additional fields?

Some gateways (like PayPal or Stripe) show additional fields when selected (card number, etc.). With a dropdown, these fields won’t appear automatically. You’d need to add JavaScript to show the appropriate fields when the dropdown selection changes.

Q: Will this survive WooCommerce updates?

Only if you copy the template to your child theme. WooCommerce automatically uses template overrides from the child theme’s woocommerce/ directory.

Q: Can I style the dropdown to match my theme? Yes. The dropdown uses a standard HTML <select> element with the name payment_method. You can target it with CSS to match your theme’s design.