How to add color filter in woocommerce

step 1 : Open your functions.php file of your active child theme (or theme) and add the code below to it. Make sure the code is added before the closing PHP tag.
// Register a custom taxonomy for color
add_action('init', 'custom_taxonomy_color');
function custom_taxonomy_color() {
$labels = array(
'name' => _x('Colors', 'taxonomy general name', 'textdomain'),
'singular_name' => _x('Color', 'taxonomy singular name', 'textdomain'),
'search_items' => __('Search Colors', 'textdomain'),
'all_items' => __('All Colors', 'textdomain'),
'edit_item' => __('Edit Color', 'textdomain'),
'update_item' => __('Update Color', 'textdomain'),
'add_new_item' => __('Add New Color', 'textdomain'),
'new_item_name' => __('New Color Name', 'textdomain'),
'menu_name' => __('Colors', 'textdomain'),
);

$args = array(
'hierarchical' => true,
'labels' => $labels,
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array('slug' => 'color'),
);

register_taxonomy('product_color', array('product'), $args);
}


This code creates a custom taxonomy named “Color” and attaches it to WooCommerce products.

Step 2: Add Colors to Your Products
After adding the code, go to Products > Colors in your WordPress dashboard. Here, you can add different colors like Red, Blue, Green, etc., and then assign them to your products under the Product Data section.

Step 3: Display the Color Filter on the Shop Page
To display the color filter on your shop page, you can use the WooCommerce Layered Nav widget:

Go to Appearance > Widgets in your WordPress admin.
Add the Filter Products by Attribute widget to your sidebar or shop page widget area.
Select “Color” as the attribute in the widget settings, and save it.