* Handle frontend scripts
* @package WooCommerce\Classes
// phpcs:disable WooCommerce.Commenting.CommentHooks.MissingHookComment
use Automattic\Jetpack\Constants;
use Automattic\WooCommerce\Admin\Features\Features;
use Automattic\WooCommerce\Internal\AddressProvider\AddressProviderController;
if ( ! defined( 'ABSPATH' ) ) {
* Frontend scripts class.
* These scripts are enqueued in the frontend of the store. The registered script handles in this class
* can be used to enqueue the scripts in the frontend by third party plugins and the handles will follow
* WooCommerce's L-1 support policy. Scripts registered outside of this class do not guarantee support
* and can be removed in future versions of WooCommerce.
class WC_Frontend_Scripts {
* Contains an array of script handles registered by WC.
private static $registered_scripts = array();
* Contains an array of script handles registered by WC.
private static $styles = array();
* Contains an array of script handles localized by WC.
private static $wp_localize_scripts = array();
public static function init() {
add_action( 'wp_enqueue_scripts', array( __CLASS__, 'load_scripts' ) );
add_action( 'wp_print_scripts', array( __CLASS__, 'localize_printed_scripts' ), 5 );
add_action( 'wp_print_footer_scripts', array( __CLASS__, 'localize_printed_scripts' ), 5 );
add_action( 'enqueue_block_assets', array( __CLASS__, 'enqueue_block_assets' ) );
* Get styles for the frontend.
public static function get_styles() {
$version = Constants::get_constant( 'WC_VERSION' );
* Filter list of WooCommerce styles to enqueue.
* @param array List of default WooCommerce styles.
* @return array List of styles to enqueue.
'woocommerce_enqueue_styles',
'woocommerce-layout' => array(
'src' => self::get_asset_url( 'assets/css/woocommerce-layout.css' ),
'woocommerce-smallscreen' => array(
'src' => self::get_asset_url( 'assets/css/woocommerce-smallscreen.css' ),
'deps' => 'woocommerce-layout',
'media' => 'only screen and (max-width: ' . apply_filters( 'woocommerce_style_smallscreen_breakpoint', '768px' ) . ')',
'woocommerce-general' => array(
'src' => self::get_asset_url( 'assets/css/woocommerce.css' ),
return is_array( $styles ) ? array_filter( $styles ) : array();
* Enqueue styles for block assets (both editor and frontend).
* This ensures compatibility with WordPress 6.9+ requirements.
public static function enqueue_block_assets() {
if ( ! wp_is_block_theme() ) {
$version = Constants::get_constant( 'WC_VERSION' );
'woocommerce-blocktheme',
self::get_asset_url( 'assets/css/woocommerce-blocktheme.css' ),
wp_style_add_data( 'woocommerce-blocktheme', 'rtl', 'replace' );
* @param string $path Assets path.
private static function get_asset_url( $path ) {
return apply_filters( 'woocommerce_get_asset_url', plugins_url( $path, WC_PLUGIN_FILE ), $path );
* Register a script for use.
* @uses wp_register_script()
* @param string $handle Name of the script. Should be unique.
* @param string $path Full URL of the script, or path of the script relative to the WordPress root directory.
* @param string[] $deps An array of registered script handles this script depends on.
* @param string $version String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
* @param boolean $in_footer Whether to enqueue the script before </body> instead of in the <head>. Default 'false'.
private static function register_script( $handle, $path, $deps = array( 'jquery' ), $version = WC_VERSION, $in_footer = array( 'strategy' => 'defer' ) ) {
self::$registered_scripts[] = $handle;
wp_register_script( $handle, $path, $deps, $version, $in_footer );
* Register and enqueue a script for use.
* @uses wp_enqueue_script()
* @param string $handle Name of the script. Should be unique.
* @param string $path Full URL of the script, or path of the script relative to the WordPress root directory.
* @param string[] $deps An array of registered script handles this script depends on.
* @param string $version String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
* @param boolean $in_footer Whether to enqueue the script before </body> instead of in the <head>. Default 'false'.
private static function enqueue_script( $handle, $path = '', $deps = array( 'jquery' ), $version = WC_VERSION, $in_footer = array( 'strategy' => 'defer' ) ) {
if ( ! in_array( $handle, self::$registered_scripts, true ) && $path ) {
self::register_script( $handle, $path, $deps, $version, $in_footer );
wp_enqueue_script( $handle );
* Register a style for use.
* @uses wp_register_style()
* @param string $handle Name of the stylesheet. Should be unique.
* @param string $path Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.
* @param string[] $deps An array of registered stylesheet handles this stylesheet depends on.
* @param string $version String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
* @param string $media The media for which this stylesheet has been defined. Accepts media types like 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'.
* @param boolean $has_rtl If has RTL version to load too.
private static function register_style( $handle, $path, $deps = array(), $version = WC_VERSION, $media = 'all', $has_rtl = false ) {
self::$styles[] = $handle;
wp_register_style( $handle, $path, $deps, $version, $media );
wp_style_add_data( $handle, 'rtl', 'replace' );
* Register and enqueue a styles for use.
* @uses wp_enqueue_style()
* @param string $handle Name of the stylesheet. Should be unique.
* @param string $path Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.
* @param string[] $deps An array of registered stylesheet handles this stylesheet depends on.
* @param string $version String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
* @param string $media The media for which this stylesheet has been defined. Accepts media types like 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'.
* @param boolean $has_rtl If has RTL version to load too.
private static function enqueue_style( $handle, $path = '', $deps = array(), $version = WC_VERSION, $media = 'all', $has_rtl = false ) {
if ( ! in_array( $handle, self::$styles, true ) && $path ) {
self::register_style( $handle, $path, $deps, $version, $media, $has_rtl );
wp_enqueue_style( $handle );
* Get scripts for the frontend.
private static function get_scripts(): array {
$suffix = Constants::is_true( 'SCRIPT_DEBUG' ) ? '' : '.min';
$version = Constants::get_constant( 'WC_VERSION' );
'src' => self::get_asset_url( 'assets/js/selectWoo/selectWoo.full' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '1.0.9-wc.' . $version,
'wc-account-i18n' => array(
'src' => self::get_asset_url( 'assets/js/frontend/account-i18n' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'wc-add-payment-method' => array(
'src' => self::get_asset_url( 'assets/js/frontend/add-payment-method' . $suffix . '.js' ),
'deps' => array( 'jquery', 'woocommerce', 'wc-custom-place-order-button' ),
'wc-add-to-cart' => array(
'src' => self::get_asset_url( 'assets/js/frontend/add-to-cart' . $suffix . '.js' ),
'deps' => array( 'jquery', 'wc-jquery-blockui' ),
'wc-add-to-cart-variation' => array(
'src' => self::get_asset_url( 'assets/js/frontend/add-to-cart-variation' . $suffix . '.js' ),
'deps' => array( 'jquery', 'wp-util', 'wc-jquery-blockui' ),
'wc-address-i18n' => array(
'src' => self::get_asset_url( 'assets/js/frontend/address-i18n' . $suffix . '.js' ),
'deps' => array( 'jquery', 'wc-country-select' ),
'wc-back-in-stock-form' => array(
'src' => self::get_asset_url( 'assets/js/frontend/back-in-stock-form' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'src' => self::get_asset_url( 'assets/js/frontend/cart' . $suffix . '.js' ),
'deps' => array( 'jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n' ),
'wc-cart-fragments' => array(
'src' => self::get_asset_url( 'assets/js/frontend/cart-fragments' . $suffix . '.js' ),
'deps' => array( 'jquery', 'wc-js-cookie' ),
'src' => self::get_asset_url( 'assets/js/frontend/checkout' . $suffix . '.js' ),
'wc-custom-place-order-button',
'wc-country-select' => array(
'src' => self::get_asset_url( 'assets/js/frontend/country-select' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'wc-credit-card-form' => array(
'src' => self::get_asset_url( 'assets/js/frontend/credit-card-form' . $suffix . '.js' ),
'deps' => array( 'jquery', 'wc-jquery-payment' ),
'wc-custom-place-order-button' => array(
'src' => self::get_asset_url( 'assets/js/frontend/utils/custom-place-order-button' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'src' => self::get_asset_url( 'assets/js/dompurify/purify' . $suffix . '.js' ),
'wc-flexslider' => array(
'src' => self::get_asset_url( 'assets/js/flexslider/jquery.flexslider' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '2.7.2-wc.' . $version,
'legacy_handle' => 'flexslider',
'wc-geolocation' => array(
'src' => self::get_asset_url( 'assets/js/frontend/geolocation' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'wc-jquery-blockui' => array(
'src' => self::get_asset_url( 'assets/js/jquery-blockui/jquery.blockUI' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '2.7.0-wc.' . $version,
'legacy_handle' => 'jquery-blockui',
'wc-jquery-cookie' => array(
'src' => self::get_asset_url( 'assets/js/jquery-cookie/jquery.cookie' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '1.4.1-wc.' . $version,
'legacy_handle' => 'jquery-cookie',
'wc-jquery-payment' => array(
'src' => self::get_asset_url( 'assets/js/jquery-payment/jquery.payment' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '3.0.0-wc.' . $version,
'legacy_handle' => 'jquery-payment',
'wc-jquery-tiptip' => array(
'src' => self::get_asset_url( 'assets/js/jquery-tiptip/jquery.tipTip' . $suffix . '.js' ),
'deps' => array( 'jquery', 'wc-dompurify' ),
'legacy_handle' => 'jquery-tiptip',
'src' => self::get_asset_url( 'assets/js/js-cookie/js.cookie' . $suffix . '.js' ),
'version' => '2.1.4-wc.' . $version,
'legacy_handle' => 'js-cookie',
'wc-lost-password' => array(
'src' => self::get_asset_url( 'assets/js/frontend/lost-password' . $suffix . '.js' ),
'deps' => array( 'jquery', 'woocommerce' ),
'wc-password-strength-meter' => array(
'src' => self::get_asset_url( 'assets/js/frontend/password-strength-meter' . $suffix . '.js' ),
'deps' => array( 'jquery', 'password-strength-meter' ),
'wc-photoswipe' => array(
'src' => self::get_asset_url( 'assets/js/photoswipe/photoswipe' . $suffix . '.js' ),
'version' => '4.1.1-wc.' . $version,
'legacy_handle' => 'photoswipe',
'wc-photoswipe-ui-default' => array(
'src' => self::get_asset_url( 'assets/js/photoswipe/photoswipe-ui-default' . $suffix . '.js' ),
'deps' => array( 'wc-photoswipe' ),
'version' => '4.1.1-wc.' . $version,
'legacy_handle' => 'photoswipe-ui-default',
'wc-prettyPhoto' => array( // deprecated.
'src' => self::get_asset_url( 'assets/js/prettyPhoto/jquery.prettyPhoto' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '3.1.6-wc.' . $version,
'legacy_handle' => 'prettyPhoto',
'wc-prettyPhoto-init' => array( // deprecated.
'src' => self::get_asset_url( 'assets/js/prettyPhoto/jquery.prettyPhoto.init' . $suffix . '.js' ),
'deps' => array( 'jquery', 'wc-prettyPhoto' ),
'legacy_handle' => 'prettyPhoto-init',
'src' => self::get_asset_url( 'assets/js/select2/select2.full' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '4.0.3-wc.' . $version,
'legacy_handle' => 'select2',
'wc-single-product' => array(
'src' => self::get_asset_url( 'assets/js/frontend/single-product' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'src' => self::get_asset_url( 'assets/js/zoom/jquery.zoom' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '1.7.21-wc.' . $version,
'legacy_handle' => 'zoom',
'src' => self::get_asset_url( 'assets/js/frontend/woocommerce' . $suffix . '.js' ),
'deps' => array( 'jquery', 'wc-jquery-blockui', 'wc-js-cookie' ),
if ( wc_string_to_bool( get_option( 'woocommerce_address_autocomplete_enabled', 'no' ) ) === true ) {
$scripts['wc-address-autocomplete-common'] = array(
'src' => self::get_asset_url( 'assets/js/frontend/utils/address-autocomplete-common' . $suffix . '.js' ),
$scripts['wc-address-autocomplete'] = array(
'src' => self::get_asset_url( 'assets/js/frontend/address-autocomplete' . $suffix . '.js' ),
'deps' => array( 'wc-address-autocomplete-common', 'wc-dompurify' ),
* Register all WC scripts.
private static function register_scripts() {
$register_scripts = self::get_scripts();
foreach ( $register_scripts as $name => $props ) {
self::register_script( $name, $props['src'], $props['deps'], $props['version'] );
if ( isset( $props['legacy_handle'] ) ) {
self::register_script( $props['legacy_handle'], false, array( $name ), $props['version'], true );
* Register all WC styles.
private static function register_styles() {
$version = Constants::get_constant( 'WC_VERSION' );
$register_styles = array(
'src' => self::get_asset_url( 'assets/css/photoswipe/photoswipe.min.css' ),
'photoswipe-default-skin' => array(
'src' => self::get_asset_url( 'assets/css/photoswipe/default-skin/default-skin.min.css' ),
'deps' => array( 'photoswipe' ),
'src' => self::get_asset_url( 'assets/css/select2.css' ),
'woocommerce_prettyPhoto_css' => array( // deprecated.
'src' => self::get_asset_url( 'assets/css/prettyPhoto.css' ),
if ( wc_string_to_bool( get_option( 'woocommerce_address_autocomplete_enabled', 'no' ) ) === true ) {
$register_styles['wc-address-autocomplete'] = array(
'src' => self::get_asset_url( 'assets/css/address-autocomplete.css' ),
foreach ( $register_styles as $name => $props ) {
self::register_style( $name, $props['src'], $props['deps'], $props['version'], 'all', $props['has_rtl'] );
* Register/queue frontend scripts.
public static function load_scripts() {
if ( ! did_action( 'before_woocommerce_init' ) ) {
self::register_scripts();
if ( 'yes' === get_option( 'woocommerce_enable_ajax_add_to_cart' ) ) {
self::enqueue_script( 'wc-add-to-cart' );
self::enqueue_script( 'wc-cart' );
if ( is_cart() || is_checkout() || is_account_page() ) {
self::enqueue_script( 'selectWoo' );
self::enqueue_style( 'select2' );
// Password strength meter. Load in checkout, account login and edit account page.
if ( ( 'no' === get_option( 'woocommerce_registration_generate_password' ) && ! is_user_logged_in() ) || is_edit_account_page() || is_lost_password_page() ) {
self::enqueue_script( 'wc-password-strength-meter' );
if ( is_account_page() ) {
self::enqueue_script( 'wc-account-i18n' );