- This topic has 11 replies, 4 voices, and was last updated 4 years ago by David.
-
AuthorPosts
-
March 31, 2019 at 9:56 am #855102Pedro
Hello! I would like the “add to cart” button on the product page to occupy the full width and be located just below the product quantity.
This is in both versions, mobile and desktop.
I send you a screenshot of how my site looks at the moment: https://www.dropbox.com/s/wj3dyca42fw45r1/Screenshot_2019-03-31-12-53-07-123_com.android.chrome.png?dl=0
How can I do it?
Thank you!!
March 31, 2019 at 4:31 pm #855300TomLead DeveloperLead DeveloperHi there,
Try this:
.woocommerce div.product form.cart div.quantity { float: none; width: 100%; margin-right: 0; } .woocommerce div.product form.cart .button { width: 100%; margin-top: 10px; padding: 20px; }
March 31, 2019 at 6:47 pm #855342PedroHello Tom!
It worked very well, however now the quantity section is aligned to the right.
I would like this to not happen, I just want the add button to the cart to be bigger.
You can see a screenshot here:
April 1, 2019 at 1:16 am #855480DavidStaffCustomer SupportHi there,
add this CSS:
@media (max-width: 768px) { .do-quantity-buttons div.quantity { justify-content: flex-start !important; } }
April 1, 2019 at 10:04 am #856112PedroHello david! It worked perfectly! Thank you!
April 1, 2019 at 12:12 pm #856192DavidStaffCustomer SupportGlad we could be of help.
April 17, 2020 at 5:47 am #1242795SamHi there I found this but the add to cart button seems to display strangely on mobile the text moves down below centre and the button does not have as much height as the desktop view.
I am trying to do something similar and hope you can help. Rather than have the add to cart button full width and below the quantity field, I would like to do the following:
1) on the desktop I just want the add to cart button to fill the rest of the space to the right of it (within the .single_variation_wrap div) so it fills all the way to the right.
2) on mobile I would like the buy button to be full width and below the quantity, but with the quantity to be full with as well.You can see how it is currently on our site here: https://www.supereight.net/shop/adidas-matchbreak-super-shoes-core-black-white-gold-metallic/
Many thanks
SamApril 17, 2020 at 7:22 am #1242912DavidStaffCustomer SupportHi there,
1. This CSS:
.woocommerce.single-product div.product form.cart .button { flex: 1; }
2. Try this:
@media (max-width: 768px) { .woocommerce div.product form.cart div.quantity { flex: 1 0 100%; } .woocommerce div.product form.cart div.quantity a { max-width: unset; flex: 0 0 25%; } .woocommerce div.product form.cart div.quantity input { max-width: unset; flex: 0 0 50%; } }
April 17, 2020 at 7:36 am #1242929SamWow! thanks so much, that did it!
One minor tweak… for the quantity input on mobile you gave it equal widths for each part “33.33%”.
Is it possible to give the number 50% and the plus and minus as 25%?
April 17, 2020 at 7:51 am #1243100DavidStaffCustomer SupportI adjusted the code above.
April 17, 2020 at 7:54 am #1243109SamAwesome! You guys are the best.
April 17, 2020 at 7:55 am #1243113DavidStaffCustomer SupportGlad to be of help. Nice looking site.
-
AuthorPosts
- You must be logged in to reply to this topic.