Size swatches on product detail page

[Reinhard]

Hi,

Google complains about to small text on product detail pages. I set the font size to 15px. Now I need to create lager swatches with text. By the way – is there a way to change the swatches (color & size) to squares?

Best regards

Reinhard

[Harry]

Hi Reinhard,

You can change to square for swatch by add below code to Claue > Theme Option > General Layout > Custom CSS

.swatch__list--item,
.swatch__value {
    border-radius: 0;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Reinhard]

Thanks – it works!

Now I need to make it lager and the more space space between the buttons.

Google stats this for the size:  For example, while an icon may only have a width and height of 24px, you can use additional padding to bring the tap target size up to 48px. The 48×48 pixel area corresponds to around 9mm, which is about the size of a person’s finger pad area.

And this for the gap: Touch targets should also be spaced about 8 pixels apart, both horizontally and vertically, so that a user’s finger pressing on one tap target does not inadvertently touch another tap target.

https://web.dev/accessible-tap-targets/

best regards

R

 

[Harry]

Hi,

Please add more code to Claue > Theme Option > General Layout > Custom CSS

.swatch__value {
    display: block;
    width: 28px;
    height: 28px;
    line-height: 30px;
}
.swatch.is-label .swatch__value {
    font-size: 14px;
}

And change number as you want.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Reinhard]

Thanks!

Can you send me a code for widening the gap between the swatches.

BEst regards

 

[Harry]

Hi Reinhard,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.swatch__list--item {
    margin: 3px 7px;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts