I am using the Ishimoto template: Although the product page displays an “ADD TO CART” button, I need to add an additional button directly below this one that says “CHECKOUT”, and I need it to be identical (if possible) to the add to cart button.
I do realize that once a customer adds an item to the cart, the Squarespace template will then automatically display a “cart” button floating at the top of the page. However, I still need to add my own checkout button so that I can send customers to a page with more instructions before they go to the cart.
ANY help appreciated, I think I’m on the right track because I already have the following code, but I know the positioning code here is not going to align it directly under the ADD TO CART button like I need it to (because I need for my CHECKOUT button to automatically align itself with the add to cart button no matter what the browser window size is, etc):
<style>
.checkoutbutton {
background-color: #292929;
text-indent: 0;
display: inline-block;
color: #fff;
font-color: #fff;
font-family: arial;
font-size: 12px;
font-weight: normal;
font-style: normal;
height: 50px;
line-height: 50px;
width: 250px;
text-decoration: none;
text-align: center;
}
.checkoutbutton:hover {
background-color: #292929;
font-color: #fff;
}
.checkoutbutton:active {
position: relative;
top: 1px;
color: #fff;
}
</style>
<p align="right"><a href="/pagelink" class="checkoutbutton">CHECKOUT >></a></p>