Jump to content

Add a Checkout Button to Individual Product Page

Recommended Posts

Hey All,

I am looking to add a "Checkout" button to each individual product page right next to the "Add to Cart" button. I was able to find a partial solution here, but the problem this is that the custom CSS does not load until after refreshing the page due to the Ajax functionality. It does not appear that my theme has an option to disable Ajax.

Here is a link to an example product: https://www.fantasiummedia.com/prints/mossy-bridge

Any suggestions? 

 

Link to comment
  • Replies 11
  • Created
  • Last Reply

@fantasiummedia Wrap CSS in Style tag, then insert to Site Header

The code will be

<style>
 .checkoutbutton {
   font-family: arial;
   font-size: 12px;
   color: #fff;
   font-weight: normal;
   font-style: normal;
   text-align: center;
   width: 250px;
   text-decoration: none;
   padding: 14px 18px;
   background-color: #292929;
 }
 .checkoutbutton:hover {
   color: #fff;
   background-color: #292929;
 }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@fantasiummedia Try inline CSS, the code will be

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
     <script>
     $(function() {
       $("<a class='checkoutbutton' style='font-family:arial;font-size:12px;color:#fff;font-weight:normal;font-style:normal;text-align:center;width: 250px;text-decoration: none;padding: 14px 18px;background-color: #292929;' href='/link/'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button-wrapper");   
     });
 </script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...

Hey @tuanphan,

i have inserted this code in the header :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
     <script>
     $(function() {
       $("<a class='checkoutbutton' style='font-family:arial;font-size:12px;color:#fff;font-weight:normal;font-style:normal;text-align:center;width: 150px;text-decoration: none;padding: 14px 18px;background-color: #292929;' href='/scheduling'>Book a date</a>").insertAfter(".sqs-add-to-cart-button-wrapper");   
     });
 </script>

 

The link works but the button is displayed on top of the product name instead of below the add to cart button.

Do you know how i can solve this problem?

 

Schermata 2020-07-29 alle 17.25.46.png

Link to comment
On 7/29/2020 at 10:29 PM, Christine_DTS said:

Hey @tuanphan,

i have inserted this code in the header :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
     <script>
     $(function() {
       $("<a class='checkoutbutton' style='font-family:arial;font-size:12px;color:#fff;font-weight:normal;font-style:normal;text-align:center;width: 150px;text-decoration: none;padding: 14px 18px;background-color: #292929;' href='/scheduling'>Book a date</a>").insertAfter(".sqs-add-to-cart-button-wrapper");   
     });
 </script>

 

The link works but the button is displayed on top of the product name instead of below the add to cart button.

Do you know how i can solve this problem?

Can you share link to product in screenshot? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.