Archived topic
Removing the additional information borders
11 replies · Started by Hana on June 7, 2022
Hello, How to Remove the additional information borders in the single product page, I want them for example like this with no table borders
Color: Black
Size: Small
Material: Cotton
Hi there,
can you share a link to a product where i can see them ?
please check the private link
Try this CSS:
.woocommerce .woocommerce-tabs table.shop_attributes th,
.woocommerce .woocommerce-tabs table.shop_attributes tr,
.woocommerce .woocommerce-tabs table.shop_attributes td {
border: 0;
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
It doesn't work my dear
Hi Hana,
Try this:
.woocommerce .woocommerce-tabs table.shop_attributes th,
.woocommerce .woocommerce-tabs table.shop_attributes tr,
.woocommerce .woocommerce-tabs table.shop_attributes td,
.woocommerce table.shop_attributes{
border: 0;
}
Sorry Ying, It doesn't work
Hi Hana,
Tested the code and it should work.
See: https://share.getcloudapp.com/ApuXOW0p
May we know how you’re adding the CSS code? Can you try adding it in Appearance > Customize > Additional CSS?
Moreover, I can see that you added PHP code in Appearance > Customize > Additional CSS. This would cause other code not to work in there. PHP code shouldn’t be added there. Kindly remove all non-CSS code in your Additional CSS and see how it goes.
For instance, you have this code in Additional CSS:
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
$tabs['description']['title'] = __( 'More Information' ); // Rename the description tab
$tabs['reviews']['title'] = __( 'Ratings' ); // Rename the reviews tab
$tabs['additional_information']['title'] = __( 'Product Data' ); // Rename the additional information tab
return $tabs;
}
This is PHP code and should be add through a plugin like Code Snippets for instance.
Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets
Kindly let us know.
It is work now my dear :)
but how to remove grey line mentioned in this screenshot
[url=https://postimg.cc/nMXNCcsQ][img]https://i.postimg.cc/gcsptxm4/grey-line.jpg[/img][/url]
Try this:
.woocommerce table.shop_attributes tr:nth-child(even) td, .woocommerce table.shop_attributes tr:nth-child(even) th {
background: none;
}
That is great
Thank you Leo :)
No problem :)