Tab Borders, Shapes, and Colors Product Pages

Support
#1

Hello!

I’ve done my damnedest to get rid of the borders everywhere on the product pages, including the tabs.
I found all this code and put it in, but the tabs still have borders.

}
.woocommerce li.product,
.woocommerce-page li.product,
.woocommerce li.product .entry-wrap,
.woocommerce-page li.product .entry-wrap,
.woocommerce li.product .entry-featured,
.woocommerce-page li.product .entry-featured {
box-shadow: none;
border: none;
}

.woocommerce .upsells ul.products li.product,
.woocommerce .related ul.products li.product,
.woocommerce .cross-sells ul.products li.product,
.woocommerce-page .upsells ul.products li.product,
.woocommerce-page .related ul.products li.product,
.woocommerce-page .cross-sells ul.products li.product,
.woocommerce .upsells ul.products li.product .entry-featured,
.woocommerce .related ul.products li.product .entry-featured,
.woocommerce .cross-sells ul.products li.product .entry-featured,
.woocommerce-page .upsells ul.products li.product .entry-featured,
.woocommerce-page .related ul.products li.product .entry-featured,
.woocommerce-page .cross-sells ul.products li.product .entry-featured {
box-shadow: none;
border: none;
}
.woocommerce div.product .images .thumbnails>a, .woocommerce-page div.product .images .thumbnails>a,a.woocommerce-main-image.zoom.x-img.x-img-link.x-img-thumbnail.man{
box-shadow: none;
border: none;
}
.entry-wrap {
box-shadow: none;
}
.x-tab-content {
border: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border: 0 !important;
}
.woocommerce .woocommerce-tabs {
border: 0 !important; /* remove border */
}

Similarily, I’m also trying to figure out how to just make the tabs appear as rounded edge buttons at a set width while changing the button and text color. Any help with both these issues would be much appreciated!

Jesse

#2

Hi Jesse,

Thank you for reaching out to us. This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. To remove all the borders and make the tabs button try adding the following code in the Theme Options > CSS:.

.woocommerce-tabs * {
    border: none !important;
}

.x-nav-tabs>li {
    max-width: 230px;
    margin-right: 15px;
}

.x-nav-tabs>li>a, 
.x-nav-tabs.top>.active>a {
    border-radius: 10px;
    background: #9fcc51;
    color:  #fff;
}

.x-nav-tabs>li>a:hover,
.x-nav-tabs.top>.active>a:hover {
    border-radius: 10px;
    background: #7fa33f;
    color:  #fff;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code.Hope this helps!

CSS to Stop Hover Effect in Pro Theme Integrity Stack Widgets with Lists (UL, OL)
#3

Thank you! For some reason this worked on that website, but not on my other website, not entirely.

https://vitalitycbd.com/x/#/options?url=https://vitalitycbd.com/buy/organic-cbd-oil-500-mg

There are still borders in the description/tab area.

Any ideas?

Jesse

#4

Hello Jesse,

Please find and update this code:

.woocommerce-tabs * {
    border: none!important;
}

to

.woocommerce-tabs * {
    border: none!important;
    box-shadow: none;
}

Hope this helps.

#5

Thank you that worked perfectly!

#6

We are delighted to assist you with this.

Cheers!

#7

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