Customizing commerce variant buttons

Site URL: https://cocoshalom.com/prints/harmonia

Hi all,

I manage a site for an artist who sells prints. When customers go to purchase prints, they are to select the size and colour of print that they'd like. The buttons for these two variants are rather ugly and I would like them to match the other buttons throughout the site. Please help!

Thank you in advance! 

2 hours ago, acjo said:

Site URL: https://cocoshalom.com/prints/harmonia

Hi all,

I manage a site for an artist who sells prints. When customers go to purchase prints, they are to select the size and colour of print that they'd like. The buttons for these two variants are rather ugly and I would like them to match the other buttons throughout the site. Please help!

Thank you in advance! 

You could try this css

.collection-type-products .sqs-add-to-cart-button {
    min-width: 220px;
    box-sizing: border-box;
}
#productDetails .product-variants .variant-option select {
  padding: 1em 2.5em;
  min-width: 220px;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}
.variant-select-wrapper {
  position: relative;
}
.variant-select-wrapper:after {
    content: '';
    position: absolute;
    left: 190px;
  top: 1em;
    transform: rotate(45deg);
    border-bottom: 1px solid #767676;
    border-right: 1px solid #767676;
    height: 1em;
    width: 1em;
    transform-origin: top;
    pointer-events: none;
    font-size: 1em;
}

Hi, 

I would like to

• remove the GRAY arrows from the quantity box
• change the color of the variant box