You've already forked wc-composable-product
Add custom page template for composable products, bump to v1.3.2
All checks were successful
All checks were successful
- Custom WooCommerce template with compact header + full-width selector - Twig layout template (single-product-composable.html.twig) + PHP loader - Body class 'single-product-composable' for CSS scoping - Renamed *.twig to *.html.twig (proper naming convention) - Refreshed .pot with accurate file refs, merged all .po files Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -240,3 +240,85 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Composable product page layout
|
||||
========================================================================= */
|
||||
|
||||
/* Compact product header */
|
||||
.composable-product-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.composable-header-thumbnail {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.composable-header-thumbnail img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.composable-header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.composable-product-layout .product_title {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.composable-header-price {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.composable-header-description {
|
||||
color: #666;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.composable-header-description p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Full-width selector area */
|
||||
.composable-selector-area {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Override WooCommerce default product layout for composable products */
|
||||
.single-product-composable .composable-product-layout {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.single-product-composable .composable-product-layout .wc-composable-product-selector {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Responsive: stack header vertically on small screens */
|
||||
@media (max-width: 768px) {
|
||||
.composable-product-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.composable-product-layout .product_title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user