Hi,
There is no problem with customizing attribute swatch design if it can be achieved with custom CSS code only. What was meant in the previous answer is that it is impossible to universally bind a custom attribute design in all places, since WooCommerce does not provide the name of the attribute in the form of a class to which it would be possible to bind styles simultaneously shop page, single page and in other places such as the product items, quick view and others.
As a partial solution, you can restyle one of the existing designs (for example fourth design https://prnt.sc/6psRd84vWpVn) by using the custom code provided below and selecting the following fourth design for attributes that you want to show in the design described by you in first message.
.wd-bg-style-4 .wd-swatch :is(img, picture) {
object-fit: contain;
}
.wd-bg-style-4 .wd-swatch {
width: 80px;
}
.wd-bg-style-4 .wd-swatch.wd-bg .wd-swatch-bg:is(:not([style^="background-color"])):before {
border: none !important;
}
If you use provided custom CSS code, your “design-4” attributes will look like this (https://prnt.sc/UCgeQrhXQ-re). You can also adjust width to your own value.
Kind Regards
.
