How do I change from a Circle Visual Color Swatch to Square/Box design in Magento 2.4 ?
See Picture here
You can achieve this through CSS modifications exclusively. To offer the precise solution, it would be beneficial if you could share the website link.
Here are the steps to change from circle to square color swatches in Magento 2.4:
1. Override the _extend.less file for your theme.
2. Open
app/design/frontend/<Your_Theme>/web/css/source/_extend.less
3. Add the following code:
.swatch-attribute-options { .swatch-option { border-radius: 0; } }
4. Save this file and flush Magento caches.
This will override the default border-radius property that makes swatches circular. Setting it to 0 makes the corners square.
Alternatively, you can override swatch styling in your own custom CSS/LESS without touching the _extend.less source. The key is adding:
.swatch-option { border-radius: 0; }