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

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


Recommended Posts

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;
}

 

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

Link to comment
  • 7 months later...
  • 2 weeks later...
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"

 

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

Link to comment
  • 2 months later...
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

8DD61921-6D8B-4AD8-9B5C-85C2E5255EA6.jpeg

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

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

Link to comment
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?

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

Link to comment

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

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 comment
  • 1 month later...

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

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

Link to comment
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  197435883_15.50AddtoCart.thumb.png.5022cd774a338b02fa1cf7cef3379613.png

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.

Link to comment
  • 4 weeks later...

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!

Link to comment
  • 2 months later...
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.

Edited by Ciodensky
change the addressee
Link to comment
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.

Link to comment
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.

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

Link to comment
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.

 

 

Screen Shot 2021-11-04 at 9.45.20 AM.png

Screen Shot 2021-11-04 at 9.45.40 AM.png

Edited by Ciodensky
change the attached image
Link to comment
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.

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