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

ADD TO CART BUTTON next to Variants


ievavi

Question

Anyone would give some help / advice how I could put purchase now (ADD TO CART BUTTON) next to SIZE & CARAT. In other words, that all of them would be in one line.

Ideally I want the buttons resize dynamically (purchase now button is pushed down on a smaller screen, etc.)

The link: https://rocksforlife.com/
Pass: rocksfor.life

Maybe some of you lovely people would be able to give me a hand?


 

Screenshot 2021-05-27 at 09.32.45.png

Link to comment

17 answers to this question

Recommended Posts

  • 0

Incorrect password. Can you check it again?

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
52 minutes ago, creedon said:

Password works.

Would you ever have a quantity field on one of your products? Knowing this might change how we approach a solution.

As of now, quantity field would not be required.

However, would equally be happy to learn the approach when quantity field becomes relevant.

Link to comment
  • 0
Posted (edited)

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

<style>

  /*
  
    begin display add to cart button to right of variants
    
    Version     : 0.1d3
    
    SS Version  : 7.0
    
    Template    : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                  Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke,
                  Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer,
                  Miller, Mojave, Moksha, Motto, Nueva, Pedro, Pursuit, Rally,
                  Rover, Royce, Sofia, Sonora, Stella, Thorne, Vow, Wav, West )
                  
                  your template is not listed? then it is not currently
                  supported
                  
    Note        : this effect is designed to work with stores where all product
                  items have a quantity of only one in stock. in other words the
                  effect will break as soon as the quantity field shows for a
                  product item
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    no user serviceable parts below
    
    */
    
    .ProductItem-details:last-child {
    
      display : block;
      
      }
      
    .tweak-product-item-details-show-add-to-cart-button .ProductItem-details .product-variants,
    .tweak-product-item-details-show-variants .ProductItem-details .product-variants
    
      {
      
        float : left;
        margin : 0;
        
        }
        
    .ProductItem-details .variant-option {
    
      margin-left : 0;
      margin-right : 26px;
      
      }
      
    .ProductItem-details .variant-option-title {
    
      display : none;
      
      }
      
    .ProductItem-details .sqs-add-to-cart-button-wrapper {
    
      min-width : unset !important;
      width : unset !important;
      
      }
      
    .ProductItem-details .sqs-add-to-cart-button {
    
      display : inline-block !important;
      
      }
      
    /* end display add to cart button to right of variants */
    
  </style>

Let us know how it goes.

Edited by creedon
version 0.1d3

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

Link to comment
  • 0
5 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 variants
  
    Version     : 0.1d0
  
    SS Version  : 7.0
  
    Template    : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                  Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke,
                  Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer,
                  Miller, Mojave, Moksha, Motto, Nueva, Pedro, Pursuit, Rally,
                  Rover, Royce, Sofia, Sonora, Stella, Thorne, Vow, Wav, West )
                  
                  your template is not listed? then it is not currently
                  supported
                  
    Note        : this effect is designed to work with stores where all product
                  items have a quantity of only one in stock. in other words the
                  effect will break as soon as the quantity field shows for a
                  product item
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
    */
    
    :root {
    
      --grid-gap : 1rem;
      
      }
      
    /* do not change anything below, there be the borg here */
    
    .ProductItem-details  > *,
    .ProductItem-details .variant-option
    
      {
      
        margin : 0 !important;
        
        }
        
    .ProductItem-details .variant-option-title {
    
      display : none;
      
      }
      
    .tweak-product-item-details-show-add-to-cart-button .ProductItem-details .product-variants,
    .tweak-product-item-details-show-variants .ProductItem-details .product-variants
    
      {
      
        display : grid;
        gap : var( --grid-gap );
        grid-template-columns : 1fr 1fr;
        
        }
        
    .ProductItem-details:last-child {
    
      display : grid;
      gap : var( --grid-gap );
      grid-template-columns : repeat( 8, 1fr );
      
      }
      
    .ProductItem-details > * {
    
      grid-column : 1 / 9;
      
      }
      
    .ProductItem-details .product-variants {
    
      grid-column : 1 / 6;
      
      }
      
    .ProductItem-details .sqs-add-to-cart-button-wrapper {
    
      grid-column : 6 / 9;
      
      }
      
    /* end move add to cart button to right of variants */
    
  </style>

Let us know how it goes.

Thank you - that worked like a charm! However, two issues now:

1. When there is only one variant, how I can push the PURCHASE NOW button closer (reference 1)? 

2. How could I make SIZE & CARAT buttons with less space (reference 2)?

 

Screenshot 2021-05-30 at 10.14.11.png

Screenshot 2021-05-30 at 09.08.18.png

Link to comment
  • 0
1 hour ago, creedon said:

After trying the new code if you still need less space between buttons let us know. I didn't do anything in my code to address the issue. I want get the first effect working before moving onto other issues.

That worked and resolved the second question!! Thanks so much!

There is one more thing though. When I click purchase button, those two, however, overlap. Any insights on this?

https://rocksforlife.com/our-jewellery/no-1-solitaire-ring-white-gold

 

Screenshot 2021-05-30 at 22.53.35.png

Link to comment
  • 0
On 5/31/2021 at 12:05 AM, creedon said:

I have updated my code post again.

Let us know how it goes.

Would you be able to have a second look for mobile screen, @creedon? The button hops onto the second line once there is a longer text in it, however they are not all in alignment. I would like to remove that left margin and display them in 1x 3 ( separate in each line)
 

IMG_3150.PNG

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