Facebook Pixel

WooCommerce Hooks for cart editing seem to no longer work


WooCommerce Hooks for cart editing seem to no longer work

With the arrival of the Gutenberg editor, the WordPress ecosystem has evolved towards a block-based development approach. This transition does not stop at the content editor. But, it also extends to WooCommerce. Indeed, WooCommerce has introduced blocks for the cart, my account and order pages. While these blocks modernize the user experience, they also bring significant changes that can pose challenges for developers. The WooCommerce Hooks for cart modification seem to no longer work. In this article, we will talk about our observation. Then, we will see some possible solutions for using WooCommerce hooks.

The impact of migrating to blocks on WooCommerce filters

One of the major issues we've seen with this migration is the loss of compatibility with filters and hooks. As you know, WooCommerce uses these options to customize the cart and checkout page. Historically, WooCommerce allowed developers to use a wide range of filters to modify or add custom fields on these pages. However, since the introduction of blocks, many of these filters no longer work as expected.

Our team recently ran into this issue when a company approached us to add the tip option and other custom fields to the checkout page. We were confident and assured the client that it would be quick to implement. We had done this task many times in the past. But to our surprise, none of our attempts worked. From this experience, we found that the commonly used WooCommerce filters for the cart and checkout are no longer supported in the new block-based pages.

Examples of non-working WooCommerce filters

Here are some examples of commonly used filters to customize the checkout page. They don't seem to work anymore with the new WooCommerce blocks:

  • woocommerce_before_checkout_form : Used to add content before the checkout form.
  • woocommerce_checkout_fields : Allows you to edit the fields of the order form.
  • woocommerce_after_checkout_form : Used to add content after the checkout form.
  • woocommerce_cart_item_price : Filter to change the price of an item in the cart.

These hooks and filters were previously essential for features like:

  • adding custom fields,
  • changing prices in the shopping cart,
  • or adding specific notes to the order.

However, with the new block architecture, these actions are no longer supported in the same way. This causes problems for developers used to these methods.

What we discovered while searching for solutions

While searching for answers on Google, we quickly discovered that we weren’t alone in facing this situation. Several other companies and developers have encountered the same problem. Among the resources we consulted, the following discussions were particularly relevant:

  • StackOverflow question : Many developers are expressing frustration that hooks are no longer triggered with the WooCommerce blocks update.
  • GitHub Discussion : An issue opened by several users highlighting the lack of filter support in the new WooCommerce blocks.

WooCommerce Team Response

In response to this feedback, the WooCommerce team acknowledged the issue and explained that the checkout block does not yet support traditional filters. However, they assured that solutions are being developed. They plan to implement filter compatibility options in a future update. This response is encouraging, but for now, developers have to deal with this limitation.

Temporary solutions to work around the problem

Until WooCommerce restores filter support, there are a few workarounds you can consider to work around these limitations:

1 – Disable WooCommerce blocks to revert to the old system

If your site does not depend on the new WooCommerce blocks, you can disable the use of blocks. This will re-enable the old filters.

 add_filter( 'woocommerce_blocks_checkout_is_enabled', '__return_false' ); add_filter( 'woocommerce_blocks_cart_is_enabled', '__return_false' );

2 – Use third-party plugins

Some plugin developers have already started to fill this gap by offering solutions that allow adding custom fields. Some examples:

  • Checkout Field Editor for WooCommerce
  • WooCommerce Blocks Customizer
  • Flexible Checkout Fields

3 – Use WooCommerce shortcode for order page

WooCommerce provides a shortcode to display the classic checkout page, which is still compatible with WooCommerce filters. You can use it in a custom page or template of your theme.

  • Shortcode to display the order page:

 [woocommerce_checkout]

You can replace WooCommerce blocks with this shortcode to restore compatibility with filters.

Add custom fields via filters (which work with the shortcode)

Once you have enabled the shortcode on the checkout page, you can add your custom fields as before, using the classic WooCommerce filters, for example to add a tip field.

  • Example of adding a tip field:
 // Ajouter un champ pourboire sur le formulaire de commande add_action( 'woocommerce_after_order_notes', 'ajouter_champ_pourboire' ); function ajouter_champ_pourboire( $checkout ) { echo '<div id="champ_pourboire"><h3>' . __('Ajouter un pourboire') . '</h3>'; woocommerce_form_field( 'tip_amount', array( 'type' => 'number', 'class' => array('form-row-wide'), 'label' => __('Montant du pourboire'), 'placeholder' => __('Entrez un montant'), ), $checkout->get_value( 'tip_amount' )); echo '</div>'; }
  • Tip field validation:
 // Valider le champ pourboire add_action('woocommerce_checkout_process', 'valider_champ_pourboire'); function valider_champ_pourboire() { if ( ! $_POST['tip_amount'] || $_POST['tip_amount'] < 0 ) wc_add_notice( __( 'Veuillez entrer un montant valide pour le pourboire.' ), 'error' ); }
  • Save tip value with order:
 // Sauvegarder le pourboire add_action( 'woocommerce_checkout_update_order_meta', 'sauvegarder_pourboire' ); function sauvegarder_pourboire( $order_id ) { if ( ! empty( $_POST['tip_amount'] ) ) { update_post_meta( $order_id, '_tip_amount', sanitize_text_field( $_POST['tip_amount'] ) ); } }

Contribute to WooCommerce Blocks

If you are comfortable with open-source development, you can contribute to the WooCommerce Blocks project by suggesting improvements or submitting pull requests to facilitate the addition of new features and filters.

Conclusion

The current lack of support for these filters in order blocks can be frustrating, but there are workarounds to keep your pages flexible while you wait for the promised updates from WooCommerce. As developers, it’s essential to stay up-to-date with changes in the WordPress and WooCommerce ecosystem. You can also adapt your work methods accordingly. We hope this article has helped you understand the current situation and find alternatives while you wait for full support for filters in WooCommerce blocks.

Leave a comments:

We use cookies to ensure that we give you the best experience on our website. By continuing to use this site, you consent to our use of cookies. ... Our policy