/**
* Creates AJAX WooCommerce product search box.
*
* @see https://wpcodebook.com/create-ajax-woocommerce-product-search-box/
* @see https://github.com/woocommerce/woocommerce/blob/8.0.3/plugins/woocommerce/includes/class-wc-ajax.php
* @see https://github.com/woocommerce/woocommerce/blob/8.0.3/plugins/woocommerce/client/legacy/js/admin/wc-enhanced-select.js
*/
function wpcodebook_product_search_ajax( $option_name, $product_id = false ) {
/**
* Alternative values for the `data-action` attribute:
* `woocommerce_json_search_products`, `woocommerce_json_search_downloadable_products_and_variations`
*
* Additional attribute examples:
* `data-display_stock="true"`
* `data-exclude_type="variable"`
* `data-exclude="123"` (post ID)
* `data-sortable="true"`
*/
echo '<select' .
' name="' . esc_attr( $option_name ) . '"' .
' class="wc-product-search"' .
' data-placeholder="' . esc_attr__( 'Search for a product…', 'woocommerce' ) . '"' .
' data-allow_clear="true"' .
' data-action="woocommerce_json_search_products_and_variations"' .
'>';
if ( $product_id ) {
$product_label = ( ( $product = wc_get_product( $product_id ) ) ?
wp_strip_all_tags( $product->get_formatted_name() ) :
sprintf( __( 'Product #%d' ), $product_id ) );
echo '<option value="' . esc_attr( $product_id ) . '" selected>' . esc_html( $product_label ) . '</option>';
}
echo '</select>';
}You may also need to add your screen to WooCommerce screens.
