Home>Support>checkout field display issue

checkout field display issue

By aungar93, 5 years ago. Last reply by Alex S, 5 years ago.

Hi,

The woocommerce checkout on my website is not displaying correctly as it used to, there are large gaps in-between the card number, expiry date and security code fields.

The website is https://www.pawspetsuppliesltd.co.uk/

Thanks,

Adam

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 5 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Adam,

    You can correct this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:

    .woocommerce-checkout #payment div.form-row {
    padding: 0;
}

    You might also need to install the SiteOrigin CSS Editor.

  2. 5 years, 10 months ago aungar93

    Thanks Alex,

    That works however the checkout fields seem to only cover 3\4 of the full page, is there a way to make them span the full width please?

    Thanks,

    Adam

  3. 5 years, 9 months ago Alex S
    Hi, I Work Here

    Hi Adam,

    You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    .woocommerce-page.woocommerce-cart #primary, .woocommerce-page.woocommerce-checkout #primary {
    width: 100%;
}

    You might also need to install the SiteOrigin CSS Editor.

  4. 5 years, 9 months ago aungar93

    Thanks Alex, that worked great! However now my product category pages are a different width to the all other pages, the header widgets should be underneath the logo rather than to the left. I am not sure if it is the CSS that has caused this. Could you look into this for me please?

    Thanks,

    Adam

  5. 5 years, 9 months ago Alex S
    Hi, I Work Here

    Hi Adam,

    The provided CSS is only able to affect the cart and checkout pages. Regardless, please try (temporarily) removing the previously provided CSS to see if that helps. If removing the previously provided CSS doesn’t help, can you please start a new thread with your question? This will allow others who have similar issues to find related posts easily. Sorry about this!

    Page: New Thread

    If you’re a premium user, you’re entitled to priority email support. If you would like to make use of that please follow the instructions found on your dashboard Page: Dashboard

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More