Site icon Experience Wordpress Developer Online – Design Develop and Maintenance Support

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.

add_action( 'init', 'custom_taxonomy_Color' );
function custom_taxonomy_Color()  {
$labels = array(
    'name'                       => 'Color',
    'singular_name'              => 'Color',
    'menu_name'                  => 'Color',
    'all_items'                  => 'All Color',
    'parent_item'                => 'Parent Color',
    'parent_item_colon'          => 'Parent Color:',
    'new_item_name'              => 'New Item Color',
    'add_new_item'               => 'Add New Color',
    'edit_item'                  => 'Edit Color',
    'update_item'                => 'Update Color',
    'separate_items_with_commas' => 'Separate Color with commas',
    'search_items'               => 'Search Color',
    'add_or_remove_items'        => 'Add or remove Colors',
    'choose_from_most_used'      => 'Choose from the most used Colors',
);
$args = array(
    'labels'                     => $labels,
    'hierarchical'               => true,
    'public'                     => true,
    'show_ui'                    => true,
    'show_admin_column'          => true,
    'show_in_nav_menus'          => true,
    'show_tagcloud'              => true,
);
register_taxonomy( 'color', 'product', $args );
register_taxonomy_for_object_type( 'color', 'product' );
}

Step 2 : After adding the code you need to head over to Dashboard. If you hover over the Product section, you will see another menu which includes Color.

Add Color which you want for your product.

Step 3 : Upload and Add Plugin WooCommerce Products Filter , Activated this Plugin and go to settings of this plugin.

Step 4 : Go to Extension tab in this settings. Mark Check ( Enable ) the Color box and click save changes button.

Step 5 : Go To Structure tab in this settings. At last Dropdown, select Color in dropdown and mark check ( Enable ) in color.Click Toggle color item. select color and save this settings.

Step 6 : Go to Apperence-> Widget. Add WooCommerce Products Filter widget in your sidebar.

step 7 : Visit your website or shop page. See color filter add to your sidebar.


Step 8 : Go To Edit product page select color on your product and save. Go to shop page choose any color in your color filter. Result will shows the products of selected color.

Exit mobile version