WooCommerce Shipping Methods as a Dropdown List

In this tutorial we’ll convert the WooCommerce checkout shipping methods to a drop-down list, or pill-style buttons. We’ll use a standard WordPress method to enqueue some front-end assets, and some jQuery magic to dynamically create a drop-down list. The code is all copy-and-paste, and it’s easy to customise it to your store’s specific needs.

Break Down the Problem

There’s a lot going on with the WooCommerce checkout that we don’t want to break. When the customer changes their billing/shipping details, the list of shipping methods changes dynamically, i.e. without a whole-page reload. So… we want to leave all the standard WooCommerce stuff in there so everything keeps working.

The Pill Buttons

This is easy. We can just the find input[type="radio"] elements and apply some CSS to their labels.

When a label immediately follows an input element…

<li>
	<input id="ctl1" type="radio" />
	<label for="ctl1">Pill One</label>
</li>

…we can use CSS like this to hide the radio button and make the label look like a pill button.

li input[type="radio"] {
	display: none;
}

li input[type="radio"]+label {
	background-color: white;
	border: 1px solid grey;
	color: black;
}

li input[type="radio"]:checked+label {
	background-color: lightgreen;
}

Although we’re hiding the actual radio button, the label is connected to it with for="ctl1" and the label itself is clickable.

The Dropdown List

We’re going to watch for a WooCommerce JavaScript event called “updated_checkout”. Whenever this fires, our script will search the DOM for all shipping methods defined by input[type="radio"] elements.

If we don’t find any radio buttons, there are no valid shipping methods so we don’t need to do anything. But, if we find one or more radio buttons, we’ll create a <select> element, add some <option> nodes based on the radio elements, and inject it into the table cell after the input elements. We’ll end up with this:

Then all we have to do is detect when the drop-down list changes state, and programmatically trigger a “click” event on the relevant radio button. WooCommerce will detect that the radio button has been “clicked” and do whatever it needs to do.

When we’re happy that it’s working, we can hide the default radio buttons with some simple CSS.

Let’s Write the PHP Core

Because we’re doing most of this with CSS & JS, all we need to do is hook the wp_enqueue_scripts action, see if we’re on the checkout page and then enqueue either the Pills assets, or the Dropdown List assets… depending on which one we want.

In your child theme, create a new file called wpt-customise-shipping-rates.php and paste the following into it.

<?php

/**
 * WP Tutorials : Customise WooCommerce Shipping Rates Layout, CWSRL
 *
 * https://wp-tutorials.tech/refine-wordpress/woocommerce-shipping-methods-as-a-dropdown-list/
 */

// Block direct access
defined('WPINC') || die();

/**
 * Valid values for CWSRL_MODE:
 *    pills
 *    dropdown
 *    empty|default|anything-else
 */
const CWSRL_MODE = 'pills';

/**
 * Set this to true if you want to see how the drop-down list interacts with
 * the built-in radio buttons. Useful for testing.
 */
const CWSRL_ENABLE_DIAGNOSTICS = false;

function cwsrl_enqueue_scripts() {
	$theme_version = wp_get_theme()->get('Version');
	$base_uri = get_stylesheet_directory_uri();
	$handle = 'cwsrl';

	if (!function_exists('WC') || (!is_checkout() && !is_cart())) {
		// Either WooCommerce is not installed, or we're not on the checkout/cart pages.
	} elseif (CWSRL_MODE == 'pills') {
		wp_enqueue_style(
			$handle,
			$base_uri . '/wpt-customise-shipping-rates/customise-shipping-rates-pills.css',
			null, // No style dependencies
			$theme_version
		);
	} elseif (CWSRL_MODE == 'dropdown') {
		if (!CWSRL_ENABLE_DIAGNOSTICS) {
			wp_enqueue_style(
				$handle,
				$base_uri . '/wpt-customise-shipping-rates/customise-shipping-rates-dropdown.css',
				null, // No style dependencies
				$theme_version
			);
		}

		wp_enqueue_script(
			$handle,
			$base_uri . '/wpt-customise-shipping-rates/customise-shipping-rates-dropdown.js',
			array('jquery'),
			$theme_version
		);
	} else {
		// Pass through - normal behaviour.
	}
}
add_action('wp_enqueue_scripts', 'cwsrl_enqueue_scripts');

Notice how we’ve got two constants that control how the code will work, CWSRL_MODE and CWSRL_ENABLE_DIAGNOSTICS. If we’re in “pills” mode then all we do is enqueue a CSS file. But if we want “dropdown” mode, we need to enqueue some JavaScript as well as a small CSS file.

Next, open your child theme‘s functions.php and add the following couple of lines:

// WP Tutorials : Customise WooCommerce Shipping Rates Layout,
require_once dirname(__FILE__) . '/wpt-customise-shipping-rates.php';

Now we just need to create the placeholders for our CSS & JS. Create a folder called “wpt-customise-shipping-rates” and put three empty text files in there:

• customise-shipping-rates-dropdown.css
• customise-shipping-rates-dropdown.js
• customise-shipping-rates-pills.css

Shipping Method Pills

This one is easy – it’s just a bit of CSS. Open “wpt-customise-shipping-rates/customise-shipping-rates-pills.css” and paste the following into it:

/**
 * WP Tutorials : Customise WooCommerce Shipping Rates Layout, CWSRL
 *
 * https://wp-tutorials.tech/refine-wordpress/woocommerce-shipping-methods-as-a-dropdown-list/
 */

.woocommerce ul#shipping_method {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.woocommerce ul#shipping_method li {
	position: relative;
	text-indent: unset !important; /* Fix an Astra issue */
}

/* Hide the default input[type="radio"] controls */
.woocommerce ul#shipping_method li input {
	display: none;
}

.woocommerce ul#shipping_method li input+label {
	padding: 0.5em;
	background-color: #fefefe;
	display: block;
	cursor: pointer;
	border: 1px solid #7209b7;
	text-align: center;
}

.woocommerce ul#shipping_method li input:checked+label {
	padding: 0.5em;
	background-color: #7209b7;
	color: white;
	border-color: #39045b;
}

Save that, make sure that CWSRL_MODE='pills' in your PHP file and then go to your checkout page. If it’s not working, check your JavaScript console for errors – primarily, make sure the CSS file has loaded correctly. If it’s not loaded, you’ll see an error about a 404, or something similar.

Shipping Method Dropdown List

Open “wpt-customise-shipping-rates/customise-shipping-rates-dropdown.js” and paste this JavaScript code into it.

/**
 * WP Tutorials : Customise WooCommerce Shipping Rates Layout, CWSRL
 *
 * https://wp-tutorials.tech/refine-wordpress/woocommerce-shipping-methods-as-a-dropdown-list/
 */
(function($) {
	'use strict';
	$(window).on('load', function() {
		// Diagnostics
		// console.log(`CWSRL: load (dropdown)`);

		function updateShippingMethodsDropdown() {

			// Diagnostics
			// console.log('updateShippingMethodsDropdown()');

			const radioInputs = $('#shipping_method input[type="radio"].shipping_method');
			const shippingMethodContainer = $(radioInputs).closest('#shipping_method');
			const radioInputCount = $(radioInputs).length;
			const shippingMethodTableCell = $(shippingMethodContainer).closest('td');

			// If there exists a drop-down list form a previous iteration,
			// get rid of it now.
			$(shippingMethodTableCell).find('.wpt-shipping-methods').remove();

			if (radioInputCount > 0) {
				// Create a new drop-down list.
				const select = $('<select class="wpt-shipping-methods"></select>');
				$(shippingMethodTableCell).append(select);

				$(radioInputs).each(function(index, el) {
					const radioInput = $(this);
					const listItem = $(this).closest('li');
					const shippingMethodLabel = $(listItem).find('label');

					// Diagnostics
					// console.log(shippingMethodLabel.text());

					// Create an option and append it to our drop-down list, using
					// the value and text of the radio button and its label.
					const shippingMethodOption = $('<option></option>');
					shippingMethodOption.text(shippingMethodLabel.text());
					shippingMethodOption.val(radioInput.val());
					$(select).append(shippingMethodOption);

					if (radioInput.is(':checked')) {
						$(select).val(radioInput.val());
					}
				});

				$(select).change(function(event) {
					const newValue = $(this).val();

					// Diagnostics
					// console.log(`Change: ${newValue}`);

					$(`input[value="${newValue}"]`).trigger('click');
				});
			}
		}

		/**
		 * When WooCommerce fires the updated_checkout event, we need to rescan
		 * for shipping method radio buttons and destroy/recreate our drop-down list.
		 */
		$(document.body).on('updated_checkout', function() {
			// Diagnostics.
			// console.log('updated_checkout');
			updateShippingMethodsDropdown();
		});
	});
})(jQuery);

It might look like a bit of a lump, but it’s quite spaced-out and a bunch of lines are console.log(...) diagnostics. The core function is updateShippingMethodsDropdown() and it runs like this:

• Search the DOM for core elements such as the shipping method radio buttons.
• If there’s a drop-down list (one of ours) from a previous iteration, remove it from the DOM now.
• If there are one or more shipping method radio buttons, then…
  • Create a new <select> element and append it to the DOM, after the radio buttons.
  • For each radio button…
    • Create a new <option> element.
    • Set its text and value based on the radio button’s value in its label’s text.
    • Append the new option to the <select> element.
  • When the value of the <select> element changes, then…
    • Find the relevant radio button and trigger a “click” event.

The only fiddly thing that’s going on is responding to WooCommerce’s “updated_checkout” event. If you want to understand the cycle of events in more detail, uncomment the diagnostic console.log() lines and have a play.

Featured plugin

Replace the WooCommerce product variation drop-downs with user-focused, mobile-friendly radio/pill buttons. Create a cleaner product page and boost the user experience of your store!

Product radio buttons for WooCommerce

Now you can switch to drop-down layout by setting CWSRL_MODE='dropdown' near the top of the main PHP file, like this:

/**
 * Valid values for CWSRL_MODE:
 *    pills
 *    dropdown
 *    empty|default|anything-else
 */
const CWSRL_MODE = 'dropdown';

When you’re happy that it’s working properly, put the following into “wpt-customise-shipping-rates/customise-shipping-rates-dropdown.css“.

/**
 * WP Tutorials : Customise WooCommerce Shipping Rates Layout, CWSRL
 *
 * https://wp-tutorials.tech/refine-wordpress/woocommerce-shipping-methods-as-a-dropdown-list/
 */

.woocommerce ul#shipping_method {
	display: none;
}

/* Add your custom drop-down list CSS here */
/* ... */

And there you have it. An easy way to customise the shipping method chooser in your WooCommerce checkout. Have fun with your shipping 😎 👍

Like This Tutorial?

Upvote this tutorial ---

Downvote this tutorial ---

Let us know