Home › Forums › Themes Support › Claue › Size swatches on product detail page

Viewing 5 reply threads
Save
  • Author
    Posts
    • April 21, 2021 at 4:13 am #41294
      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

    • April 21, 2021 at 7:36 am #41295
      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

    • April 21, 2021 at 5:36 pm #41296
      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

       

    • April 21, 2021 at 10:54 pm #41298
      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

    • May 4, 2021 at 6:14 pm #41410
      Reinhard

      Thanks!

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

      BEst regards

       

    • May 4, 2021 at 6:17 pm #41411
      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
Viewing 5 reply threads
Save

You must be logged in to reply to this topic.