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

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

 

image.thumb.png.9f5a0f3962281580bbf76ddb353574a8.png

Link to post
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

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

Posted Images

  • 1 month later...
Posted (edited)

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:not( .sold-out ) .ProductItem-details .ProductItem-details-checkout {
  
    display : grid;
    gap : 2rem;
    grid-template-columns : repeat( 5, 1fr );
    
    }
    
  .ProductItem:not( .sold-out ) .ProductItem-details .ProductItem-details-checkout * {
  
    margin : 0 !important;
    
    }
    
  .ProductItem:not( .sold-out ) .ProductItem-details .ProductItem-details-checkout > * {
  
    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>

This is for v7.1.

Let us know how it goes.

Edited by creedon
version 2

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

Link to post
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 post
  • 2 weeks later...

Create an account or sign in to comment

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


×
×
  • Create New...