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;
}

I find myself working on this, as well. I'm trying to make the product add-on card as thin as possible, with the thumbnail, the title/price and the + button lined up nicely from left to right, but the + button always seems to want to migrate to the bottom right, and the title/price gravitates towards top left, making the whole box bulkier than it needs to be. Trying to make everything centered between the top and bottom of the box, wondering if you might be able to help? Thank you as always for all your assistance!

On 6/30/2024 at 11:37 PM, marbleandmilkweed said:

I find myself working on this, as well. I'm trying to make the product add-on card as thin as possible, with the thumbnail, the title/price and the + button lined up nicely from left to right, but the + button always seems to want to migrate to the bottom right, and the title/price gravitates towards top left, making the whole box bulkier than it needs to be. Trying to make everything centered between the top and bottom of the box, wondering if you might be able to help? Thank you as always for all your assistance!

Can you share link to this product? We can check easier.

Oh dear, sorry for my very late reply, got a little sidetracked! This product is here: https://www.marbleandmilkweed.com/shop/p/roseandtulsifacialtonic-100ml

Thank you again so much!

On 7/16/2024 at 2:08 AM, marbleandmilkweed said:

Oh dear, sorry for my very late reply, got a little sidetracked! This product is here: https://www.marbleandmilkweed.com/shop/p/roseandtulsifacialtonic-100ml

Thank you again so much!

You can use this CSS to Custom CSS box

.add-on-add-to-cart-wrapper.sqs-add-to-cart-button-wrapper {
    margin: 0px !important;
}
.product-details .pdp-product-add-ons .add-on-card:first-of-type {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.product-details .pdp-product-add-ons .add-on-details .product-price {
    margin: 0px !important;
}

This worked brilliantly, thank you so much! Is there a way at all to add a title to the product add-ons section? Just one line of text above the add-on cards? Many thanks, as always for your kind help!

On 7/21/2024 at 11:25 PM, marbleandmilkweed said:

This worked brilliantly, thank you so much! Is there a way at all to add a title to the product add-ons section? Just one line of text above the add-on cards? Many thanks, as always for your kind help!

You can use this CSS code

#page .ProductItem-details-checkout .pdp-product-add-ons>div:first-child:before {
    content: "here is addong products";
    position: absolute;
    top: 0;
    font-size: 30px;
    left: 0;
}
#page .ProductItem-details-checkout .pdp-product-add-ons {
    position: relative;
}