Jump to content

Alignment for added "checkout" button that shows under "add-to-cart"

Recommended Posts

Site URL: http://demeriflowers.com

Can someone help me figure out how to get the second button ("checkout") to align to the left, like the "add-to-cart" button above it?

This is the code I pasted into the Footer, via Advanced>Code Injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $(".sqs-add-to-cart-button").one("click", function(){
    $("<a class='checkoutbutton' href='/commerce/show-cart'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button");
});
  });
</script>

 

 

And this is the corresponding styling I added to the Design>CustomCSS section:

.checkoutbutton {
  display:block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:#000000;
  font-weight: 500;
  font-style: normal;
  line-height: normal;
  opacity:1;
  text-align: center;
  width: auto;
  height: auto;
  text-decoration: none;
  padding: 0px 20px;
  background-color: white;
  border-radius: 3px;
  transition: .1s opacity linear;
  cursor: pointer;
  border-color: #000000;
  border-width:2px;
  border-style:solid;
  margin-top:10px;} 
.checkoutbutton:hover {color: #fff; background-color: #000000;}

************

I don't know if this other code is interfering, that I'm also using to add buttons to my product description from the "additional information":

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
        $('section.ProductItem-additional .button-block').appendTo('.ProductItem-details .sqs-add-to-cart-button-wrapper');
    });
</script>

 

And in Custom CSS section for those:

/* button design for additional buttons after add-to-cart button on product pages*/
.checkoutbutton {
 font-family:'Julius Sans One'!important;
 font-size: 14px!important;
 color: #000000!important;
 font-weight: normal;
 font-style: normal;
 text-align: center;
 text-decoration: none;
 min-width: 8ch!important;
  max-width: 10ch!important;
 padding: 1.05em 1.3em!important;
 background-color: #ffffff;
 margin: 15px;
 border-style: solid!important;
 border-width: 2px!important;
 border-radius: 3px!important;
}

.checkoutbutton:hover {
 color: #ffffff!important;
 background-color: #000000!important;
 border-style: solid!important;
 border: 2px solid #000000;
}

goToCheckoutButton_alignment.jpg

Link to comment
  • Replies 1
  • Views 240
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Quote

/* button design for additional buttons after add-to-cart button on product pages*/
.checkoutbutton {
 font-family:'Julius Sans One'!important;
 font-size: 14px!important;
 color: #000000!important;
 font-weight: normal;
 font-style: normal;
 text-align: center;
 text-decoration: none;
 min-width: 8ch!important;
  max-width: 10ch!important;
 padding: 1.05em 1.3em!important;
 background-color: #ffffff;
 margin: 15px;
 border-style: solid!important;
 border-width: 2px!important;
 border-radius: 3px!important;
}

.checkoutbutton:hover {
 color: #ffffff!important;
 background-color: #000000!important;
 border-style: solid!important;
 border: 2px solid #000000;
}

In this code change margin: 15px; to margin: 0px;

Let me know if thats what you wanted.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.