Reduce the size of the Product Add-On box on a product page

I am trying to customise the 'Product add-on' box to be similar in style to the 'Add to Cart' button

ie make the Product add-on 'Name' and 'Price' font smaller and also the box it is in smaller.

Additionally if it is possible to reduce the size of the thumbnail, even better.

In this case the Product Add-on is 'Framing'

https://www.aiacontemporary.com/store/p/tight-collar

.product-details .pdp-product-add-ons .add-on-card {
    display: flex;
    align-items: center;
    border: 1px solid grey;
    padding: 16px;
    margin-top: 22px;
    flex-wrap: wrap;
    width: 211px;
}

past this code in custom css box

Thank you for that, it's a welcome improvement.

Is it possible to also reduce the the size of the circle button with the '+' ?

On 3/14/2024 at 6:13 PM, maxmedia said:

Thank you for that, it's a welcome improvement.

Is it possible to also reduce the the size of the circle button with the '+' ?

 

Use this CSS code

.product-details .pdp-product-add-ons .add-on-add-to-cart-wrapper .sqs-add-to-cart-button {
    width: 30px !important;
    height: 30px !important;
}
svg.plus-icon {
    width: 9px !important;
}