Move Add to cart button beside Quantity input

Hi! Does anyone know how I can shift my Add to cart button beside the Quantity input for both mobile and desktop? And the add to cart button should span until the end of the text block (desktop) and end of screen (mobile)!

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

On 2/7/2021 at 7:42 AM, tuanphan said:

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

@tuanphan for any product page on my website: truemedical.sg/digital-pharmacy

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:

Quote

is there any way to extend the bar only for my sold out items?

I have updated my code post.

Let us know how it goes.

On 3/25/2021 at 3:28 PM, creedon said:

I have updated my code post.

Let us know how it goes.

@creedon ah thank you so much its perfect! 👍🏻👍🏻👍🏻

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

On 5/5/2021 at 3:35 PM, cmancuso said:

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

Can you share link to a product? We can check easier

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

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:

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.

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:

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?

19 hours ago, tuanphan said:

Can you share link to product in screenshot?

Yellow Flower Beach Bag — A Frone Zone Original

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.

I have updated my cited code. I ditched the grid and moved the quantity and add to cart button into a flex div. It should look better on mobile.

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! 🙂