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

move Add to cart and select button to below product

Question

Posted (edited)

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

2.PNG2

Edited by Jethro
Clarified images

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 0

Can you share link to product page?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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%;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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:

 

align.PNG

Share this post


Link to post
  • 0
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!!


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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!

Share this post


Link to post
  • 0
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)


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)
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?

Edited by sugarkw
tagging

Share this post


Link to post
  • 0
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.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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!

Screen Shot 2020-07-29 at 10.40.54 AM.png

Share this post


Link to post
  • 0
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.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...