Center whole single product page and tab design WooCommerce

Hi Dominique,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Hi,

The domain name is in the links for the screen shots ;)

The product page link in the browser address of one of the screen shots :)

To center the content, change this:

body.single-product .grid-container {
	max-width: 1350px;
	margin-left: 9%;
	margin-right: 9%;
}

@media (max-width: 1024px) {
body.single-product .grid-container {
	margin-left: 2%;
	margin-right: 2%;
	}
}

to:

body.single-product .grid-container {
	max-width: 1350px;
	padding-left: 9%;
	padding-right: 9%;
}

@media (max-width: 1024px) {
body.single-product .grid-container {
	padding-left: 2%;
	padding-right: 2%;
	}
}

I'm not sure I understand your 2nd question here well, the default woocommerce tab now has no bottom border. If you want to remove the bottom border from the active tab, try this:

.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active {
    border-bottom: 0;
}

Hi,

Thanks for the code.

If you look at screen shot: Screen Shot 2021-03-01 at 09.35.13.png that is how the tab is rendered with the separating line or bottom border. It looks like a tab from a folder. That screen shot is with GeneratePress premium WooCommerce DEACTIVATED.

If you look at screen shot: Screen Shot 2021-03-01 at 09.39.33.png that is how the tab is rendered without the separating line or bottom border. It just looks like a square and not a tab anymore. That screen shot is with GeneratePress premium WooCommerce ACTIVATED.

I would like it too look exactly as the first screen shot and don't understand how come when I activated the WooCommerce module in GeneratePress premium that it changed that layout.

Please advise

I see, then could you deactivated your cache plugin and clear cache so I can see where the CSS coming from?

Hi,

Having "Description" in the tab and "Description" in script text directly below is redundant. How do I remove "Description" in script style completely.

Also when there are going to be reviews the "Reviews" tab I imagine will appear. Same thing it will be doubled up in script text.

Can you please supply the code to remove both script style doubled up titles.

Thank you.

Sure

just end any url by /?nowprocket

You could give this CSS a try:

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-bottom: 1px solid #d3ced2;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin-left: 10px;
    border-radius: 5px 5px 0 0;
}

Perfect

How about the double titles?

Try this:

.single-product #tab-description h2 {
    display: none;
}

Everything is perfect

Thanks

You are welcome :)