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