Home › Forums › WoodMart support forum › Increase the add to cart button size
Increase the add to cart button size
- This topic has 17 replies, 3 voices, and was last updated 4 years, 8 months ago by
Elise Noromit.
-
AuthorPosts
-
June 18, 2020 at 12:50 am #204388
hazesmokeshopParticipantDear Support,
Will you please help me in increasing the “Add to cart” button size on single product page and quick view page on all devices i.e. PC, tablet and phone? I checked the theme settings and was not able to see any options. I want the add to cart button to take the rest of the remaining space on the right side. As shown in the picture, I want the add to cart button to span over the red box.
Thanks.
Attachments:
You must be logged in to view attached files.June 18, 2020 at 8:39 am #204477
Aizaz Imtiaz AwanKeymasterHello,
I saw the screenshot you attached. If we try to make the add to cart button to full width it would go in the next line as for different sets of devices. So you need to use media queries for all sets of devices.
For example the following Custom CSS will make the add to cart button take the remaining width for desktop.
You need to add this in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.
.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed { width: 81%; }
Use the following CSS for the Quick View add to cart button for desktop.
.mfp-content .single_add_to_cart_button.button.alt { width: 76%; }
You can set it for different mobile and tablet devices respectively by setting the width and adding the CSS in the Mobile and tablet CSS area.
Best Regards.
June 18, 2020 at 11:26 pm #204686
hazesmokeshopParticipantHi Aizaz,
Thanks for sharing the details.
I did the changes in Desktop CSS and it worked good on Desktop; however, when I do the changes on the mobile CSS, the values on the quick view page works and it doesn’t work on the single product page on iphone. Also, when I check the site on https://www.responsinator.com/ I am able to see the changes properly but when I use the real device for testing, the changes on the single product page are not there. The code that I applied to the Mobile CSS menu is given below.
.mfp-content .single_add_to_cart_button.button.alt { width: 70%; } .product-image-summary .single_add_to_cart_button { width: 63%; }
June 19, 2020 at 8:06 am #204729
Elise NoromitMemberHello,
Please replace all the code provided above with this one:
.single-product-page.product-type-simple form.cart, .woocommerce-variation-add-to-cart { display: flex; } .single-product-page.product-type-simple form.cart > button, .woocommerce-variation-add-to-cart > button { flex-grow: 1; }
Please add this code to the Theme Settings > Custom CSS > Desktop/Tablet/Landscape
Do not insert into Global and Mobile.
Best Regards
June 19, 2020 at 4:31 pm #204881
hazesmokeshopParticipantHi Elise,
Thanks for sharing the code.
I have two issues now.
1- The code doesn’t work for a single product quickview add-to-cart button. Please see below screenshot.
https://prnt.sc/t2uuw42- Button size on mobile didn’t change? Shall I apply this code in global rather than the other parts?
Thanks.
June 20, 2020 at 10:02 am #205000
Elise NoromitMemberHello,
Please replace the code with this one:
.product-type-simple form.cart, .woocommerce-variation-add-to-cart { display: flex; } .product-type-simple form.cart > button, .woocommerce-variation-add-to-cart > button { flex-grow: 1; }
If you want it to work on mobile, insert this code to the Theme Settings > Global.
Best Regards
June 24, 2020 at 2:15 am #205904
hazesmokeshopParticipantHi Elise,
Thanks for sharing the code. It works for me but I am having a problem with this CSS when I enable one of my other plugin “Sales booster” as shown below in /1/. The button is squeezed. If I remove the CSS, the Add to cart button size goes to normal and the plugin works good. Will you please help in fixing this?
Thanks.
June 24, 2020 at 11:29 am #206036
Elise NoromitMemberHello,
We have not tested this plugin with our theme, at the same time, our theme default styles inherit Woocommerce default styles in order to ensure support of the widest range of plugins.
The custom CSS we have provided is workable provided no additional elements are in the container of the Add to cart button, however, the plugin adds the elements to the container.Unfortunately, it is not possible to change that. Thus you need to decide: either you use the full-width button or you have the correct plugin view.
Alternatively, we can provide custom CSS which would increase the width of the button but it would not 100% full-width. https://prnt.sc/t5iw12 and https://prnt.sc/t5iw8m
Best Regards
June 29, 2020 at 12:33 am #207131
hazesmokeshopParticipantHi Elise,
Thanks a lot for the details. I would skip that plugin.
I was trying another plugin for bundled products and I see that the add to cart button is small on bundled product page. Will you please share the CSS for increasing the size of Add to Cart button for bundled products as well?
Thanks.
June 29, 2020 at 7:52 am #207185
Elise NoromitMemberHello,
Please add this code to the Theme Settings > Custom CSS > Global:
.btns-shop-light .single_add_to_cart_button{ width:70%; }
Best Regards
June 29, 2020 at 4:22 pm #207340
hazesmokeshopParticipantHi Elise,
Can we use the flex option for this button as well?
Thanks.
June 30, 2020 at 6:52 am #207456
Elise NoromitMemberHello,
Yes, you can. Here is the code:
.product-type-simple form.cart, .woocommerce-variation-add-to-cart { display: flex; } .product-type-simple form.cart > button, .woocommerce-variation-add-to-cart > button { flex-grow: 1; }
Best Regards
June 30, 2020 at 11:20 pm #207674
hazesmokeshopParticipantHi Elise,
I tried this code and it didn’t change the button size.
Thanks.
July 1, 2020 at 9:48 am #207756
Elise NoromitMemberHello,
This code works on the default Add to cart button without plugins as I explained before. Try to check the code without plugins.
Best Regards
July 1, 2020 at 5:43 pm #207894
hazesmokeshopParticipantHi Elise,
Presently, the code works with the single product/variable product but it doesn’t work for the bundled product.
Please check the links below:Thanks.
July 2, 2020 at 7:17 am #208022
Elise NoromitMemberHello,
Please use this custom CSS for the grouped products:
.product-type-bundle .bundle_button, .product-type-simple form.cart, .woocommerce-variation-add-to-cart { display: flex; } .product-type-bundle .bundle_button > button, .product-type-simple form.cart > button, .woocommerce-variation-add-to-cart > button { flex-grow: 1; }
Best Regards
July 2, 2020 at 12:45 pm #208177
hazesmokeshopParticipantHi Elise,
Looks good to me, thank for share the code. Please close this thread.
July 2, 2020 at 1:41 pm #208201
Elise NoromitMemberYou are welcome! If you have any questions please feel free to contact us.
Best Regards
-
AuthorPosts
The topic ‘Increase the add to cart button size’ is closed to new replies.
- You must be logged in to create new topics. Login / Register