The code snippet below demonstrates how to set up a one-page checkout for WooCommerce. This functionality can be useful for improving the user experience by reducing the number of steps required to complete a purchase.
/**
* Enable one-page checkout for WooCommerce.
*/
function wpsnippets_enable_one_page_checkout() {
// Remove default checkout fields
add_filter( 'woocommerce_checkout_fields', 'wpsnippets_remove_checkout_fields' );
// Move order notes field to the bottom
add_filter( 'woocommerce_checkout_fields', 'wpsnippets_move_order_notes_field' );
// Disable shipping calculator
add_filter( 'woocommerce_cart_ready_to_calc_shipping', '__return_false', 99 );
// Automatically update order review section
add_action( 'woocommerce_checkout_update_order_review', 'wpsnippets_update_order_review' );
// Remove unnecessary checkout notices
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_payment', 10 );
}
add_action( 'init', 'wpsnippets_enable_one_page_checkout' );
/**
* Remove unnecessary checkout fields.
*
* @param array $fields The checkout fields.
* @return array The modified checkout fields.
*/
function wpsnippets_remove_checkout_fields( $fields ) {
unset( $fields['billing']['billing_company'] );
unset( $fields['billing']['billing_address_2'] );
unset( $fields['shipping']['shipping_company'] );
unset( $fields['shipping']['shipping_address_2'] );
return $fields;
}
/**
* Move order notes field to the bottom.
*
* @param array $fields The checkout fields.
* @return array The modified checkout fields.
*/
function wpsnippets_move_order_notes_field( $fields ) {
$order_notes = $fields['order']['order_comments'];
unset( $fields['order']['order_comments'] );
$fields['order']['order_comments'] = $order_notes;
return $fields;
}
/**
* Update order review section when the checkout form is updated.
*/
function wpsnippets_update_order_review() {
woocommerce_order_review();
}
This code snippet includes several functions that modify the WooCommerce checkout process to enable a one-page checkout. It removes unnecessary checkout fields, moves the order notes field to the bottom, disables the shipping calculator, and updates the order review section when the checkout form is updated.
To implement this code, you can add it to your theme’s functions.php file or create a custom plugin. Once the code is added, the one-page checkout functionality will be enabled for your WooCommerce store.
Examples
Example 1: Adding a One-Page Checkout Template
This example demonstrates how to add a custom one-page checkout template to your WooCommerce store. The code snippet below creates a new template file named one-page-checkout.php and adds it to your theme’s directory under the woocommerce folder.
<?php
/**
* Template Name: One-Page Checkout
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since Twenty Twenty-One 1.0
*/
defined( 'ABSPATH' ) || exit;
get_header();
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
wc_print_notices();
do_action( 'woocommerce_before_checkout_form', $checkout );
// Display the checkout form
woocommerce_checkout();
do_action( 'woocommerce_after_checkout_form', $checkout );
get_footer();
To use this template, create a new page in WordPress and assign the “One-Page Checkout” template to it. This will display a one-page checkout layout on that page.
Example 2: Customizing One-Page Checkout Fields
This example demonstrates how to customize the fields displayed on the one-page checkout form. The code snippet below removes the billing address fields and adds a custom field for the customer’s phone number.
<?php
/**
* Remove billing fields and add phone number field to one-page checkout
*/
function wpsnippets_custom_checkout_fields( $fields ) {
// Remove billing address fields
unset( $fields['billing']['billing_address_1'] );
unset( $fields['billing']['billing_address_2'] );
unset( $fields['billing']['billing_city'] );
unset( $fields['billing']['billing_postcode'] );
unset( $fields['billing']['billing_country'] );
unset( $fields['billing']['billing_state'] );
// Add phone number field
$fields['billing']['billing_phone'] = array(
'label' => __( 'Phone Number', 'woocommerce' ),
'placeholder' => __( 'Enter your phone number', 'woocommerce' ),
'required' => true,
'class' => array( 'form-row-wide' ),
'clear' => true,
);
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wpsnippets_custom_checkout_fields' );
Add this code to your theme’s functions.php file or a custom plugin. It removes the billing address fields and adds a new phone number field to the one-page checkout form.
Example 3: Customizing One-Page Checkout Button Text
This example demonstrates how to customize the text displayed on the one-page checkout button. The code snippet below changes the button text to “Place Order Now”.
<?php
/**
* Customize one-page checkout button text
*/
function wpsnippets_custom_checkout_button_text( $button_text ) {
return __( 'Place Order Now', 'woocommerce' );
}
add_filter( 'woocommerce_order_button_text', 'wpsnippets_custom_checkout_button_text' );
Add this code to your theme’s functions.php file or a custom plugin. It modifies the button text displayed on the one-page checkout form to “Place Order Now”.