Add a checkbox below a specific shipping method in WooCommerce 3

Question

I'm trying to customize the WC checkout page. In my checkout page I've set 2 shipping methods. My goal is to add a custom field down below the first shipping method. To achieve this I used the hook I mentioned below.

woocommerce_after_shipping_rate

But my problem with this is, it just adds the same field for each shipping methods available. How can I manage to add an input field for a particular shipping method?

Directional

Answer 1

Using the $method argument that is an instance of the WC_Shipping_Rate Object you can target any shipping method Id using get_id() method, like in this example:

add_action( 'woocommerce_after_shipping_rate', 'checkout_shipping_additional_field', 20, 2 );
function checkout_shipping_additional_field( $method, $index )
{
    if( $method->get_id() == 'flat_rate:12' ){
        echo '<br>
        <input type="checkbox" name="shipping_custom_1" id="shipping_custom_1" value="1" class="shipping_method shipping_custom_1">
        <label for="shipping_custom_1">Custom label</label>';
    }
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

---

Similar answers:

• Shipping carrier custom fields validation in Woocommerce checkout page
• Dynamic shipping fee based on custom radio buttons in Woocommerce
• Update fee dynamically based on radio buttons in Woocommerce checkout

Stanfordstang

The issue with this is as soon as you select an option, the content disappears. Is there a way around this? – Callup