How to add the class 'wc-enhanced-select' to custom select field on checkout page?

Question

I have created a custom select field using woocommerce_form_field on the checkout page. How do I make select field to be same as the ones we have in the WooCoommerce setting

Answer 1

Assuming you are after the looks and feel of WooCommerce Select inputs.

You need to add custom JavaScript for this. WooCommerce uses SelectWoo, a more accessible fork of Select2 JavaScript library for those fancy select inputs.

$('selector-for-your-select').selectWoo();

While selectWoo is by default available in wp-admin, on the front-end it is enqueued only on cart, checkout, and my-account pages.

If you want to use it on other pages then you need to enqueue it for them. Using wp_enqueue('selectWoo'); or as a dependency to your front-end css/js wp_enqueue statement in your plugin, theme, or theme's functions.php.

To learn more about it visit:

• selectWoo – An accessible replacement for select2

• Basic Usage

• GitHub Repo

• WooCommerce Front-end Assets - woocommerce/includes/class-wc-frontend-scripts.php

• WooCommerce Admin Assets - woocommerce/includes/admin/class-wc-admin-assets.php