[Resolved] WooCommerce Product Page CSS for a specific Layout from the Library

[Kiril]

HI there,

I installed the NICHE layout, but I want to create the exact same LAYOUT along with CSS, Style of the TABS and STICKY TOP BAR as this site here -> https://healspire.com/shop/cbd-duo-kit/

Can anyone share the additional Code I need.

In my case, something is broken as I don’t see the WOO Products Gallery at all (link is provided to this thread in private)

Much appreciated!

[David]

Hi there,

the Niche site has a stacked gallery – which has been disabled. To make the default gallery display go to Customizer > Additional CSS and remove this:

/* Stacked Gallery for desktop and sticky summary */

@media (min-width: 768px) {
	.woocommerce-product-gallery {
		display: none;
	}

	.woo-sumamry-wrap {
		display: grid;
		grid-template-columns: 60% 40%;
		grid-template-rows: auto;
		margin-bottom: 80px;
	}

	.woo-gallery-stack {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.woo-gallery-stack img {
		margin-bottom: 20px;
	}

	.woocommerce-tabs {
		grid-column: 1;
	}

	.woocommerce div.product div.summary {
		grid-column: 2;
		grid-row: 1;
		margin-left: 80px;
		position: -webkit-sticky;
		position: sticky;
		top: 105px;
		bottom: 100px;
		padding-right: 80px;
	}

	.single-product span.onsale {
		position: absolute;
		top: 0;
	}
}

For the tabs – that site uses this CSS:

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: #767676;
    border-radius: 5px;
    color: #ffffff;
}

li#tab-title-description {
    margin-right: 10px;
}

@media (max-width: 768px) {
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        display: block;
    }
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border-radius: 5px;
    background: #afafaf;
    margin-right: 10px !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #ffffff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #ffffff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #ffffff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #ffffff !important;
}

For the sticky bar – you can enable Display Sticky add to cart on Scroll in Customizer > Layout > Woocommerce

https://docs.generatepress.com/article/woocommerce-overview/#single-product

[Kiril]

Much appreciated.

Thanks a lot!

[David]

You’re welcome

[Author]

Posts