ADD TO CART BUTTON next to Variants

Incorrect password. Can you check it again?

3 hours ago, tuanphan said:

Incorrect password. Can you check it again?

I just checked it - should work now! Your help @tuanphan would be very much appreciated!!

Password works.

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

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.

@tcp13

Excellent! That is good to know! Thank you.

11 hours ago, creedon said:

@tcp13

Excellent! That is good to know! Thank you.

@creedon, thank you for your willingness to help. I'll be very much looking forward to hearing some suggestions / advice from you 🙏

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.

Quote

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

Before you need the quantity field hit us up. It would require different code to work with a quantity field.

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

 

I have updated my code post.

Let us know how it goes.

Quote

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

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.

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

I have updated my code post again.

Let us know how it goes.

1 hour ago, creedon said:

I have updated my code post again.

Let us know how it goes.

Fantastic! Thank you thank you thank you!

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)
 

I have updated my code post.

10 hours ago, creedon said:

I have updated my code post.

So simple! Thank you loads!

On 5/31/2021 at 12:05 AM, creedon said:

I have updated my code post again.

Let us know how it goes.

Hi, @creedon!
Any chance you would be able to give a hand to pushing the price title above quantity and add to cart to button? I find it a little challenging task due to the code we added earlier this year to the site.

Example: https://rocksforlife.com/our-jewellery/double-pav-hoop-large-white-gold

2 hours ago, creedon said:

Please see Store Product Details Reorder Desktop. You will notice that the Quick Install instructions will direct you to install other code several layers deep. You will be building up code to get the final effect.

Let us know how it goes.

Hmm ..

I added this piece of code to the store page, however, no changes are visible. The site is built on 7.0 ..

 

Quote

The site is built on 7.0.

My bad. The code I pointed to is only for v7.1. Please remove that code.

Let me see if I have some code around here to do the job.

13 minutes ago, creedon said:

My bad. The code I pointed to is only for v7.1. Please remove that code.

Let me see if I have some code around here to do the job.

Thanks so much!

On 11/2/2021 at 10:11 PM, creedon said:

My bad. The code I pointed to is only for v7.1. Please remove that code.

Let me see if I have some code around here to do the job.

Thomas @creedon, any chance you might be able to share some knowledge how the reorder of the product details can be achieved making the quantity & add to cart buttons to stay in one row?

On 11/7/2021 at 8:22 PM, ievavi said:

Thomas @creedon, any chance you might be able to share some knowledge how the reorder of the product details can be achieved making the quantity & add to cart buttons to stay in one row?

Have you solved it yet?

3 hours ago, tuanphan said:

Have you solved it yet?

The solution was not found. Would you have some suggestions, @tuanphan?