Woocommerce – How to add settings fields to existing or newly created shipping methods programmatically
As an ecommerce platform, WooCommerce provides a wide range of shipping options to meet the diverse needs of online businesses. However, sometimes the default shipping methods may not be enough, and you may need to create custom shipping methods with additional settings fields. In this blog post, we'll explore how you can add custom settings fields to existing or newly created shipping methods in WooCommerce programmatically.
Understanding the WooCommerce Shipping Method API
WooCommerce provides a flexible Shipping Method API that allows you to create, modify, and interact with shipping methods. The main class responsible for shipping methods is WC_Shipping_Method
, which you can extend to create your custom shipping methods.
The WC_Shipping_Method
class has several methods that you can override to customize the behavior of your shipping method, including:
__construct()
: This is the constructor method, where you can set the ID, title, and other properties of your shipping method.
init()
: This method is called to initialize the shipping method, and it's where you can load the settings API and define your custom settings fields.
init_form_fields()
: This method is used to define the settings fields for your shipping method.
calculate_shipping()
: This method is called to calculate the shipping cost for a given package.
Adding a Custom Setting Field to a Shipping Method
Let's take a look at the example code you provided, which demonstrates how to create a custom shipping method with an additional "Code" setting field:
function imp_shipping_method_init() {
class Imp_WC_Pickup_Shipping_Method extends WC_Shipping_Method {
// ...
public function init_form_fields() {
$this->form_fields = array(
'enabled' => array(
'title' => __( 'Enable/Disable', 'woocommerce' ),
'type' => 'checkbox',
'default' => 'yes'
),
'title' => array(
'title' => __( 'Method Title', 'woocommerce' ),
'type' => 'text',
'description' => __( 'This controls the title which the user sees during checkout.', 'woocommerce' ),
'default' => __( 'Custom Shipping Method', 'woocommerce' ),
'desc_tip' => true,
),
'code' => array(
'title' => __( 'Code', 'woocommerce' ),
'type' => 'text',
'description' => __( 'Code', 'woocommerce' ),
'default' => __( 'Code', 'woocommerce' ),
'desc_tip' => true,
),
);
}
// ...
}
}
add_action( 'woocommerce_shipping_init', 'imp_shipping_method_init' );
function add_your_shipping_method( $methods ) {
$methods[] = 'Imp_WC_Pickup_Shipping_Method';
return $methods;
}
add_filter( 'woocommerce_shipping_methods', 'add_your_shipping_method' );
In this example, the init_form_fields()
method is used to define the settings fields for the custom shipping method. The 'code'
field is added as an additional setting field, which can be accessed and used in other parts of your code.
After registering the custom shipping method, you can find the new method and the "Code" setting field on the WooCommerce Settings > Shipping tab.
Accessing the Custom Setting Field
To access the value of the custom "Code" setting field, you can use the following code in your template files (e.g., cart-shipping.php
):
$shipping_methods = WC()->shipping->get_shipping_methods();
foreach ( $shipping_methods as $key => $shipping_method ) {
$code = $shipping_method->settings->code;
}
This code iterates through the available shipping methods and retrieves the value of the "Code" setting field for each method.
Deregistering Default Shipping Methods and Registering Custom Ones
In addition to adding custom settings fields to existing shipping methods, you can also deregister the default WooCommerce shipping methods and register your own custom methods with the same functionality, but with the added "Code" setting field.
To do this, you can use the woocommerce_shipping_methods
filter to remove the default shipping methods and add your custom methods:
// Deregister default shipping methods
function remove_default_shipping_methods( $methods ) {
unset( $methods['flat_rate'] );
unset( $methods['free_shipping'] );
unset( $methods['local_pickup'] );
return $methods;
}
add_filter( 'woocommerce_shipping_methods', 'remove_default_shipping_methods', 100 );
// Register custom shipping methods
function add_custom_shipping_methods( $methods ) {
$methods['my_custom_method'] = 'My_Custom_Shipping_Method';
return $methods;
}
add_filter( 'woocommerce_shipping_methods', 'add_custom_shipping_methods', 101 );
In this example, the default shipping methods (flat_rate
, free_shipping
, and local_pickup
) are first removed using the remove_default_shipping_methods()
function. Then, the custom shipping method My_Custom_Shipping_Method
is registered using the add_custom_shipping_methods()
function.
By following this approach, you can create custom shipping methods with additional settings fields and replace the default WooCommerce shipping methods with your own custom ones.
Remember that when working with the WooCommerce Shipping Method API, it's essential to thoroughly test your changes to ensure they are compatible with your WooCommerce setup and don't cause any conflicts or issues.
Flowpoint.ai can help you identify all the technical errors that are impacting conversion rates on your WooCommerce website and directly generate recommendations to fix them, including optimizing your shipping methods and settings
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.