[Support request] How to format a Product Page

[Stefanie]

Hi – I’m just getting started with Generate Press. I’d like to modify my single Product Page. I see I can import different product pages, but I’d like to create a different style in general.

So far, I see that I can:
– import a demo to get a certain style
– in Customizer, adjust a limited number of settings for the Woocommerce page
– add Elements to the product page to add additional blocks

Am I missing something? I’d like to change the style of the existing page. Is there any other way to do this other than just importing a demo page? (or the ways above?)

thank you!

[David]

Hi there,

can you explain or share an example of what design you’re trying to achieve ?

[Stefanie]

Sure, so this is my current design, which I love the look but it’s terribly slow. https://www.littlemoonpapercompany.com/store/beginning-sounds-clip-cards/

I’d love to just recreate something similar, specifically:
– the little orange dividers under the text (I created one as an element but can’t get the placement right with hooks)
– adding in social share buttons under the product summary
– formatting the Description/Additional Info/Reviews headers

So far, here’s what I’ve created with GP: https://www.littlemoonpapercompany.com/sandbox/product/sample-nature-cards/

Thank you!
Stefanie

[David]

Ok, so lets deal with the fancy tab style.
Try adding this CSS to your site:

.woocommerce div.product .woocommerce-tabs ul.tabs {
    justify-content: center;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: 0;
    padding: 10px 15px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: poppins, sans-serif;   
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:before {
    content: '';
    display: block;
    position: absolute;
    left: 0; 
    bottom: 0;
    height: 3px;
    width: 0;
    z-index: 1000;
    transition: width 0.3s;
    background-color: var(--accent-brown);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:before, 
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a:before {
    width: 100%;
}
.woocommerce #content div.product .woocommerce-tabs ul.tabs {
    background-image: linear-gradient(#ccc, #ccc);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: bottom;
}
@media (max-width: 768px) {
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-direction: row !important;
    }
}

How to add CSS:

https://docs.generatepress.com/article/adding-php/

[Stefanie]

are you kidding me!??! 😍

it’s PERFECT.

[Author]

Posts