Add to Cart custom CSS

#1. Quantity – Variant same line with Add to Cart under

To achieve layout like this

Use code like this to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.ProductItem-quantity-add-to-cart .product-quantity-input').appendTo('.ProductItem-details .product-variants');
});
</script>
<style>
.ProductItem-details .product-variants {
    display: flex;
}
</style>

result

#2. Move add to Cart above Description

You can edit Product Design > Choose this option

#3. Remove Add to Cart on Specific Product

Edit Product > Additional info > Add a Code Block > Paste this code

<style>
   /* Remove add to cart */
  div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}
</style>

#4. Remove Add to cart on All Pages

Use this CSS code

/* hide add to cart */
  div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}

#5. Remove Add to Cart on Store Page

You can edit Store Page Section > Disable this option.

#6. Redirect Add to Cart to external link

You can edit each product > Additional Info > Add a Code Block > Paste this code. Replace Google with new url

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
$('.sqs-add-to-cart-button-wrapper').click(function() {
    window.location.href = 'https://www.google.com';
});
  });
</script>

#7. Add to cart to a custom image

Use this CSS code

div.sqs-add-to-cart-button {
    background-image: url(https://cdn.pixabay.com/photo/2022/07/01/14/29/wheat-7295718__340.jpg) !important;
    background-color: transparent !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Result

Replace Pixabay with your image url

#8. Remove Add to cart from Quick View

Use this CSS code

div.lightbox-inner div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}

#9. Move Accordion Block under Add to Cart

Use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('section.ProductItem-additional .accordion-block').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
});
</script>
<style>
.ProductItem-details-checkout .accordion-block {
    order: 5 !important;
}
</style>

Result

#10. Move Add to Cart under Price

Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.ProductItem-details-checkout .sqs-add-to-cart-button-wrapper').insertAfter('.product-price');
});
</script>

Result

#11. Hide Add to Cart on limited products

Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    if ($('.product-scarcity').text().includes('Limited Availability')) {
        $('.sqs-add-to-cart-button-wrapper').remove();
    }
});
</script>

Result

#12. Move Add to Cart/Quantity under Product Description (Mobile)

@media screen and (max-width:767px) {
.ProductItem-quantity-add-to-cart {
    order: 6 !important;
}
.ProductItem-details .ProductItem-product-price {
    order: 7 !important;
}
}

#13. Change Add to Cart style to a  text link

div.sqs-add-to-cart-button {
    background-color: transparent !important;
    border: none !important;
    text-align: left !important;
    padding-left: 0px !important;
}
div.sqs-add-to-cart-button * {
    color: #000 !important;
    text-decoration: underline;
}

#14. Add to Cart button background color

div.sqs-add-to-cart-button {
    background-color: #f1f !important;
}

#15. Hide Add to Cart on Sold Out products

/* hide sold out add to cart */
.sold-out div.sqs-add-to-cart-button {
    display: none !important;
}

#16. Move add to cart next to Quantity

#17. Move Description above Add to Cart (Mobile)

@media screen and (max-width:767px) { 
    .ProductItem-details .ProductItem-product-price { 
        order: 7 !important; 
    }
}