Misplaced “Add to Cart”-Button on Product page

  • Resolved robertsartifact

    (@robertsartifact)


    2 years, 3 months ago

    Hello there,

    I have an issue with My WooCommerce product pages and have trouble fixing it.

    While in mobile view on the product page, the “Add to cart”-button appears outside the site’s borders. Causing it to disappear for users or stretching a white border to the right of the screen.
    You can still see the quantity input field but the Add to cart is too far on the right.

    It seems I do not find any solution to put it back into place.
    Whether I scroll through the product options, Elementor editor/settings, WooCommerce- or Product settings. Even in the CSS I am not able to find the right option.
    clearing cache, updating all Plugins, and disable/enable them did not have an effect.

    If necessary, here is some information about my System:

    Wordpress Version: 6.1

    Currently active Addons:
    Connect Polylang with Elementor – 2.3.0
    All-in-One WP Migration – 7.63
    Astra Pro – 3.9.1
    Checkout Field Editor for WooCommerce – 1.7.1
    Code Snippets – 3.2.0
    Elementor – 3.7.2
    Elementor Pro – 3.7.3
    GDPR Cookie Consent – 2.1.2
    Polylang 3.2.5
    Really Simple SSL – 5.3.3
    WooCommerce – 6.8.1
    WooCommerce Polylang Integration – 1.2.6
    WooCommerce Upload Files – 54.3
    WooLentor – WooCommerce Elementor Addons + Builder – 2.4.3
    WP-Dateimanager – 7.1.6

    I hope you can help me to fix this so I can detect and solve this and similar issues on my own in the future.
    Since I did not configure this site from scratch and only now am learning to support and add content, feel free to explain it for newbs.

    Thank you kindly & best wishes,
    Robert

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Kaushik S. a11n

    (@kaushiksomaiya)

    Hi Robert!

    Thank you for contacting us! ??

    I understand the add to cart button on mobile is getting outside the view port.

    This appears due to a conflict between the plugin WooCommerce Upload Files and your theme Astra.

    You can apply the CSS below to fix this issue:

    
@media screen and (max-width:600px){
.woocommerce div.product .woocommerce-variation-add-to-cart, .woocommerce div.product.product-type-simple form.cart {
  display: block;
}
}

    The CSS above can be pasted under WP Admin > Appearance > Customize > Additional CSS.

    I hope this helps!

    Thread Starter robertsartifact

    (@robertsartifact)

    Hey Kaushik,

    Thank you very much! Solved it in an instant. And thank you for your explanation.

    Is applying Additional CSS the only way of fixing similar issues? There are a few more misplaced or glitching elements on my site that I want to get fixed. But I don’t know how the code for changing the elements in the CSS works, yet.

    Hi @robertsartifact

    Glad to hear you found the previous reply helpful!

    Is applying Additional CSS the only way of fixing similar issues?

    Yes, applying additional CSS is the best solution for this type of issues.
    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Thread Starter robertsartifact

    (@robertsartifact)

    Hey @maykato ,

    Thank you for the quick answer and provided links!
    Seems like a good opportunity to learn if that’s what it takes! ??

    See you around and have a nice day!

    Hi @robertsartifact

    I’m glad we were able to help!

    If you have a few minutes, we’d love it if you could leave us a review:

    https://www.ads-software.com/support/plugin/woocommerce/reviews/

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Misplaced “Add to Cart”-Button on Product page’ is closed to new replies.