Replace Add to Cart with Button Block

This guide is for Product Detail Page Only. With Store/Category Page, it will require a different code. You can send me a message via email with your shop URL. I can adjust the code more easily.

Table of Contents

All Products

#1. First, you need to edit all products > Additional Info > Add a Button Block
#2. Use this code to Code Injection>Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('section.ProductItem-additional .button-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>
<style>
div.product-details.pdp-details div.sqs-add-to-cart-button-wrapper div.sqs-add-to-cart-button {
    display: none !important;
}
</style>

One Product

#1. You need to edit the product where you want to replace the add to cart button > Additional Info > Add a Button Block
#2. Paste code to Code Block

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('section.ProductItem-additional .button-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>
<style>
div.product-details.pdp-details div.sqs-add-to-cart-button-wrapper div.sqs-add-to-cart-button {
    display: none !important;
}
</style>

Some Specific Products

#1. First, you need to create a tag with the name: ATB
#2. Next, assign this tag for all products that you want to replace the add to cart button
#3. Edit these products > Edit Additional Info > Add a Button Block
#4. Use code to Code Injection>Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('section.ProductItem-additional .button-block').appendTo('.tag-atb .sqs-add-to-cart-button-wrapper');
})
</script>
<style>
div.product-details.pdp-details div.sqs-add-to-cart-button-wrapper div.sqs-add-to-cart-button {
    display: none !important;
}
</style>