[Resolved] Keep original WooCommerce styling after activiting GP WooCommerce module?

[Michael]

I notice that when you activate the WooCommerce module in GP, it changes the styling for WooCommerce. Is it possible to active the module but maintain WooCommerce’s default styling?

For example, I actually prefer the way the wc-tabs (Description, Additional information, Reviews) looks on a single products page with the tab look vs. the way the GP WooCommerce module styles it.

What would be great is if the module had the ability to select whether or not you want to use the WooCoomerce default style sheet and then go from there.

[Tom]

Hey Michael,

Technically we could remove the CSS added by the module, but then some of the options within the module wouldn’t work anymore (columns etc..).

Which options are you using in the module? If you’re using quite a few of them and only want a few of the old styles back, we may be able to use some CSS to bring them back.

[Michael]

Hi Tom,

I think at the very least, I’d like to maintain the original wc-tabs css (Description, Additional information, Reviews). Things the fonts, colours, sizes, etc. can more easily adjusted.

[Tom]

Try something like this:

.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0 0 0 1em;
    margin: 0 0 1.618em;
    overflow: hidden;
    position: relative;
    text-align: left;
    border-top: 0;
    border-bottom: 0;
}

.woocommerce #content div.product .woocommerce-tabs ul.tabs li, 
.woocommerce div.product .woocommerce-tabs ul.tabs li, 
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li, 
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
    border: 1px solid #d3ced2;
    background-color: #ebe9eb;
    display: inline-block;
    position: relative;
    z-index: 0;
    border-radius: 4px 4px 0 0;
    margin: 0 -5px;
    padding: 0 1em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: .5em 0;
    font-weight: 700;
    color: #515151;
    text-decoration: none;
}

[Michael]

Hi Tom,

It’s missing the horizontal line but that’s fine, I can do that. Maybe I’m the only person around here that seems to prefer the original look. 😉

What I would like is for GP Premium to do the bare minimum in terms of styling WooCommerce. After all, you write repeated about keeping GP as light as fast as possible. The wc-tabs section is one example where I don’t believe any styling is required and you’re taking up code doing so.

If GP users decide to re-style WooCommerce, you’ve allowed for that in the customizer. By styling the wc-tabs section, you’re making assumptions and design choices on behalf of your clients that can’t be changed through the customizer.

I understand that other parts, you mention the columns, should be styled and whatever is necessary to make it work better with GP. I get that.

Anyway, I hope I’m not alone in asking for this and I hope it can be addressed with future versions of GP Premium.

[Tom]

I agree mostly. However, those default tabs could use a little design love. I think we can find a compromise between what they are now, and what they are by default 🙂

[Michael]

Hi Tom,

I definitely agreed with about the default tabs needing a little design love. Hence why I’d rather do the styling myself and keep GP out of it. 😉

Thanks for your hard work.

[Tom]

No problem 🙂 Thanks for your feedback!

[Paul]

Hi Tom!

I’m a die hard fan of your Generate Press theme. However, I strongly agree with the criticisms above. The design of the woocommerce tabs isn’t effective. They don’t look like tabs at all. Would love an update to them.

-Paul

[Author]

Posts