francesca_

14 hours ago, creedon said:

@francesca_

Please see Store Product Details Reorder Desktop.

Then set the CSS variables thusly.

        --add-to-cart-button : 4;
        --description : 5;
        --price : 1;
        --quantity : 3;
        --variants : 2;

Folks this is a more generalized solution to moving these elements around than the others.

Let us know how it goes.

Hello @creedon, thank you for your reply!

I am a beginner, so I have tried to fix this, but I cannot get it to work.

I have copied the code from https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Store Product Details Display Flex Desktop/store product details display flex desktop.html#L1

and https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Store Product Details Natural Order Desktop/store product details natural order desktop.html#L1

into the Page Header Code Injection in my shop. Do I just copy and paste them one after the other in this location?

Where do I place the CSS variables you list? I have tried added them before and after in the Page Header Code Injection, but it's not working. 

My site: https://francescaelisia.com/shop/p/landscape-v-art-print

Note: I need very specific instructions. Thank you for your help.

I'm on 7.1 and would like the product page to display these one above another on desktop:

1. Product name, 2. Price, 3. Size selection, 4. Quantity field, 5. Add to cart, 6. Description

@creedon I am not sure how to adapt your code to do this. It's similar to the first request in this post, but it's been edited to a different order and I don't want the qty next to the add to cart.

My site: https://francescaelisia.com/shop/p/landscape-i-art-print

Thanks so much! 😊