Moving Button in My Store

Hi,

Is it possible to move my 'Ask for Price' Button to where the green 'check' mark is in this example, please?

4 hours ago, JohnBoy said:

Hi,

Is it possible to move my 'Ask for Price' Button to where the green 'check' mark is in this example, please?

Kindly share your site with the protected password so we can take a look

Hi, 

Site: haddock-bear-m9z6.squarespace.com

Pass: bubbletea

Thanks.

20 hours ago, JohnBoy said:

Hi, 

Site: haddock-bear-m9z6.squarespace.com

Pass: bubbletea

Thanks.

 

Try adding to Home > Design > Custom Css

.product-details .product-quantity-input, .product-details .sqs-add-to-cart-button-wrapper {
  min-height: 6em;
  width: 50%;
  float: left;
  display: block !important;
  position: relative;
}
.product-details .sqs-add-to-cart-button  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thanks for your help. We're almost there!

It did work for 'Purchase' Buttons, but not for 'Add to Cart'. See screenshots....

Any suggestions?

14 hours ago, JohnBoy said:

Thanks for your help. We're almost there!

It did work for 'Purchase' Buttons, but not for 'Add to Cart'. See screenshots....

Any suggestions?

 

 

 

Hi there

Where can i find it? Can you show me the direct link?

Hi, sorry.....

Here is a typical link that's working OK.... https://haddock-bear-m9z6.squarespace.com/config/

Here is (a typical) link which isn't... https://haddock-bear-m9z6.squarespace.com/config/

Thanks.

On 12/16/2021 at 8:03 PM, JohnBoy said:

Hi, sorry.....

Here is a typical link that's working OK.... https://haddock-bear-m9z6.squarespace.com/config/

Here is (a typical) link which isn't... https://haddock-bear-m9z6.squarespace.com/config/

Thanks.

 

Hi,

/config is admin url, we can't access it.

See how to find exact page url.

10 hours ago, tuanphan said:

Hi,

/config is admin url, we can't access it.

See how to find exact page url.

Hi, OK, sorry about that....

This is a typical URL that IS working for the button change change: https://haddock-bear-m9z6.squarespace.com/products/p/vts-obdii-to-2x-db9

And this is a typical URL that isn't working:  https://haddock-bear-m9z6.squarespace.com/products/p/klari-logger

Basically, where there are 'Add to Cart' buttons..or 'Purchase' it's working.

Where we have 'Ask for Price' it's NOT working (which is most of our products).

Thanks.

The first step is going be moving the button please the following.

By default this code will move the first n blocks of all product detail pages. If you are only ever going to put a button block in the additional info for the products that you want an Ask for price button then you are done. If not then we need to add a little more code to control for which products additional info blocks are moved.

Since you have a no-cart ( or no cart ) tag and are using that to hide the product button with CSS we can leverage off of that to create a guard processor function that the above code can use to decide when to move additional info blocks.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page before the code above. Order is important. Please see per-page code injection.

<script>

  /*
  
    has tag not
    
    Version         : 0.1d0
    
    SS Versions     : 7.0, 7.1
    
    v7.0 Templates  : Brine ( Aria, Blend, Burke, 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
    
    Dependancies    : jQuery
                      
                      move product detail additional info first n blocks to end
                      of product details v0.3d0
    
    By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    const hasTagNot = ( ) => {
    
      // a tag as appears in the SS product editing interface
      
      let tag = '[enter tag here between single quotes]';
      
      // do not change anything below, there be the borg here
      
      tag = tag.replaceAll ( ' ', '-' );
      
      tag = `tag-${ tag }`;
      
      const b = ! $( '.ProductItem' ).hasClass ( tag );
      
      return b;
      
      };
      
  </script>

Now we need to customize each piece of code.

First in the hasTag function you need to add your tag where indicated in the code.

In the Move Product Detail Additional Info First N Blocks to End of Product Details code you need to change the following line...

        guardProcessor : undefined
        

...to...

        guardProcessor : hasTagNot
        

After this it's a matter of coming up with some CSS to manipulate the elements to look how you want.

I don't have CSS for that.

Let us know how it goes.

OK, thanks for the info. I'll try it out and let you know.

Appreciate your help.