Guest Posted April 22, 2020 Share Posted April 22, 2020 (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 2 Edited April 22, 2020 by Guest Clarified images Link to comment
tuanphan Posted April 23, 2020 Share Posted April 23, 2020 Can you share link to product page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted April 23, 2020 Share Posted April 23, 2020 Sure it's here: https://www.astroloteez.com/astroshop/capricorn Password is password Link to comment
tuanphan Posted April 24, 2020 Share Posted April 24, 2020 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%; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted April 24, 2020 Share Posted April 24, 2020 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: Link to comment
tuanphan Posted April 24, 2020 Share Posted April 24, 2020 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!! Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted April 24, 2020 Share Posted April 24, 2020 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! Link to comment
tuanphan Posted April 25, 2020 Share Posted April 25, 2020 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) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sugarkw Posted April 28, 2020 Share Posted April 28, 2020 (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 April 28, 2020 by sugarkw tagging Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 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. sugarkw 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sugarkw Posted May 6, 2020 Share Posted May 6, 2020 @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.) Link to comment
tuanphan Posted May 6, 2020 Share Posted May 6, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sugarkw Posted May 9, 2020 Share Posted May 9, 2020 @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? Link to comment
tuanphan Posted May 10, 2020 Share Posted May 10, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sugarkw Posted May 10, 2020 Share Posted May 10, 2020 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? Link to comment
tuanphan Posted May 10, 2020 Share Posted May 10, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
axelvargas Posted May 19, 2020 Share Posted May 19, 2020 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! Link to comment
tuanphan Posted May 20, 2020 Share Posted May 20, 2020 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
alexamargs Posted July 29, 2020 Share Posted July 29, 2020 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! Link to comment
tuanphan Posted July 31, 2020 Share Posted July 31, 2020 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
hankob1989 Posted January 23, 2021 Share Posted January 23, 2021 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 Link to comment
Stone1221 Posted January 30, 2022 Share Posted January 30, 2022 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 Link to comment
tuanphan Posted February 4, 2022 Share Posted February 4, 2022 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment