Proceed to checkout and place order buttons misplaced

  • Hi,

    I’m running an ecommerce theme which uses woocommerce, the layout is fine and looks good in every single place apart from two. The “Proceed to checkout” button on the cart page is halfway up the page on top of some other content, and the “Place Order” button on the checkout page is out of line to the right.

    I have searched everywhere for where the css for these would be and how i could edit them. Any ideas? Is it likely to be part of my theme or editable in woocommerce files?

    Thanks

    https://www.ads-software.com/plugins/woocommerce/

Viewing 6 replies - 1 through 6 (of 6 total)

  • Please post the url to your site.

    Thread Starter PDY138

    (@pdy138)

    Ah yes of course, sorry:

    spinandink.co.uk

    The Proceed to checkout button on the cart page looks fine here. Try clearing your browser cache. What browser are you using? I tried on Chrome.

    The Proceed to PayPal button on the checkout page is a bit too far to the right as you say. I should not try to edit your theme or WooCommerce files because any edits may be overwritten by the updates.

    Try this in your custom css to correct the issue:

    .payment_methods + .form-row {width: 95%}

    If your theme does not have a setting where you can enter custom css, you can use a plugin like this one:
    https://www.ads-software.com/plugins/simple-custom-css/

    Thread Starter PDY138

    (@pdy138)

    Hi Lorro,

    That CSS code worked perfectly, thanks a lot.

    How do you discover the button reference/id you use in the CSS? (i.e. “.payment_methods”.

    Thanks for your help.

    In this case I’ve not altered the button, but the enclosing div. This was too wide at 100% width. The width should allow space for the paddings.

    To work on the problem, I used Chrome developer tools. I bring up the page in Chrome, right click and select “Inspect element”. The markup and styles are shown in a panel.
    https://developer.chrome.com/devtools

    Thread Starter PDY138

    (@pdy138)

    Thanks, appreciate the help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Proceed to checkout and place order buttons misplaced’ is closed to new replies.