move Add to cart and select button to below product

Is it possible to move ADD TO CART and any selection drop down buttons (and description), to the bottom (2.png) of the product image, rather than to the right (1.png)?

This is always how it displays on mobile, and also when you minimize the web browser window to a certain point, these buttons and description all go from the right, to beneeath the product images. I would like this to be always the case.

On the below screenshots you see what I mean - the first one has all the details on the right, second one is minimized and how I want the product pages to always display on all browsers.

Thanks!

1

2

Can you share link to product page?

Sure it's here: https://www.astroloteez.com/astroshop/capricorn

Password is password

21 hours ago, Jethro said:

Sure it's here: https://www.astroloteez.com/astroshop/capricorn

Password is password

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
.ProductItem .ProductItem-summary {
    flex-direction: column;
}
.ProductItem-gallery {
    float: none !important;
    width: 100% !important;
}
section.ProductItem-details {
    float: none !important;
    width: 100%;
}
}

9 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
.ProductItem .ProductItem-summary {
    flex-direction: column;
}
.ProductItem-gallery {
    float: none !important;
    width: 100% !important;
}
section.ProductItem-details {
    float: none !important;
    width: 100%;
}
}

 

Thank you very much that is amazing help, exactly what I was looking for! Really appreciate it. Do you have a 'buy me a beer link' link?!

I wonder could I ask you one final thing - how to align that content with the image:

57 minutes ago, Jethro said:

Thank you very much that is amazing help, exactly what I was looking for! Really appreciate it. Do you have a 'buy me a beer link' link?!

I wonder could I ask you one final thing - how to align that content with the image:

 

 

Edit above code to

@media screen and (min-width:641px) {
.ProductItem .ProductItem-summary {
    flex-direction: column;
}
.ProductItem-gallery {
    float: none !important;
    width: 100% !important;
}
section.ProductItem-details {
    float: none !important;
    width: 100%;
}
/* reduce left padding */
section.ProductItem-details {
    padding-left: 0;
}
}

with donate link, you can use this. Thank you!!

14 minutes ago, tuanphan said:

Edit above code to

@media screen and (min-width:641px) {
.ProductItem .ProductItem-summary {
    flex-direction: column;
}
.ProductItem-gallery {
    float: none !important;
    width: 100% !important;
}
section.ProductItem-details {
    float: none !important;
    width: 100%;
}
/* reduce left padding */
section.ProductItem-details {
    padding-left: 0;
}
}

with donate link, you can use this. Thank you!!

Beer sent! Thanks again for the added code, I spent ages and could not get it working. Brilliant!

54 minutes ago, Jethro said:

Beer sent! Thanks again for the added code, I spent ages and could not get it working. Brilliant!

Thank you. If you have any other questions, just reply to this comment/or post new question (& tag me)

On 4/24/2020 at 8:18 PM, tuanphan said:

Thank you. If you have any other questions, just reply to this comment/or post new question (& tag me)

@TuanPhan, I have a similar question. Is there a way to add the "add to cart" buttons below each product (there is no button to the right so I am assuming the code you listed will not work) ?    https://www.thebagboyz.com/boxeddinner.  If not, what's the easiest way to do this?

7 hours ago, sugarkw said:

@TuanPhan, I have a similar question. Is there a way to add the "add to cart" buttons below each product (there is no button to the right so I am assuming the code you listed will not work) ?    https://www.thebagboyz.com/boxeddinner.  If not, what's the easiest way to do this?

You can't add add to cart button to Shop page.

You just create another page, then insert each products with the Product Block, it will have an add to cart.

@tuanphan is there a way to use a cropping handle with product blocks? (Its a super pain to make all of the products be uniform when I insert them on a product block onto a page? So far I am having to edit each image and change their thumbnails to get it to look a little better.) 

4 hours ago, sugarkw said:

@tuanphan is there a way to use a cropping handle with product blocks? (Its a super pain to make all of the products be uniform when I insert them on a product block onto a page? So far I am having to edit each image and change their thumbnails to get it to look a little better.) 

Can you share link to page where you use product block?

@tuanphan  https://goldfish-synthesizer-lgnn.squarespace.com/baby-1   or https://www.thebagboys.com/baby-1.   I can't get  products to go more than 3 across otherwise the "add to cart" button is smooshed, and I think the only way to get them all uniform-looking is to edit each individual picture.  

I am leaning toward just paying someone to do the "add to cart" Custom CSS on the product pages instead because this is a headache, any advice? 

15 hours ago, sugarkw said:

@tuanphan  https://goldfish-synthesizer-lgnn.squarespace.com/baby-1   or https://www.thebagboys.com/baby-1.   I can't get  products to go more than 3 across otherwise the "add to cart" button is smooshed, and I think the only way to get them all uniform-looking is to edit each individual picture.  

 

I am leaning toward just paying someone to do the "add to cart" Custom CSS on the product pages instead because this is a headache, any advice? 

have you solved yet?

Only kind of- i have built out the new product pages in unlinked pages, but I still need to edit all of the photos and thumbnails to get it to look uniform. There will be lots more inventory added. 
 

How much would code cost to get it added to the product pages so “add to cart” automatically is beneath?

12 minutes ago, sugarkw said:

Only kind of- i have built out the new product pages in unlinked pages, but I still need to edit all of the photos and thumbnails to get it to look uniform. There will be lots more inventory added. 
 

How much would code cost to get it added to the product pages so “add to cart” automatically is beneath?

Can you share link & describe in detail?

Hi @tuanphan

I'm trying to move the Add to Cart button above the description, but can't find an option to do so, and I'm pretty noob on CSS. 

Could you assist me? This is the product page example

Thank you very much in advance!

14 hours ago, axelvargas said:

Hi @tuanphan

 

I'm trying to move the Add to Cart button above the description, but can't find an option to do so, and I'm pretty noob on CSS. 

Could you assist me? This is the product page example

 

Thank you very much in advance!

Add to Home > Design > Custom CSS

.ProductItem-details .sqs-add-to-cart-button-wrapper {
    order: 2 !important;
}
.ProductItem-details-excerpt {
    order: 3 !important;
}
.ProductItem-product-price {
    order: 1 !important;
}
.ProductItem-details .ProductItem-details-checkout {
    display: flex;
}

Hi @tuanphan

I tried the last code because I want the product description below the Add to Cart button, but now the quantity text and input are below the product description. Can you help?

I'd like the quantity text and input before/with the add to cart.

Thanks!

On 7/29/2020 at 11:42 PM, brittanyb said:

Hi @tuanphan

I tried the last code because I want the product description below the Add to Cart button, but now the quantity text and input are below the product description. Can you help?

I'd like the quantity text and input before/with the add to cart.

Thanks!

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

hi @tuanphan , hope you're keeping well.

I'm looking to move the 'quantity' and 'add to cart' button below the product description on mobile - to match how it currently looks on desktop.

website here - https://www.happyburpee.com/buy-card/p/happy-burpee-card

Thanks in advance,

Henry

what if i want the add to cart below the description? It shows below my description on desktop but it shows above on mobile?

Thelandservice.net/shop

On 1/24/2021 at 3:42 AM, hankob1989 said:

hi @tuanphan , hope you're keeping well.

I'm looking to move the 'quantity' and 'add to cart' button below the product description on mobile - to match how it currently looks on desktop.

website here - https://www.happyburpee.com/buy-card/p/happy-burpee-card

Thanks in advance,

Henry

Missing your comment. Do you still need help?

On 1/31/2022 at 6:00 AM, Stone1221 said:

what if i want the add to cart below the description? It shows below my description on desktop but it shows above on mobile?

 

Thelandservice.net/shop

Just answered on another your post