Jump to content

Want to center an image underneath the quantity box AND add to cart button (which were modified to be side-by-side)

Recommended Posts

Hi everyone,

I got some custom code from @paul2009 which allows us to put an image underneath the add to cart button wrapper. That's been great. This is that code here:

.tag-INSERT-PRODUCT-TAG .ProductItem-details-excerpt:after {
  display: block;
  content: "";
  height: 145px;
  margin-top: 34px;
  background: url(‘INSERT PRODUCT LINK);
  background-size: contain;
  background-repeat: no-repeat;
}

Then, my designer wanted to put the add to cart button side by side with the quantity box. Unfortunately, we cannot use any PDP designs other than "simple" because we want to use buttons instead of drop down boxes for the variant displays. (because they're better for conversions).

So, we found this other code on this forum from @Rebecca_Grace_Designs that can do this with a little pixel tweaking. This is that code here: 

.ProductItem-details .ProductItem-details-checkout {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.ProductItem-product-price, .ProductItem-details-excerpt {
flex-basis:100%;
}
.sqs-add-to-cart-button-wrapper {
margin-bottom: 0 !important;
position: relative;
bottom: -28px;
}
.product-quantity-input {
flex-basis:30%;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
padding-top: 1.5em;
padding-bottom: 1.5em;
}
@media screen and (min-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:70%;
}
}
@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:60%;
margin-left: 5vw;
}
}

 

However, using both these codes together makes the picture underneath the add to cart button resize to the same size as the add to cart button wrapper. Which, as you can see from the picture below, looks odd. 

I've made the add to cart button next to quantity box into a custom tag code so that it's only on one of our less-frequented product pages. You can see that here: https://www.blatepapes.com/shop/p/gel-film-square-200

However, now all the add to cart buttons are slightly to the right on mobile view. (will fix itself if the code is fixed)

Can anyone provide an insight into how to fix it so that the picture underneath the add to cart goes and stays across both the quantity box and the add to cart button, while they are side by side? AND also ensure that subscription products do not get messed up since they do not have quantity boxes? 

I also posted a picture of what the code makes the subscription pages look like (that don't have quantity boxes).

 

Screenshot 2023-11-16 at 12.23.18 PM.jpg

Screenshot 2023-11-16 at 12.39.00 PM.jpg

Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Use this code to last line in Code Injection to add image, instead of using CSS :after code

<script>
  $(document).ready(function(){
    $('<img src="https://images.squarespace-cdn.com/content/v1/5f00e6e7a2146372f8efd027/cf5694a2-5df1-4b85-b66b-95489d5ab05e/Empty-Capsule-Advantages-50.png"/>').appendTo('.ProductItem-details-checkout');
});
</script>
<style>
  .ProductItem-details-checkout img {
    order: 8 !important;
}
</style>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.