Move Price to the bottom of the product page near add to cart button

Site URL: https://www.partybarnpublications.com/books/crafting-the-roast

Hello! I'm hoping someone can help me figure out how to move where the price is displayed on the product page. It's at the top near the title and it really should be at the bottom near the add to cart button or above the quantity button.

Anyone out there know how I can move this? Thanks!!

Add to Home > Design > Custom CSS

.ProductItem-details .ProductItem-details-checkout {
    display: flex;
}
.ProductItem-details-excerpt {
    order: 1 !important;
}
.ProductItem-product-price {
    order: 2 !important;
}

Amazing! You are a lifesaver. Thank you!!

You're welcome.

If you have any other questions, just reply to this post or create a new question.

This is very helpful. But if I wanted to add the price in the "Add to Cart" Button, how can I do so?

Thank you.

On 3/20/2021 at 5:29 AM, gisellemariemedia said:

This is very helpful. But if I wanted to add the price in the "Add to Cart" Button, how can I do so?

 

Thank you.

Hi. Can you explain clearly?

"add the price in the "Add to Cart" Button"

Hi

Love this fix, but is it possible to move the price to above the add to cart button? Please see attached picture..

thank you in advance!

j

12 hours ago, Jheverard said:

Hi

Love this fix, but is it possible to move the price to above the add to cart button? Please see attached picture..

thank you in advance!

j

Hi. Can you share link to product in screenshot? We can check easier

Hi

yep it’s on all 4 products on this store:

https://orb-chihuahua-fkbf.squarespace.com/sendflowers/p/bloom-bouquet-1

password: Flowers11

thank you!

jack

22 hours ago, Jheverard said:

Hi

yep it’s on all 4 products on this store:

https://orb-chihuahua-fkbf.squarespace.com/sendflowers/p/bloom-bouquet-1

password: Flowers11

thank you!

jack

The url doesn't exist. Can you check again?

Hi - sorry I’ve been tidying everything up - link is:

https://orb-chihuahua-fkbf.squarespace.com/sendflowers/p/riot-of-colour-bouquet
 

thank you!

@Jheverard

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

<!--

  begin reorder .ProductItem-details-checkout child elements
  
  SS Version    : 7.1
  
  Note          : the code is comprised of two style tags both of which must be
                  present for the effect to work. the second style tag is where
                  the user controls the order of elements
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /*
    
      There is something odd going on with .ProductItem-details-checkout CSS as
      of 06/23/21. The rule-set has a display property value of block but child
      elements of .ProductItem-details-checkout have order properties on them.
      The first bit of CSS unsets those properties for a clean slate returning
      the elements to natural order.
      
      */
      
    /*
    
      user, ignore the rest of the rulesets in this tag and move to the next
      tag to set the order of elements
      
      */
      
    .ProductItem-details .product-quantity-input,
    .ProductItem-details .product-variants,
    .ProductItem-details .ProductItem-details-excerpt,
    .ProductItem-details .ProductItem-product-price,
    .ProductItem-details .sqs-add-to-cart-button-wrapper
    
      {
      
        -webkit-box-ordinal-group : unset;
        -moz-box-ordinal-group : unset;
        -ms-flex-order : unset;
        -webkit-order : unset;
        order : unset;
        
        }
        
    .ProductItem-details .ProductItem-details-checkout {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      }
      
    </style>
    
  <style>
  
    /* begin user reorder, this is where you get to control the order */
    
      .ProductItem-details .ProductItem-product-price
      
        {
        
          -webkit-box-ordinal-group : 2;
          -ms-flex-order : 1;
          order : 1;
          
          }
          
      .ProductItem-details .sqs-add-to-cart-button-wrapper
      
        {
        
          -webkit-box-ordinal-group : 3;
          -ms-flex-order : 2;
          order : 2;
          
          }
          
      /* end user reorder */
      
    </style>
    
  <!-- end reorder .ProductItem-details-checkout child elements -->

Let us know how it goes.

Thanks, I also wanted to move this price bar.

My bad. I've updated my code post.

What about moving down the price a little bit more...

So that the price is inside the add to cart button.

Like this button:  $ 15.50 Add to Cart

se picture  

I prefer to do this with CSS :)

@PerBoy

What you want can't be done with CSS alone. It would require Javascript and is a more complex project because of the dymamic nature of the atc button and involvement of variants (also dynamic).

I think it may be possible to do but again it's not just a couple of lines of code.

9 hours ago, PerBoy said:

What about moving down the price a little bit more...

So that the price is inside the add to cart button.

Like this button:  $ 15.50 Add to Cart

se picture  

Please let me know if you find a way to do this! Been wanting to get the price to be within the button as well.

Hi! Thanks so much for this code, it was just what I was looking for on my clients site. I was wondering if there was a way to get the product excerpt to display next to the variant options and pricing? I've removed the product thumbnail as I don't need it but I would like the excerpt to basically be in the place the thumbnail originally was. 

URL: https://opta-verb.squarespace.com/memberships/p/opta-annual-membership

PW: OPTA2021

Thanks for any help!

On 6/24/2021 at 3:36 AM, creedon said:

@Jheverard

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

<!--

  begin reorder .ProductItem-details-checkout child elements
  
  SS Version    : 7.1
  
  Note          : the code is comprised of two style tags both of which must be
                  present for the effect to work. the second style tag is where
                  the user controls the order of elements
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    /*
    
      There is something odd going on with .ProductItem-details-checkout CSS as
      of 06/23/21. The rule-set has a display property value of block but child
      elements of .ProductItem-details-checkout have order properties on them.
      The first bit of CSS unsets those properties for a clean slate returning
      the elements to natural order.
      
      */
      
    /*
    
      user, ignore the rest of the rulesets in this tag and move to the next
      tag to set the order of elements
      
      */
      
    .ProductItem-details .product-quantity-input,
    .ProductItem-details .product-variants,
    .ProductItem-details .ProductItem-details-excerpt,
    .ProductItem-details .ProductItem-product-price,
    .ProductItem-details .sqs-add-to-cart-button-wrapper
    
      {
      
        -webkit-box-ordinal-group : unset;
        -moz-box-ordinal-group : unset;
        -ms-flex-order : unset;
        -webkit-order : unset;
        order : unset;
        
        }
        
    .ProductItem-details .ProductItem-details-checkout {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      }
      
    </style>
    
  <style>
  
    /* begin user reorder, this is where you get to control the order */
    
      .ProductItem-details .ProductItem-product-price
      
        {
        
          -webkit-box-ordinal-group : 2;
          -ms-flex-order : 1;
          order : 1;
          
          }
          
      .ProductItem-details .sqs-add-to-cart-button-wrapper
      
        {
        
          -webkit-box-ordinal-group : 3;
          -ms-flex-order : 2;
          order : 2;
          
          }
          
      /* end user reorder */
      
    </style>
    
  <!-- end reorder .ProductItem-details-checkout child elements -->

Let us know how it goes.

Hi @creedon, is this code still working in 7.1? I tried it but seems it is not working.

On 8/12/2020 at 10:00 PM, tuanphan said:

Add to Home > Design > Custom CSS

.ProductItem-details .ProductItem-details-checkout {
    display: flex;
}
.ProductItem-details-excerpt {
    order: 1 !important;
}
.ProductItem-product-price {
    order: 2 !important;
}

 

Hi @tuanphan,

I tried this code but no avail. Is this code still working with 7.1?

I added a product on my pricing page and want the variant to be on top of the price.

Can you help me please?

Thanks.

9 hours ago, Ciodensky said:

is this code still working in 7.1? I tried it but seems it is not working.

It is working. Given that my code and tuanphan's code appear to not be working for you, it may be that our codes are not installed where we indicated or you have other code that is overriding our code.

5 hours ago, creedon said:

It is working. Given that my code and tuanphan's code appear to not be working for you, it may be that our codes are not installed where we indicated or you have other code that is overriding our code.

I actually followed your instruction where to install. I hope I am right – below the screenshot below.

I also do not have any script related to products except some css — not sure if these will affect your code.

I will appreciate further guidance. My website is xystema.com and the password 061298. I am implementing this on my Enterprise product — please see screenshot below.

@Ciodensky

My code is written for Store pages not Product Blocks. Changes made on a product detail page do not translate to other places on a site where that product may appear.

I was not able to access your store page as it has its own password on it.

1 hour ago, tuanphan said:

Hi,

The url doesn't exist. Can you check it again?

52 minutes ago, creedon said:

@Ciodensky

My code is written for Store pages not Product Blocks. Changes made on a product detail page do not translate to other places on a site where that product may appear.

I was not able to access your store page as it has its own password on it.

I see. Sorry about that. I got it. But many thanks by the way! Appreciate your response.

Anyway, do you still need the store page password? I don't know also where to get it.