In this article, we show how to customize many aspects of checkout steps and sub-step sections of Fluid Checkout using code snippets.
Change sub-step section titles #
With the code snippets below you can change the title for each sub-step section within the default checkout steps.
/**
* Change the contact substep title.
*/
function fluidcheckout_change_contact_substep_title( $title ) {
$title = __( 'Contact details', 'your-text-domain' );
return $title;
}
add_filter( 'fc_substep_title_contact', 'fluidcheckout_change_contact_substep_title', 10 );
/**
* Change the shipping address substep title.
*/
function fluidcheckout_change_shipping_address_substep_title( $title ) {
$title = __( 'Delivery address', 'your-text-domain' );
return $title;
}
add_filter( 'fc_substep_title_shipping_address', 'fluidcheckout_change_shipping_address_substep_title', 10 );
/**
* Change the shipping method substep title.
*/
function fluidcheckout_change_shipping_method_substep_title( $title ) {
$title = __( 'Delivery method', 'your-text-domain' );
return $title;
}
add_filter( 'fc_substep_title_shipping_method', 'fluidcheckout_change_shipping_method_substep_title', 10 );
/**
* Change the order notes substep title.
*/
function fluidcheckout_change_order_notes_substep_title( $title ) {
$title = __( 'Delivery instructions', 'your-text-domain' );
return $title;
}
add_filter( 'fc_substep_title_order_notes', 'fluidcheckout_change_order_notes_substep_title', 10 );
/**
* Change the gift options substep title.
*/
function fluidcheckout_change_gift_options_substep_title( $title ) {
$title = __( 'Sending as a gift?', 'your-text-domain' );
return $title;
}
add_filter( 'fc_substep_title_gift_options', 'fluidcheckout_change_gift_options_substep_title', 10 );
/**
* Change the billing address substep title.
*/
function fluidcheckout_change_billing_address_substep_title( $title ) {
$title = __( 'Billing address', 'your-text-domain' );
return $title;
}
add_filter( 'fc_substep_title_billing_address', 'fluidcheckout_change_billing_address_substep_title', 10 );
/**
* Change the coupon code substep title.
*/
function fluidcheckout_change_coupon_codes_substep_title( $title ) {
$title = __( 'Discount code', 'your-text-domain' );
return $title;
}
add_filter( 'fc_substep_title_coupon_codes', 'fluidcheckout_change_coupon_codes_substep_title', 10 );
/**
* Change the payment substep title.
*/
function fluidcheckout_change_payment_substep_title( $title ) {
$title = __( 'Pay with', 'your-text-domain' );
return $title;
}
add_filter( 'fc_substep_title_payment', 'fluidcheckout_change_payment_substep_title', 10 );If you are unsure about how to add code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website
Order summary section title #
Similarly to checkout sub-step sections, you can also change the title for the order summary section with the code snippet below:
/**
* Change the order summary section title.
*/
function fluidcheckout_change_order_summary_title( $title ) {
$title = __( 'Order review', 'your-text-domain' );
return $title;
}
add_filter( 'fc_order_review_title', 'fluidcheckout_change_order_summary_title', 10 );If you are unsure about how to add code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website
Change labels for the proceed to next step buttons #
With the code snippet below, you can change the label displayed for the “Proceed to <next_step>” buttons on the checkout page. For instance, you could change the button label from “Proceed to shipping” to “Proceed to delivery” to match a similar changes to the sub-step titles.
/**
* Changes the label for the "Proceed to <next step>" buttons.
*
* @param string The button label for the next step, related to the current step being processed. See parameter `$step_id`.
* @param string The step ID of the current step being processed.
* @param array The step arguments for the next step.
*/
function fluidcheckout_change_proceed_to_next_step_button_label ( $button_label, $step_id, $next_step_args ) {
// Change the button labels for each of the next steps,
// based on the step ID of the next step.
switch ( $next_step_args[ 'step_id' ] ) {
case 'shipping':
$button_label = __( 'Proceed to delivery', 'your-text-domain' );
break;
case 'billing':
$button_label = __( 'Proceed to invoicing', 'your-text-domain' );
break;
case 'payment':
$button_label = __( 'Proceed to pay', 'your-text-domain' );
break;
}
return $button_label;
}
add_filter( 'fc_proceed_to_next_step_button_label', 'fluidcheckout_change_proceed_to_next_step_button_label', 10, 3 );If you are unsure about how to add code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website
Change step titles (currently not used) #
With the code snippets below you can change the title for checkout steps, however, the step titles are not currently displayed on the frontend at the checkout page.
Below are the functions you can use to change each of the four default checkout steps: Contact, Shipping, Billing and Payment.
/**
* Change the contact step title
*/
function fluidcheckout_change_contact_step_title( $title ) {
$title = __( 'Contact details', 'your-text-domain' );
return $title;
}
add_filter( 'fc_step_title_contact', 'fluidcheckout_change_contact_step_title', 10 );
/**
* Change the shipping step title
*/
function fluidcheckout_change_shipping_step_title( $title ) {
$title = __( 'Shipping details', 'your-text-domain' );
return $title;
}
add_filter( 'fc_step_title_shipping', 'fluidcheckout_change_shipping_step_title', 10 );
/**
* Change the billing step title
*/
function fluidcheckout_change_billing_step_title( $title ) {
$title = __( 'Billing details', 'your-text-domain' );
return $title;
}
add_filter( 'fc_step_title_billing', 'fluidcheckout_change_billing_step_title', 10 );
/**
* Change the payment step title
*/
function fluidcheckout_change_payment_step_title( $title ) {
$title = __( 'Payment details', 'your-text-domain' );
return $title;
}
add_filter( 'fc_step_title_payment', 'fluidcheckout_change_payment_step_title', 10 );If you are unsure about how to add code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website
Similarly, you can use code snippets to change the title for each sub-step sections within the checkout steps.
Remove the shipping methods section #
If you only provide one way to ship products from your shop, you might want to remove the shipping methods section from the checkout page.
WooCommerce will set the first available shipping method as the chosen shipping method, so removing that section from the checkout page when only one shipping method is available will not prevent the purchase from being completed.
Please note that some plugins might change the way WooCommerce sets the chosen shipping methods and might cause an error on your checkout page that prevents users from completing their purchases. Use this code snippet with care.
Use the code snippet below to remove the shipping methods sub-step from the checkout page:
/**
* Remove the shipping methods section.
*/
function fluidcheckout_remove_shipping_methods_section() {
// Bail if Fluid Checkout steps class is not available
if ( ! class_exists( 'FluidCheckout_Steps' ) ) { return; }
// Bail if method is not available
if ( ! method_exists( 'FluidCheckout_Steps', 'unregister_checkout_substep' ) ) { return; }
// Remove shipping method sub-step
FluidCheckout_Steps::instance()->unregister_checkout_substep( 'shipping_method' );
}
add_filter( 'wp', 'fluidcheckout_remove_shipping_methods_section', 300 );If you are unsure about how to add code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website
Remove the shipping step #
Disable shipping entirely for your shop #
In most cases, disabling shipping in the WooCommerce settings will be enough to remove the shipping step, including the shipping methods and shipping address sub-steps.
- Go to WP Admin > WooCommerce > Settings > General.
- Locate the section “General options”.
- Set the field “Shipping location(s)” to “Disable shipping and shipping calculations”.
- Click the button “Save changes” at the bottom of the page.
Hide shipping step for purchases with only digital products or services which do not require shipping #
If your shop needs sells digital products or services which do not require shipping, as well as physical products which indeed need to be shipped. In this case, WooCommerce and Fluid Checkout will already show the shipping step only when shipping is needed for at least one of the products currently in the customer’s cart.
If the shipping step is still showing for an order with only digital products, check your product’s details in the product edit screen and check if they are marked as “virtual”.
- Go to WP Admin > Products > All products.
- Search for the product in question.
- Click to edit the product details.
- In the product edit screen, locate the section “Product data”.
- Check whether the product is marked as “Virtual”, which is used for digital products or services which do not require shipping.
Remove the shipping step from the checkout page #
In case your situation does not fall under the two scenarios above (disable shipping entirely, or hide shipping for virtual products) and you still need to remove the shipping step, you can use the code snippet below.
Please note that if shipping calculations or a shipping address are still required for the order to be completed, removing the shipping step will likely prevent customers from completing their purchase as the checkout validation will fail when they try to place the order.
/**
* Remove the shipping step.
*/
function fluidcheckout_remove_shipping_step() {
// Bail if steps class not available
if ( ! class_exists( 'FluidCheckout_Steps' ) ) { return; }
FluidCheckout_Steps::instance()->unregister_checkout_step( 'shipping' );
}
add_action( 'fc_register_steps', 'fluidcheckout_remove_shipping_step', 300 );If you are unsure about how to add code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website
Remove the billing step #
During our research phase, we identified many situations where the customer would skip setting the billing address when it was supposed to be different than the shipping address. For that reason, we decided to create a specific step for the billing address.
While creating a separate step for billing resolved the problem for cases where the billing address was different than shipping, not every shop has a majority of customers which ship to a different address.
Please note that moving the billing step or otherwise only the billing address sub-step to before the shipping address is not currently supported by Fluid Checkout.
In future version of Fluid Checkout PRO, we’ll add options in the plugin settings to let you customize how the billing information is requests without the use of code snippets.
For now, we show some ways you can change how the billing information is requested on your checkout page.
Move billing address to the shipping step #
Use the code snippet below to move the billing address sub-step to right below the shipping address in the shipping step.
/**
* Move billing substep to shipping step.
*/
function fluidcheckout_move_billing_address_shipping_step() {
// Bail if steps class not available
if ( ! class_exists( 'FluidCheckout_Steps' ) ) { return; }
// Bail if shipping step is not available
if ( ! function_exists( 'WC' ) || ! WC()->cart || ! WC()->cart->needs_shipping() ) { return; }
remove_action( 'fc_output_step_billing', array( FluidCheckout_Steps::instance(), 'output_substep_billing_address' ), 10 );
add_action( 'fc_output_step_shipping', array( FluidCheckout_Steps::instance(), 'output_substep_billing_address' ), 30 );
}
add_action( 'wp', 'fluidcheckout_move_billing_address_shipping_step', 300 );
/**
* Remove the billing step, only if the shipping is needed.
*/
function fluidcheckout_remove_billing_step_when_moved_to_shipping() {
// Bail if steps class not available
if ( ! class_exists( 'FluidCheckout_Steps' ) ) { return; }
// Bail if shipping step is not available
if ( ! function_exists( 'WC' ) || ! WC()->cart || ! WC()->cart->needs_shipping() ) { return; }
FluidCheckout_Steps::instance()->unregister_checkout_step( 'billing' );
}
add_action( 'fc_register_steps', 'fluidcheckout_remove_billing_step_when_moved_to_shipping', 300 );If you are unsure about how to add code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website
Move billing address to the payment step #
Use the code snippet below to move the billing address sub-step to right below the shipping address in the shipping step.
/**
* Move billing substep to payment step.
*/
function fluidcheckout_move_billing_address_payment_step() {
// Bail if steps class not available
if ( ! class_exists( 'FluidCheckout_Steps' ) ) { return; }
remove_action( 'fc_output_step_billing', array( FluidCheckout_Steps::instance(), 'output_substep_billing_address' ), 10 );
add_action( 'fc_output_step_payment', array( FluidCheckout_Steps::instance(), 'output_substep_billing_address' ), 30 );
}
add_action( 'wp', 'fluidcheckout_move_billing_address_payment_step', 300 );
/**
* Remove the billing step.
*/
function fluidcheckout_remove_billing_step() {
// Bail if steps class not available
if ( ! class_exists( 'FluidCheckout_Steps' ) ) { return; }
FluidCheckout_Steps::instance()->unregister_checkout_step( 'billing' );
}
add_action( 'fc_register_steps', 'fluidcheckout_remove_billing_step', 300 );If you are unsure about how to add code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website
Remove billing step, and move billing name fields to contact step #
If you only sell virtual products and do not require a full address to process payments or issue invoices, you might want to remove the billing address from your checkout page while moving the billing name fields to the contact step. This way you can streamline your checkout process and only ask for the required information.
Use the code snippet below to move the billing name fields to the contact step and remove the billing step:
/**
* Move billing name fields to the contact substep.
*/
function fluidcheckout_move_billing_name_fields_to_contact_substep( $contact_field_ids ) {
// Note: Uncomment the line below to move billing name fields before existing contact fields
// $contact_field_ids = array_merge( array( 'billing_first_name', 'billing_last_name' ), $contact_field_ids );
// Move fields after existing contact fields
// Comment the line below if you want to move billing name fields before the existing contact fields
$contact_field_ids = array_merge( $contact_field_ids, array( 'billing_first_name', 'billing_last_name' ) );
return $contact_field_ids;
}
add_filter( 'fc_checkout_contact_step_field_ids', 'fluidcheckout_move_billing_name_fields_to_contact_substep', 10 );
/**
* Remove billing fields, except email.
*/
function fluidcheckout_remove_billing_fields( $fields ) {
unset( $fields[ 'billing_company' ] );
unset( $fields[ 'billing_phone' ] );
unset( $fields[ 'billing_address_1' ] );
unset( $fields[ 'billing_address_2' ] );
unset( $fields[ 'billing_city' ] );
unset( $fields[ 'billing_state' ] );
unset( $fields[ 'billing_country' ] );
unset( $fields[ 'billing_postcode' ] );
// Note: uncomment the lines below to also remove the billing first and last name fields
// unset( $fields[ 'billing_first_name' ] );
// unset( $fields[ 'billing_last_name' ] );
return $fields;
}
add_filter( 'woocommerce_billing_fields', 'fluidcheckout_remove_billing_fields', 300 );
/**
* Remove the billing step.
*/
function fluidcheckout_remove_billing_step() {
// Bail if steps class not available
if ( ! class_exists( 'FluidCheckout_Steps' ) ) { return; }
FluidCheckout_Steps::instance()->unregister_checkout_step( 'billing' );
}
add_action( 'fc_register_steps', 'fluidcheckout_remove_billing_step', 300 );
/**
* Set billing same as shipping to `false` always.
*/
add_filter( 'fc_is_billing_same_as_shipping_checked', '__return_false' );If you are unsure about how to add code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website