Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Move Add to cart button beside Quantity input


Go to solution Solved by creedon,

Recommended Posts

  • 1 month later...
8 hours ago, creedon said:

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.


<style>

  /*

    begin move add to cart button to right of quantity
  
    SS Version : 7.1
  
    */
  
  .ProductItem-details .ProductItem-details-checkout {
  
    display : grid;
    gap : 2rem;
    grid-template-columns : repeat( 5, 1fr );
    
    }
    
  .ProductItem-details .ProductItem-details-checkout * {
  
    margin : 0 !important;
    
    }
    
  .ProductItem-details .ProductItem-details-checkout > * {
  
    grid-column : 1 / 6;
    
    }
    
  .ProductItem-details .product-quantity-input {
  
    grid-column : 1 / 2;
    
    }
    
  .ProductItem-details .sqs-add-to-cart-button-wrapper {
  
    align-self : center;
    grid-column : 2 / 6;
    
    }
    
  /* end move add to cart button to right of quantity */
  
  </style>

This is for v7.1.

Let us know how it goes.

@creedon hey that worked perfectly! thanks! but is there any way to extend the bar only for my sold out items? as it looks a little odd when the quantity is hidden:

image.thumb.png.0fd2b429651e84ce9c7baa37e409b435.png

Link to comment
  • 2 weeks later...
  • 1 month later...
Posted (edited)
On 5/5/2021 at 2:35 AM, cmancuso said:

Hello! I would like to do the same, but I have a 7.0 template (Marta) .

Screenshot 2021-05-05 at 10.34.14.png

So, I don't know what I'm doing, but after tinkering with the code for a while this is what I came up with:

<style>
  /* move add to cart button to right of quantity
  */
  
  .ProductItem:not( .sold-out ) section.ProductItem-details.ProductItem-details--mobile .ProductItem-details-title {
  
    display: none;
    
    }
  
  .ProductItem:not( .sold-out ) .ProductItem-details {
  
    display : grid;
    gap : 2rem;
    grid-template-columns : repeat( 5, 1fr );
    
    }
    
  .ProductItem:not( .sold-out ) .ProductItem-details > * {
  
    grid-column : 1 / 6;
    
    }
    
  .ProductItem:not( .sold-out ) .ProductItem-details .product-quantity-input {
  
    grid-column : 1 / 2;
    
    }
    
  .ProductItem:not( .sold-out ) .ProductItem-details .sqs-add-to-cart-button-wrapper {
  
    align-self : center;
    grid-column : 2 / 6;
    
    }
    
  /* end move add to cart button to right of quantity */
  
  </style>

The final result looks like this:

1824974373_Webcapture_14-5-2021_141436_frone_zone.jpeg.dcd164e84e5c1437e03f8a2dbe0b89f1.jpeg

My code fixes the issue from the 7.1 code which doesn't properly create the grid and only centers the "add to cart" button in its own row, still under and not beside the quantity selector.

However, my code causes the product gallery to go rogue and stick to the right side of the screen. I fixed this by changing my site styles to move product descriptions to the left since I couldn't for the life of me figure out how to fix this in the code.

Second issue with my code, is that it would show the product title twice since it was including both the mobile title and normal title for some reason. I fixed this by removing the mobile title all together since none of my other ideas worked. For me, this is okay, since you can still see the title on mobile by way of the product navigation. See what I mean:

 1608512086_Webcapture_14-5-2021_142246_frone_zone.thumb.jpeg.dbbe9828b6ca18d6c04233fcbd2e4ae2.jpeg A not-so-quick (for me to figure out) and very dirty fix from me.

Edited by Elzburg

Super mega ultra-rookie web developer.

Link to comment
On 5/15/2021 at 3:26 AM, Elzburg said:

So, I don't know what I'm doing, but after tinkering with the code for a while this is what I came up with:


<style>
  /* move add to cart button to right of quantity
  */
  
  .ProductItem:not( .sold-out ) section.ProductItem-details.ProductItem-details--mobile .ProductItem-details-title {
  
    display: none;
    
    }
  
  .ProductItem:not( .sold-out ) .ProductItem-details {
  
    display : grid;
    gap : 2rem;
    grid-template-columns : repeat( 5, 1fr );
    
    }
    
  .ProductItem:not( .sold-out ) .ProductItem-details > * {
  
    grid-column : 1 / 6;
    
    }
    
  .ProductItem:not( .sold-out ) .ProductItem-details .product-quantity-input {
  
    grid-column : 1 / 2;
    
    }
    
  .ProductItem:not( .sold-out ) .ProductItem-details .sqs-add-to-cart-button-wrapper {
  
    align-self : center;
    grid-column : 2 / 6;
    
    }
    
  /* end move add to cart button to right of quantity */
  
  </style>

The final result looks like this:

1824974373_Webcapture_14-5-2021_141436_frone_zone.jpeg.dcd164e84e5c1437e03f8a2dbe0b89f1.jpeg

My code fixes the issue from the 7.1 code which doesn't properly create the grid and only centers the "add to cart" button in its own row, still under and not beside the quantity selector.

However, my code causes the product gallery to go rogue and stick to the right side of the screen. I fixed this by changing my site styles to move product descriptions to the left since I couldn't for the life of me figure out how to fix this in the code.

Second issue with my code, is that it would show the product title twice since it was including both the mobile title and normal title for some reason. I fixed this by removing the mobile title all together since none of my other ideas worked. For me, this is okay, since you can still see the title on mobile by way of the product navigation. See what I mean:

  A not-so-quick (for me to figure out) and very dirty fix from me.

Can you share link to product in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

I have updated my code post. The code is still only for v7.1. I found that there was a situation the code didn't cover. The only one left in stock situation. The CSS would leave a gap. SS doesn't provide a one left class to target unfortunately as can be done with sold out. So I had to create some code to add a one left class that the CSS could target.

Unfortunately I don't have a solution for @Elzburg at this time. I did take a quick look Elzburg's situation to see if there was a quick change that could be made to help. The structure of the HTML in the template you are using is organized differently and as you've found my code is not easily adapted with a few changes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 4 months later...

I have updated my cited code. There was an issue with the last update. My bad. I rolled back to the grid based code but tried to enhance the code to better play mobile and with user text alignment settings. It is by no means perfect. It's the nature of the beast.

For the more technically minded. Don't move the add to cart button around. Within the same container/parent seems to be OK but moving it into a child element, makes your page unhappy and breaks the atcb. I didn't do an exhaustive dive into the issue but it appears that the atcb is checking variants data, makes sense because when you select a variant the variant node gets updated with the selection. Breaking that sibling relationship makes the whole family sad! 🙂

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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