CSS Borders etc

Hey

I sure could need a bit of help… I’m trying to tweak your CSS a bit to my liking:

Remove border around swatches:
Adding this removes swatch border but also the select border??

/********** Swatch Layout - Before ************/
.woocommerce div.product form.cart.variations_form .tawcvs-swatches .swatch:before,
.woocommerce div.product form.cart.variations_form .tawcvs-swatches .swatch-show-more:before,
.woocommerce.archive form.cart.variations_form .tawcvs-swatches .swatch:before,
.woocommerce.archive form.cart.variations_form .tawcvs-swatches .swatch-show-more:before,
.woocommerce.single-product form.cart.variations_form .tawcvs-swatches .swatch:before,
.woocommerce.single-product form.cart.variations_form .tawcvs-swatches .swatch-show-more:before {
  border: 0px solid #ddd;
}

Can I just remove the permanent border?
How can I change border color for selected items?
Can I make swatches circular round?
Can I center my swatch image, so that it is not partially cut at swatch border?

Prod. page:
The page I need help with

Swatch title appears low in relation to swatches. Can I horizontal center align to the swatch span? Alternative and maybe better: Title above respective swatches, everything centered and width 100%

The Sober theme code…. What does it actually do? Here rewritten for TT3..

/*** Custom CSS for Twenty Twenty 3 theme ***/
.woocommerce.theme-twenty-twenty-three div.product form.cart.variations_form .variations .variable {
  width: 90%;
}
@media (max-width: 768px) {
  .woocommerce.theme-twenty-twenty-three div.product form.cart.variations_form .variations .variable {
    width: 100%;
  }
}
.woocommerce.theme-twenty-twenty-three div.product form.cart.variations_form .line-hover {
  cursor: default;
}
.woocommerce.theme-twenty-twenty-three div.product form.cart.variations_form .tawcvs-swatches .swatch-item-wrapper .swatch-image {
  text-align: center;
}
.woocommerce.theme-twenty-twenty-three div.product form.cart.variations_form .tawcvs-swatches .swatch-item-wrapper .swatch-image img {
  width: 100%;
  height: auto;
}

table.variations {
  overflow: visible !important;
}
table.variations .label {
  margin-bottom: 10px;
}

.swatch-radio {
  width: 100%;
}

.swatch-radio input[type=radio] {
  width: auto !important;
  height: auto !important;
}

• This topic was modified 1 year, 11 months ago by hebhansen.