How can I adapt the following code to make it compatible with the new checkout block?
<code>function md_custom_woocommerce_checkout_fields( $fields )
{
$fields['order']['order_comments']['placeholder'] = 'Special notes';
$fields['order']['order_comments']['label'] = 'Add your special note';
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'md_custom_woocommerce_checkout_fields' );
</code>
<code>function md_custom_woocommerce_checkout_fields( $fields )
{
$fields['order']['order_comments']['placeholder'] = 'Special notes';
$fields['order']['order_comments']['label'] = 'Add your special note';
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'md_custom_woocommerce_checkout_fields' );
</code>
function md_custom_woocommerce_checkout_fields( $fields )
{
$fields['order']['order_comments']['placeholder'] = 'Special notes';
$fields['order']['order_comments']['label'] = 'Add your special note';
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'md_custom_woocommerce_checkout_fields' );
The new WooCommerce Checkout Block relies on React and JavaScript for rendering and customization. To extend its functionality, we need to use the WooCommerce Blocks Extensibility API.
Use below below script to Modify the order_comments Field in JavaScript-
<code>import { useCheckoutExtensionRegistration } from '@woocommerce/blocks checkout';
// Modify order comments field for WooCommerce Checkout Block.
useCheckoutExtensionRegistration(
'md-custom-checkout', // Unique identifier
() => {
wp.data.subscribe(() => {
const checkoutStore = wp.data.select('wc/store/checkout');
if (!checkoutStore) return;
const fields = checkoutStore.getCheckoutFields()?.order || {};
if (fields.order_comments) {
wp.data.dispatch('wc/store/checkout').updateCheckoutFields({
order: {
...fields,
order_comments: {
...fields.order_comments,
placeholder: 'Special notes',
label: 'Add your special note',
},
},
});
}
});
}
);
</code>
<code>import { useCheckoutExtensionRegistration } from '@woocommerce/blocks checkout';
// Modify order comments field for WooCommerce Checkout Block.
useCheckoutExtensionRegistration(
'md-custom-checkout', // Unique identifier
() => {
wp.data.subscribe(() => {
const checkoutStore = wp.data.select('wc/store/checkout');
if (!checkoutStore) return;
const fields = checkoutStore.getCheckoutFields()?.order || {};
if (fields.order_comments) {
wp.data.dispatch('wc/store/checkout').updateCheckoutFields({
order: {
...fields,
order_comments: {
...fields.order_comments,
placeholder: 'Special notes',
label: 'Add your special note',
},
},
});
}
});
}
);
</code>
import { useCheckoutExtensionRegistration } from '@woocommerce/blocks checkout';
// Modify order comments field for WooCommerce Checkout Block.
useCheckoutExtensionRegistration(
'md-custom-checkout', // Unique identifier
() => {
wp.data.subscribe(() => {
const checkoutStore = wp.data.select('wc/store/checkout');
if (!checkoutStore) return;
const fields = checkoutStore.getCheckoutFields()?.order || {};
if (fields.order_comments) {
wp.data.dispatch('wc/store/checkout').updateCheckoutFields({
order: {
...fields,
order_comments: {
...fields.order_comments,
placeholder: 'Special notes',
label: 'Add your special note',
},
},
});
}
});
}
);
1