Styling woocommerce buttons on my account

Hi there,

I’m trying to customize the buttons in the woo commerce account page to achieve consistency in terms of design. I’ve styled the buttons before any actions and when hovered. However, I can’t seem to figure out how to style the link when clicked (the text turns black) and I would like to set the active link to the same styling as when hovered over, so people can se which page they are on - can you help med with the correct classes, please?

Muy page is: openframe.org

I’ve used this CSS to achieve my current results:

/woocommerce my account styling of buttons/
.woocommerce-MyAccount-navigation-link a {
color: #1c8fc9;
border: 2px solid #1c8fc9;
background-color: #ffffff;
text-shadow: none;
box-shadow: none;
border-radius: 0.54em;
position: relative;
padding-top: 0.75em;
padding-right: 0.76em;
padding-bottom: 0.75em;
padding-left: 0.76em;
cursor: pointer;
font-size: 0.75em;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
font-family: “Raleway”,sans-serif;
font-weight: 600;
letter-spacing: 0.25em;
}

.woocommerce-MyAccount-navigation-link a:before {
border:none;
}

.woocommerce-MyAccount-navigation-link a:hover {
color: #ffff;
border: 2px solid #1c8fc9;
background-color: #1c8fc9;
text-shadow: none;
box-shadow: none;
border-radius: 0.54em;
}

Regards,
Carina

Hi Carina,

Could you please help us by providing the direct link to the page or steps that we need to make to reach this WooCommerce account page?

Thanks.

Hi Alaa,

Sure, https://openframe.org/min-konto/

Let me know if you need login credentials too.

Thanks!

Hi Carina,

I’m sorry but we require your login credentials to check your my account page. Make sure to use the secure note option to submit your login credentials.

Also you may try a plugin which has similar capabilities (https://wordpress.org/plugins/custom-my-account-for-woocommerce/).

Thanks!

Hi There,

thanks for suggesting a plugin, but I would rather just achieved the result with CSS :slight_smile:

Hi There @KnowledgeWorker

Could you please try adding the following CSS rule and it should resolve that issue.

.woocommerce-MyAccount-navigation-link a:hover, .woocommerce-MyAccount-navigation-link a:focus {
    color: #fff;
    background-color: #1c8fc9;
}

Thanks!

Hi There,

The css above solved the problem with the link color :slight_smile: Can you help me with the other issue as well - preserving the hover effect on the active link?

Thanks.

Hi There,

Please change the previous CSS to this:

.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link a:hover, 
.woocommerce-MyAccount-navigation-link a:focus {
    background: #1c8fc9;
    color: #fff;
}

Hope it helps :slight_smile:

Thanks! It works perfectly :slight_smile:

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.