[mattdmediaParticipant]

Hi,

I’m working on a site and the clients designs are based of the default My Account look in WooCommerce. I’m using the Integrity Stack which seems to be customizing WooCommerce? I can’t seem to get back to the default look and override the styling X-Theme has done.

Are there any suggestions? Or a location where php for the account page can be adjusted?

Thanks! 🙂

[RupokMember]

Hi there,

Thanks for writing in! WooCommerce has seamless integration with X so the templates and styles will be override by X. It won’t be easy to exclude them from your site. But if you can point some changes then we might provide you some CSS to override some styles.

Thanks!

[mattdmediaParticipant]

Thanks Rupok,

The Woocommerce with Xtheme integration is great! But for this particular site they have pre-made designs that I’m having trouble achieving with X-theme’s integration.

My request is primarily how the ‘My Account’ page is setup. I’ve attached screenshots of the original Integrity layout which you are familiar with and the standard Woocommerce (tabs) look where the client has based their designs off. I’ve also attached the design I’m trying to achieve.

Thanks so much! 🙂

[LelyModerator]

Hi There,

Thank you for the screenshots. Please add the following CSS on Appearance > Customize > Custom Edit Global CSS:

nav.woocommerce-MyAccount-navigation {
    width: 20%;
    float: left;
    display: inline-block;
}
.woocommerce-MyAccount-navigation ul {
    margin-top: 0;
}
.woocommerce-MyAccount-navigation ul {
    margin-top: 0;
}
.woocommerce-MyAccount-navigation-link {
     display: initial;
}
.woocommerce-MyAccount-navigation-link a {
    margin: 0;
    padding: 15px 6px;
    text-align: left;
}
.woocommerce-MyAccount-navigation-link a:before {
    border-top: 1px solid #cccccc;
    border-radius: 0;
    background-color: transparent;
    opacity: .875;
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
}
.woocommerce-MyAccount-navigation-link:last-child a:before {
    border-top: 1px solid #cccccc;
    border-radius: 0;
    background-color: transparent;
    opacity: .875;
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
}
nav.woocommerce-MyAccount-navigation ul li:last-child a:before {
    border-bottom: 1px solid #ccc;
}

Hope this helps.

[mattdmediaParticipant]

Hi Lely,

Works great! Thanks so much!

One more questions – I’ve added a hover for the links. But I’m trying to keep it active for the tab selected.

Hover added:

.woocommerce-MyAccount-navigation-link a:hover {
  	background-color:#edf1f7;
}

[Rue NelModerator]

Hello There,

To change the hover link and keep it active for the tab selected, please use this code instead:

.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link a:hover {
  	background-color:#edf1f7;
}

Hope this helps. Please let us know how it goes.

[mattdmediaParticipant]

Thanks so Rue! .is was what I was missing.

Legends!

[Rue NelModerator]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts