how to reduce space of the Add to cart button and remove unwanted line
-
Hi,
Could you check the video in the private section and advise? Thanks.
Hello,
Navigate to Layouts > Edit single product layout with Elementor and remove the add-to-cart widget you are using and use our theme widget “product add to cart” widget and check the issue: https://ibb.co/pv86yRXk
Best Regards,
Thank you! I have successfully made the new button. How to change the button background color from black to grey when hovering? Similar to this Add to Bag button https://www.net-a-porter.com/en-us/shop/product/jennifer-behr/jewelry-and-watches/earrings/gladiolus-gold-tone-earrings/1647597352389842.
Alternatively make the button shrink smaller, so that a user can see the noticeable effect of hovering. Thanks
The other thing is when I reduce the width of the single product page, the positions of Compare and Wishlist buttons stay fixed, whereas the Add to cart button reduces the width along with the page width. See attached. Could you suggest how to make the two buttons adjust width when the page width adjust? Attached.
Attachments:
You must be
logged in to view attached files.
Hello,
Navigate to Theme Settings > Styles and Colors> Buttons > In the Advanced button styles section, you can select the single Add to Cart button in the dropdown and change the background color and hover color: https://ibb.co/zTRdCkcs
Please follow this guide: https://xtemos.com/docs-topic/advanced-button-styles/
To reduce the button size, go to Layout > Edit Single Product Layout, then edit the Add to Cart widget. Under the Style tab, in the Button Settings, set the Design option to “Default” instead of full width.https://ibb.co/ZzQgMBV7
For the positions of Compare and Wishlist buttons stay fixed, Can you please check the site on real devices like mobile and tablet, then let me know? I will check and give you a possible width.
Best Regards,
Hi,
Thanks very much. Please check the video in the private section for the button fixed position problem. The other problem is now fixed.
Hello,
The issue you’re seeing is happening because there’s padding applied to the entire container — this causes the Compare and Wishlist buttons to appear squeezed or misaligned.
Instead of adding padding to the whole container, try applying padding individually to the Wishlist and Compare widgets.
To do this:
Edit each widget (Wishlist and Compare) > Go to the Advanced tab > Set your desired padding/margin there.
Best Regards,
Thanks for your reply. I have made the change, but the result is the same. Please see the video in the private section.
Hello,
I have set up the compare and wishlist container on your site under the SKU. Please check back your site, check the wishlist and compare how it looks.
Additionally, browser resizing is not a standard way of checking the concern for the responsive viewports. You can check your Site on a real time device (Mobile/desktop/tablet) and check the issue.
Best Regards,
Hi,
I have added an empty container and that has made things better for the time being. Thanks for your help.
Hello,
Glad that you have found a solution, let me know if the topic can be closed.
Thank you for your time.
Kind Regards
.
