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

39 minutes ago, Ciodensky said:

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

If your intent was to change the product block only then no.

29 minutes ago, creedon said:

If your intent was to change the product block only then no.

Yes, I am working actually with the product block.

I have one last question:

Does your code affects only the product page but not the checkout page, right?

2 minutes ago, Ciodensky said:

Does your code affects only the product page but not the checkout page, right?

You are correct.

Just a note. The checkout page can not be changed by any code. It is a SS security feature.

3 minutes ago, creedon said:

You are correct.

Just a note. The checkout page can not be changed by any code. It is a SS security feature.

I agree. Thanks for all these information. Cheers!

Please see the following.

13 minutes ago, creedon said:

Try the following for product blocks.

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

<style>

  /*
  
    begin product blocks variants first
    
    Version     : 0.1d0
    
    SS Version  : 7.1
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .product-block .productDetails {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      -webkit-box-orient : vertical;
      -webkit-box-direction : normal;
      -ms-flex-direction : column;
      flex-direction : column;
      
      gap : 20px;
      
      }
      
    .product-block .productDetails > *,
    .product-block .productDetails .product-price,
    .product-block .productDetails .product-title
    
      {
      
        margin-bottom : 0;
        margin-top : 0;
        
        }
        
    .product-block .productDetails .product-variants {
    
      -webkit-box-ordinal-group : 0;
      -ms-flex-order : -1;
      order : -1;
      
      }
      
   /* end product blocks variants first */
   
  </style>

Let us know how it goes.

It works! Wow! Thank you so much Creedon! Greatly appreciate it!

How can I mark it as answered even best solution? I couldn't find the button.

20 minutes ago, Ciodensky said:

How can I mark it as answered even best solution? I couldn't find the button.

You would have had to start a new question to be able to do that.

5 minutes ago, creedon said:

You would have had to start a new question to be able to do that.

I see. So I will create this question and you post your answer. I think this is valid because it is a separate topic "product-block" re-ordering of contents.

On 8/12/2020 at 4: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;
}

 

Is this still working ? I copied it in the custom CSS, but it doesn't move anything.. 

16 hours ago, monotangente said:

Is this still working ? I copied it in the custom CSS, but it doesn't move anything.. 

Can you share link to a product? We can check easier

Hi, I tried using the code from the original question however it isn't working for me.
Is there an updated code I can use in order to have the price displayed at the bottom, before 'Add To Cart'?

1 hour ago, Brooke202 said:

I tried using the code from the original question however it isn't working for me.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

https://www.brookekeamphotography.com.au/shop

On 2/3/2023 at 7:37 PM, Brooke202 said:

Is there an updated code I can use in order to have the price displayed at the bottom, before 'Add To Cart'?

Please see the following.

You may want to read the follow on posts in that thread if you are finding the install process a challenge.

Then set the CSS variables thusly.

          --add-to-cart-button : 2;
          --description : unset;
          --price : 1;
          --quantity : unset;
          --variants : unset;

Let us know how it goes.

Still can't get it working 😞
 

1 hour ago, Brooke202 said:

Still can't get it working

It appears you have some code already trying to manipulate the order. Remove it, make a copy somewhere. Install my code as suggested.

This is what it looks like.

On 6/17/2021 at 12:44 AM, 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

Try this, it's just moved the price down one extra in the order, which should move it under the option boxes:

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

On 6/24/2021 at 5: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.

Amazing!!! You are a life saver! Thank you so much for sharing this.

10 hours ago, rhondahymason said:

Thank you so much for sharing this.

I have more modern code for this effect which you will see in another thread you posted in.