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

Home Forums Support WooCommerce Product Page CSS for a specific Layout from the Library

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1352319
    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!

    #1352445
    David
    Staff
    Customer Support

    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

    #1353350
    Kiril

    Much appreciated.

    Thanks a lot!

    #1353448
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.