Replace Add to Cart with Custom Button

Suppose you have these products, you need to change the Add to Cart to Custom Button with a custom URL.

#1. First, you need to find the URLs of the 4 products.
In my example, we will have:

/shop/p/diamond/cut/curb/chain/gold/24inch/12mm
/shop/p/diamond-cut-curb-chain-silver-necklace-24inch-12nn-stainless-steel
/shop/p/diamond-cut-curb-chain-gold-bracelet-12mm-9inch
/shop/p/diamond-cut-curb-chain-silver-bracelet-12mm-9inch

#2. Use this code to Code Injection – Footer.

Replace Text/URL with your desired text/URL.

<a href="https://google.com" class="product-01 custom-button">Learn More</a>
<a href="https://amazon.com" class="product-02 custom-button">Learn More</a>
<a href="https://instagram.com" class="product-03 custom-button">Learn More</a>
<a href="https://ebay.com" class="product-04 custom-button">Learn More</a>

#3. Use this code to Code Injection – Footer, under #2 code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
     $('.product-01').insertAfter('.grid-item-link[href="/shop/p/diamond/cut/curb/chain/gold/24inch/12mm"]');
    $('.product-02').insertAfter('.grid-item-link[href="/shop/p/diamond-cut-curb-chain-silver-necklace-24inch-12nn-stainless-steel"]');
      $('.product-03').insertAfter('.grid-item-link[href="/shop/p/diamond-cut-curb-chain-gold-bracelet-12mm-9inch"]');
      $('.product-04').insertAfter('.grid-item-link[href="/shop/p/diamond-cut-curb-chain-silver-bracelet-12mm-9inch"]');
})
</script>

You will have this

#3. Use this code to Custom CSS box

a.custom-button {
  display: none;
}
section.plp-grid-add-to-cart {
    display: none !important;
}
div.grid-item a.custom-button {
    text-align: center;
    background-color: var(--primaryButtonBackgroundColor);
    border: 2px solid #fff;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 10px;
    display: inline-block !important
}

You will have