Add product search box to woo-commerce product page
right now i am using below code
// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
echo '<div class="options_group">';
// Custom fields will be created here...
// Product Select
?>
<p class="form-field product_field_type">
<label for="product_field_type"><?php _e( 'Product Select', 'woocommerce' ); ?></label>
<select style="width:100%" id="product_field_type" name="product_field_type[]" class="ajax_chosen_select_products" multiple="multiple" data-placeholder="<?php _e( 'Search for a product…', 'woocommerce' ); ?>">
<?php
$product_field_type_ids = get_post_meta( $post->ID, '_product_field_type_ids', true );
$product_ids = ! empty( $product_field_type_ids ) ? array_map( 'absint', $product_field_type_ids ) : null;
if ( $product_ids ) {
foreach ( $product_ids as $product_id ) {
$product = get_product( $product_id );
$product_name = woocommerce_get_formatted_product_name( $product );
echo '<option value="' . esc_attr( $product_id ) . '" selected="selected">' . esc_html( $product_name ) . '</option>';
}
}
?>
</select> <img class="help_tip" data-tip='<?php _e( 'Your description here', 'woocommerce' ) ?>' src="<?php echo $woocommerce->plugin_url(); ?>/assets/images/help.png" height="16" width="16" />
</p>
<?php
echo '</div>';
}
which shows below product field but doesn't work as expected
but i want to find the product as below pic
I am using below website for code
http://www.remicorson.com/mastering-woocommerce-products-custom-fields/
source to share
I was trying to figure out the same problem for a client of mine recently. I originally used the same tutorial to add a custom product search input field for it on the back, and it broke when we updated it to WooCommerce 2.5+.
To add a product search widget / field to the backend:
?>
<p class="form-field product_field_type">
<label for="product_field_type_ids"><?php _e( 'Component Products:', 'woocommerce' ); ?></label>
<input type="hidden" class="wc-product-search" style="width: 50%;" id="product_field_type_ids" name="product_field_type_ids" data-placeholder="<?php esc_attr_e( 'Search for a product…', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products" data-multiple="true" data-exclude="<?php echo intval( $post->ID ); ?>" data-selected="<?php
$product_ids = array_filter( array_map( 'absint', (array) get_post_meta( $post->ID, '_product_field_type_ids', true ) ) );
$json_ids = array();
foreach ( $product_ids as $product_id ) {
$product = wc_get_product( $product_id );
if ( is_object( $product ) ) {
$json_ids[ $product_id ] = wp_kses_post( html_entity_decode( $product->get_formatted_name(), ENT_QUOTES, get_bloginfo( 'charset' ) ) );
}
}
echo esc_attr( json_encode( $json_ids ) );
?>" value="<?php echo implode( ',', array_keys( $json_ids ) ); ?>" /> <?php echo wc_help_tip( __( 'Select component parts to display on the product page.', 'woocommerce' ) ); ?>
</p>
<?php
Save: (saved in the same id int array format as the existing field, so you don't have to start from scratch with existing database records)
$my_product_ids = isset( $_POST['product_field_type_ids'] ) ? array_filter( array_map( 'intval', explode( ',', $_POST['product_field_type_ids'] ) ) ) : array();
update_post_meta( $post_id, '_product_field_type_ids', $my_product_ids );
To display on the front: (as before)
global $post;
$items = get_post_meta($post->ID, '_product_field_type_ids', true);
if (! empty($items)) {
foreach ( $items as $product_id ) {
echo '<div class="productLink"><a href="'.get_permalink($product_id).'">'.get_the_title($product_id).'</a></div>';
}
}
source to share
I copied this code from up-sells. This is just a search form.
<p class="form-field">
<label for="upsell_ids"><?php _e( 'Up-sells', 'woocommerce' ); ?></label>
<select class="wc-product-search" multiple="multiple" style="width: 50%;" id="upsell_ids" name="upsell_ids[]" data-placeholder="<?php esc_attr_e( 'Search for a product…', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>">
<?php
$product_object = new WC_Product($post->ID);
$product_ids = $product_object->get_upsell_ids( 'edit' );
foreach ( $product_ids as $product_id ) {
$product = wc_get_product( $product_id );
if ( is_object( $product ) ) {
echo '<option value="' . esc_attr( $product_id ) . '"' . selected( true, true, false ) . '>' . wp_kses_post( $product->get_formatted_name() ) . '</option>';
}
}
?>
</select> <?php echo wc_help_tip( __( 'Up-sells are products which you recommend instead of the currently viewed product, for example, products that are more profitable or better quality or more expensive.', 'woocommerce' ) ); ?>
</p>
source to share
This answer is a great starting point, but there are some changes needed to work with the latest versions of WooCommerce where the product search box has changed from input
from type=hidden
to to a select
with an attribute multiple
.
Internal input field
You can use the HTML field backend for WooCommerce upsells, which you can find here on GitHub , as a template for your own field backend.
Keeping internal input field
You can use the following code to retrieve the selected items and store the IDs there as metadata.
$my_product_ids = isset($_POST['product_field_type_ids']) ? array_map('intval', explode(',', (array) $_POST['product_field_type_ids'])) : array();
update_post_meta($post_id, '_product_field_type_ids', $my_product_ids);
source to share
You are using the woocommerce plugin. To filter products by price range, color, size and other fields, you can use another woocommerce plugin 'woocommerce products filter'. You can use custom yith plugin to find products. If you want to provide search, work the whole site not only for products, but only for the custom dave live plugin.
source to share