Archived topic
How to format a Product Page
4 replies · Started by Stefanie on November 30, 2022
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!
Hi there,
can you explain or share an example of what design you're trying to achieve ?
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
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:
are you kidding me!??! 😍
it's PERFECT.
