WooCommerce – Ryan Aby

WooCommerce, the popular eCommerce plugin for WordPress, offers a variety of JavaScript events that developers can utilize to create dynamic, responsive user experiences. These events allow developers to hook into different points of the WooCommerce lifecycle, from the cart page to the checkout process and beyond. Understanding and using these events can significantly enhance the functionality of a WooCommerce store.

WooCommerce Checkout JavaScript Events

During the checkout process, several JavaScript events are triggered to manage different stages and actions. Here’s a list of key checkout events:

1. init_checkout: Triggered when the checkout process initializes.

$( document.body ).trigger( 'init_checkout' );

2. payment_method_selected: Triggered when a payment method is selected.

$( document.body ).trigger( 'payment_method_selected' );

3. update_checkout: Triggered when the checkout needs to be updated.

$( document.body ).trigger( 'update_checkout' );

4. updated_checkout: Triggered after the checkout has been updated.

$( document.body ).trigger( 'updated_checkout' );

5. checkout_error: Triggered when there is an error during checkout.

$( document.body ).trigger( 'checkout_error' );

WooCommerce Cart Page JavaScript Events

The cart page also has specific events that can be used to manage various interactions and updates:

1. wc_cart_emptied: Triggered when the cart is emptied.

$( document.body ).trigger( 'wc_cart_emptied' );

2. update_checkout: Same as the checkout page, used to update the checkout process from the cart page.

$( document.body ).trigger( 'update_checkout' );

3. updated_wc_div: Triggered when the cart’s DOM elements are updated.

$( document.body ).trigger( 'updated_wc_div' );

4. updated_cart_totals: Triggered when the cart totals are updated.

$( document.body ).trigger( 'updated_cart_totals' );

5. country_to_state_changed: Triggered when the country selection changes the state options.

$( document.body ).trigger( 'country_to_state_changed' );

6. updated_shipping_method: Triggered when the shipping method is updated.

$( document.body ).trigger( 'updated_shipping_method' );

7. applied_coupon: Triggered when a coupon is applied.

$( document.body ).trigger( 'applied_coupon', [ coupon_code ] );

8. removed_coupon: Triggered when a coupon is removed.

$( document.body ).trigger( 'removed_coupon', [ coupon ] );

WooCommerce Single Product Page JavaScript Events

For single product pages, events are triggered to manage the initialization and interactions of product tabs and ratings:

1. init: Triggered when the single product tabs or ratings are initialized.

$( '.wc-tabs-wrapper, .woocommerce-tabs, #rating' ).trigger( 'init' );

WooCommerce Add to Cart JavaScript Events

Adding products to the cart involves several events to manage the process:

1. adding_to_cart: Triggered when a product is being added to the cart.

$( document.body ).trigger( 'adding_to_cart', [ $thisbutton, data ] );

2. added_to_cart: Triggered after a product is added to the cart.

$( document.body ).trigger( 'added_to_cart', [ response.fragments, response.cart_hash, $thisbutton ] );

3. removed_from_cart: Triggered when a product is removed from the cart.

$( document.body ).trigger( 'removed_from_cart', [ response.fragments, response.cart_hash, $thisbutton ] );

4. wc_cart_button_updated: Triggered when the cart button is updated.

$( document.body ).trigger( 'wc_cart_button_updated', [ $button ] );

5. cart_page_refreshed: Triggered when the cart page is refreshed.

$( document.body ).trigger( 'cart_page_refreshed' );

6. cart_totals_refreshed: Triggered when the cart totals are refreshed.

$( document.body ).trigger( 'cart_totals_refreshed' );

7. wc_fragments_loaded: Triggered when WooCommerce fragments are loaded.

$( document.body ).trigger( 'wc_fragments_loaded' );

WooCommerce Add Payment Method JavaScript Events

Managing the addition of new payment methods is streamlined with specific events:

1. init_add_payment_method: Triggered when the add payment method process initializes.

$( document.body ).trigger( 'init_add_payment_method' );

Binding Event Listeners

To effectively use these events, you can bind listeners to them. Here’s a general approach:

jQuery('<event_target>').on('<event_name>', function(){
  console.log('<event_name> triggered');
});

Example

For instance, to trigger an update to the checkout process when the billing state changes:

$('body').on('change', '#billing_state', function(){
  $( document.body ).trigger( 'update_checkout' );
});

Conclusion

By leveraging WooCommerce’s extensive list of JavaScript events, developers can create more interactive and dynamic eCommerce sites. These events provide hooks into various stages of the WooCommerce lifecycle, enabling custom behaviors and enhancing the user experience. Whether updating the cart totals, initializing the checkout process, or managing payment methods, understanding and using these events is key to optimizing a WooCommerce store.

Are you tired of the tedious and time-consuming process of adding custom tabs to your WooCommerce products one by one? I understand the pain, and that’s why I present to you the ultimate solution: WooCommerce Custom Product Tabs!

<?php
/*
Plugin Name: WooCommerce Custom Product Tab
Plugin URI: https://ryanaby.com/woocommerce-plugin-for-adding-custom-tab-to-all-products/
Description: Add tab to all WooCommerce products
Version: 1.0
Author: Ryan Aby
Author URI: https://ryanaby.com/
*/

if ( ! class_exists( 'WCPT_Custom_Product_Tab' ) ) {
    class WCPT_Custom_Product_Tab {

        public function __construct() {
            add_filter( 'woocommerce_settings_tabs_array', array( $this, 'add_settings_tab' ), 50, 1 );
            add_action( 'woocommerce_settings_tabs_wcpt_custom_tab', array( $this, 'settings_tab' ) );
            add_action( 'woocommerce_update_options_wcpt_custom_tab', array( $this, 'update_settings' ) );

            // Add custom tab to product pages
            add_filter( 'woocommerce_product_tabs', array( $this, 'add_custom_tab' ) );
        }

        public function add_settings_tab( $tabs ) {
            $tabs['wcpt_custom_tab'] = esc_html__( 'Custom Product Tab', 'woocommerce-custom-product-tab' );
            return $tabs;
        }

        public function settings_tab() {
            woocommerce_admin_fields( self::get_settings() );
        }

        public function update_settings() {
            woocommerce_update_options( self::get_settings() );
        }

        public function get_settings() {
            $settings = array(
                'section_title' => array(
                    'name' => esc_html__( 'Custom Product Tabs Settings', 'woocommerce-custom-product-tab' ),
                    'type' => 'title',
                    'desc' => '',
                    'id'   => 'wcpt_custom_tab_section_title'
                ),
            );

            for ( $i = 1; $i <= 3; $i++ ) {
                $settings["custom_tab_title_$i"] = array(
                    'name' => esc_html__( "Custom Tab Title $i", 'woocommerce-custom-product-tab' ),
                    'type' => 'text',
                    'desc' => esc_html__( "Title for Custom Tab $i", 'woocommerce-custom-product-tab' ),
                    'id'   => "wcpt_custom_tab_title_$i",
                );

                $settings["custom_tab_content_$i"] = array(
                    'name' => esc_html__( "Custom Tab Content $i", 'woocommerce-custom-product-tab' ),
                    'type' => 'textarea',
                    'desc' => esc_html__( "Content for Custom Tab $i", 'woocommerce-custom-product-tab' ),
                    'id'   => "wcpt_custom_tab_content_$i",
                    'css'  => 'height: 150px;',
                );
            }

            $settings['section_end'] = array(
                'type' => 'sectionend',
                'id'   => 'wcpt_custom_tab_section_end',
            );

            return apply_filters( 'wcpt_wcpt_custom_tab_settings', $settings );
        }

        public function add_custom_tab( $tabs ) {
            for ( $i = 1; $i <= 3; $i++ ) {
                $custom_tab_title = get_option( "wcpt_custom_tab_title_$i", '' );
                $custom_tab_content = get_option( "wcpt_custom_tab_content_$i", '' );

                if ( ! empty( $custom_tab_title ) ) {
                    $tabs["wcpt_custom_tab_$i"] = array(
                        'title'    => esc_html( $custom_tab_title ),
                        'priority' => 50 + $i,
                        'callback' => function () use ( $custom_tab_content ) {
                            echo '<div class="wcpt-custom-tab-content">' . apply_filters( 'the_content', $custom_tab_content ) . '</div>';
                        },
                    );
                }
            }

            return $tabs;
        }
    }

    new WCPT_Custom_Product_Tab();
}

Tag: WooCommerce

WooCommerce JavaScript Events