* 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.
class WC_Frontend_Scripts {
* Contains an array of script handles registered by WC.
private static $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 );
* 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' ),
'woocommerce-blocktheme' => wp_is_block_theme() ? array(
'src' => self::get_asset_url( 'assets/css/woocommerce-blocktheme.css' ),
return is_array( $styles ) ? array_filter( $styles ) : array();
* @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::$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::$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 );
* Register all WC scripts.
private static function register_scripts() {
$suffix = Constants::is_true( 'SCRIPT_DEBUG' ) ? '' : '.min';
$version = Constants::get_constant( 'WC_VERSION' );
$register_scripts = array(
'src' => self::get_asset_url( 'assets/js/flexslider/jquery.flexslider' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '2.7.2-wc.' . $version,
'src' => self::get_asset_url( 'assets/js/js-cookie/js.cookie' . $suffix . '.js' ),
'version' => '2.1.4-wc.' . $version,
'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,
'jquery-cookie' => array( // deprecated.
'src' => self::get_asset_url( 'assets/js/jquery-cookie/jquery.cookie' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '1.4.1-wc.' . $version,
'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,
'src' => self::get_asset_url( 'assets/js/photoswipe/photoswipe' . $suffix . '.js' ),
'version' => '4.1.1-wc.' . $version,
'photoswipe-ui-default' => array(
'src' => self::get_asset_url( 'assets/js/photoswipe/photoswipe-ui-default' . $suffix . '.js' ),
'deps' => array( 'photoswipe' ),
'version' => '4.1.1-wc.' . $version,
'prettyPhoto' => array( // deprecated.
'src' => self::get_asset_url( 'assets/js/prettyPhoto/jquery.prettyPhoto' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '3.1.6-wc.' . $version,
'prettyPhoto-init' => array( // deprecated.
'src' => self::get_asset_url( 'assets/js/prettyPhoto/jquery.prettyPhoto.init' . $suffix . '.js' ),
'deps' => array( 'jquery', 'prettyPhoto' ),
'src' => self::get_asset_url( 'assets/js/select2/select2.full' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '4.0.3-wc.' . $version,
'src' => self::get_asset_url( 'assets/js/selectWoo/selectWoo.full' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '1.0.9-wc.' . $version,
'wc-address-i18n' => array(
'src' => self::get_asset_url( 'assets/js/frontend/address-i18n' . $suffix . '.js' ),
'deps' => array( 'jquery', 'wc-country-select' ),
'wc-add-payment-method' => array(
'src' => self::get_asset_url( 'assets/js/frontend/add-payment-method' . $suffix . '.js' ),
'deps' => array( 'jquery', 'woocommerce' ),
'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', 'js-cookie' ),
'src' => self::get_asset_url( 'assets/js/frontend/checkout' . $suffix . '.js' ),
'deps' => array( 'jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n' ),
'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', 'jquery-payment' ),
'wc-add-to-cart' => array(
'src' => self::get_asset_url( 'assets/js/frontend/add-to-cart' . $suffix . '.js' ),
'deps' => array( 'jquery', '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', 'jquery-blockui' ),
'wc-geolocation' => array(
'src' => self::get_asset_url( 'assets/js/frontend/geolocation' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'wc-lost-password' => array(
'src' => self::get_asset_url( 'assets/js/frontend/lost-password' . $suffix . '.js' ),
'deps' => array( 'jquery', 'woocommerce' ),
'wc-account-i18n' => array(
'src' => self::get_asset_url( 'assets/js/frontend/account-i18n' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'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-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/frontend/woocommerce' . $suffix . '.js' ),
'deps' => array( 'jquery', 'jquery-blockui', 'js-cookie' ),
'src' => self::get_asset_url( 'assets/js/zoom/jquery.zoom' . $suffix . '.js' ),
'deps' => array( 'jquery' ),
'version' => '1.7.21-wc.' . $version,
if ( Features::is_enabled( 'experimental-blocks' ) ) {
$register_scripts['wc-address-autocomplete'] = array(
'src' => self::get_asset_url( 'assets/js/frontend/address-autocomplete' . $suffix . '.js' ),
'deps' => array( 'jquery', 'woocommerce' ),
foreach ( $register_scripts as $name => $props ) {
self::register_script( $name, $props['src'], $props['deps'], $props['version'] );
* 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 ( Features::is_enabled( 'experimental-blocks' ) ) {
$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' );
self::enqueue_script( 'wc-checkout' );
if ( is_checkout() && Features::is_enabled( 'experimental-blocks' ) ) {
$address_provider_service = wc_get_container()->get( AddressProviderController::class );
if ( $address_provider_service && method_exists( $address_provider_service, 'get_providers' ) ) {
$registered_providers = $address_provider_service->get_providers();
if ( is_array( $registered_providers ) && count( $registered_providers ) > 0 ) {
self::enqueue_script( 'wc-address-autocomplete' );
self::enqueue_style( 'wc-address-autocomplete' );
if ( is_add_payment_method_page() ) {
self::enqueue_script( 'wc-add-payment-method' );
if ( is_lost_password_page() ) {
self::enqueue_script( 'wc-lost-password' );
// Load gallery scripts on product pages only if supported.
if ( is_product() || ( ! empty( $post->post_content ) && strstr( $post->post_content, '[product_page' ) ) ) {
if ( current_theme_supports( 'wc-product-gallery-zoom' ) ) {
self::enqueue_script( 'zoom' );
if ( current_theme_supports( 'wc-product-gallery-slider' ) ) {
self::enqueue_script( 'flexslider' );
if ( current_theme_supports( 'wc-product-gallery-lightbox' ) ) {
self::enqueue_script( 'photoswipe-ui-default' );
self::enqueue_style( 'photoswipe-default-skin' );
add_action( 'wp_footer', 'woocommerce_photoswipe' );
self::enqueue_script( 'wc-single-product' );
// Only enqueue the geolocation script if the Default Current Address is set to "Geolocate
// (with Page Caching Support) and outside of the cart, checkout, account and customizer preview.
'geolocation_ajax' === get_option( 'woocommerce_default_customer_address' )
&& ! ( is_cart() || is_account_page() || is_checkout() || is_customize_preview() )
$ua = strtolower( wc_get_user_agent() ); // Exclude common bots from geolocation by user agent.
if ( ! strstr( $ua, 'bot' ) && ! strstr( $ua, 'spider' ) && ! strstr( $ua, 'crawl' ) ) {
self::enqueue_script( 'wc-geolocation' );
// Global frontend scripts.
self::enqueue_script( 'woocommerce' );
$enqueue_styles = self::get_styles();
foreach ( $enqueue_styles as $handle => $args ) {
if ( ! isset( $args['has_rtl'] ) ) {
$args['has_rtl'] = false;
self::enqueue_style( $handle, $args['src'], $args['deps'], $args['version'], $args['media'], $args['has_rtl'] );
wp_register_style( 'woocommerce-inline', false ); // phpcs:ignore
wp_enqueue_style( 'woocommerce-inline' );
if ( true === wc_string_to_bool( get_option( 'woocommerce_checkout_highlight_required_fields', 'yes' ) ) ) {
wp_add_inline_style( 'woocommerce-inline', '.woocommerce form .form-row .required { visibility: visible; }' );
wp_add_inline_style( 'woocommerce-inline', '.woocommerce form .form-row .required { visibility: hidden; }' );
* Localize a WC script once.
* @since 2.3.0 this needs less wp_script_is() calls due to https://core.trac.wordpress.org/ticket/28404 being added in WP 4.0.