Docs

[Itwebdevelopment]

Hi, I’d like to style my login page:

https://www.dzdrones.com/my-account/

To look like this:

Is this possible?

Thank you!!

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.woocommerce {
    width: 25%;
    margin: 0 auto;
}

.woocommerce-account .button, .woocommerce-checkout .button {
    width: 100%;
    border: 0px solid rgba(0, 0, 0, 0.1);
    font-size: 18px;
}

Thanks.

[Itwebdevelopment]

Hi this made all my woocommerce pages that screen width can I just make it so it happens on the login?

[Prasant Rai]

Hello There,

Extremely sorry for the confusion, please use following CSS instead:

.page-id-32 .woocommerce {
    width: 25%;
    margin: 0 auto;
}

.page-id-32 .woocommerce-account .button, .woocommerce-checkout .button {
    width: 100%;
    border: 0px solid rgba(0, 0, 0, 0.1);
    font-size: 18px;
}

Thanks.

[Itwebdevelopment]

Hi this is effecting the internals once the user is logged in and the woocommerce widgets in the footer. Is there any way to fix this?

[Christopher]

Hi there,

Please provide us with login credentials and screen shots so we can check the issue.

Thanks.

[Itwebdevelopment]

This reply has been marked as private.

[Rad]

Hi there,

Please try this

.page-id-32 .woocommerce form.login {
    width: 25%;
    margin: 0 auto;
}

.page-id-32 .woocommerce form.login .button, .woocommerce-checkout .button {
    width: 100%;
    border: 0px solid rgba(0, 0, 0, 0.1);
    font-size: 18px;
}

Thanks!

[Itwebdevelopment]

Hi My login button is still aligned on the left. Can you help?

[Lely]

Hi There,

See attached screenshot of what I am seeing at the moment. Login button is centered.
The only left aligned is the Login text. To center that, please use this custom CSS:

.woocommerce-account .woocommerce h2:first-child{
    text-align: center;
}

Hope this helps.

[Author]

Posts