To add color circles to any "Filter Products by Attribute" default WooCommerce widget follow the steps:

  1. In Products → Attributes add a "Color" attribute (the name can be different).
  2. In Products → Attributes → Color add some colors like "Black", "Blue", "White" etc.
  3. In Products → (each product) go to "Attributes" section and assign colors to your products.
  4. In Appearance → Widgets add "Filter Products by Attribute" widget to your shop sidebar.
    1. Preferred operator is "OR".
    2. Attribute to filter by is "Color".
    3. Now you have a working colors filter but on the front-end it only shows color labels without color circles.
  5. Install "BLK Color Filters" plugin.
  6. In WooCommerce → BLK Color Filters specify colors for your labels (only for the "Color" attribute).
Before and after of the color filter widget.
If you have completed the actions described in this article and it did not solve your issue, you may:
Search the community forum or file a support ticket