Jump to content

VUELA

Member
  • Posts

    102
  • Joined

  • Last visited

Community Answers

  1. VUELA's post in Add another button to a product page? was marked as the answer   
    Without knowing what you want this pre-cart page to provide in order to know if there is a better solution – to achieve what you describe, you could try something like this:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script> $(function() { $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button-wrapper"); }); </script>
    You can paste that code into the Header Code Injection area in your site settings, that way this same button will automatically get inserted after each add to cart button anywhere on your site.
    Then paste this into the CSS Editor:
    .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; }
    Revise this CSS to get it to look how you want it – change width, font, font size, colors, padding, etc. But, depending on what your goal is, there may be a better solution.
    Hope that helps!
  2. VUELA's post in Add another button to a product page? was marked as the answer   
    Without knowing what you want this pre-cart page to provide in order to know if there is a better solution – to achieve what you describe, you could try something like this:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script> $(function() { $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button-wrapper"); }); </script>
    You can paste that code into the Header Code Injection area in your site settings, that way this same button will automatically get inserted after each add to cart button anywhere on your site.
    Then paste this into the CSS Editor:
    .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; }
    Revise this CSS to get it to look how you want it – change width, font, font size, colors, padding, etc. But, depending on what your goal is, there may be a better solution.
    Hope that helps!
×
×
  • 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.