Help with WooCommerce single product page please!

Hi, I’m just doing a WooCommerce site using Pro and on the basket and checkout page I wanted to have a border to separate each product listed and also in the cart between the subtotal, shipping and total. I used some CSS in the Pro Theme Options > Global CSS and it’s looking as I want it as far as the basket and checkout page is concerned, but for some reason it’s also added a border above the product size variations on the single product page and I’ve tried to specify the CSS even further adding .woocommerce-cart but nothing stops it from appearing on the product page and I have no idea how to get around it!

Here’s the CSS I’ve used:

  .woocommerce .cart-collaterals table th, table td {
    border-top: 1px solid #bfbfbf !important;

Here’s a screen grab of the border on the product page I’m trying to get rid of!

I’ll put the URL in a secure note as it’s on my staging site which is built on a temporary link.


Hello @core365,

Thanks for writing to us.

The custom CSS code you have added would work on multiple pages since you have added “,” which means it would work on any “TABLE TD”. To get rid of this you need to specify the selector so that it recognizes which “TABLE TD” style would render.

For the quick fix, you can add this custom CSS code to remove the border from the product details page only.

.woocommerce.woocommerce-page.single-product .summary.entry-summary table td{
border-top: 0 !important;

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.

Hi @prakash_s,

That’s spot on! Thank you so much for that fix, I just couldn’t figure it out!

Thanks again for your help and time!

Hello @core365,

Glad that we were able to help you. Please feel free to reach us if you have any queries regarding our theme and theme settings.