Move all variants, quantity and checkout to top of page

Hi all,

I just wanted to ask if I could move all variants, quantity and checkout button to the top of the page forunderneath the title as I have long descriptions for each product in my store

Hi,

Yes, possible with some CSS code. If you share link to product in screenshot, we can check easier

@Chvntelle  Hi! You can add the following to Website > Pages > Website Tools > Custom CSS.

.ProductItem-details .ProductItem-details-checkout {
	display: flex !important;
}
.tweak-product-basic-item-add-to-cart-standalone .ProductItem .ProductItem-quantity-add-to-cart {
	order: 3 !important;
}
.collection-type-products .ProductItem-details .pdp-product-add-ons {
	order: 4 !important;
}

On 6/2/2024 at 9:47 AM, tuanphan said:

Hi,

Yes, possible with some CSS code. If you share link to product in screenshot, we can check easier

https://refinedspaces.uk/shop-all/p/spicy-margarita

I would like it to be 

Title, Variant(s), Quantity, Price, Add to cart

On 6/3/2024 at 11:03 PM, Chvntelle said:

https://refinedspaces.uk/shop-all/p/spicy-margarita

I would like it to be 

Title, Variant(s), Quantity, Price, Add to cart

How about Product Description?

Sorry id like to change it to, Title, Variant(s), Price, Quantity , Add to cart , Description

On 6/7/2024 at 9:59 PM, Chvntelle said:

Sorry id like to change it to, Title, Variant(s), Price, Quantity , Add to cart , Description

You can use this code to Website > Website Tools > Custom CSS.

.ProductItem-details .product-variants {
    order: 1 !important;
}

.ProductItem-details .ProductItem-details-checkout {
    display: flex !important;
    flex-direction: column;
}

.ProductItem-details .ProductItem-product-price {
    order: 3 !important;
}

.tweak-product-basic-item-add-to-cart-standalone .ProductItem .ProductItem-quantity-add-to-cart {
    order: 4 !important;
}