Archived topic
WooCommerce Product Page CSS for a specific Layout from the Library
3 replies · Started by Kiril on July 4, 2020
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!
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
Much appreciated.
Thanks a lot!
You're welcome
