WooCommerce Composite Products: Turn Stacked Components into 'Cards' with CSS

Component Cards CSS.md

This CSS is a basic proof of concept to turn component options in Composite Products into 'Cards':

To try this out on your site, be sure to set the 'Stacked' and 'Before tabs' layout options on your composite product:

Once you've set up a Composite Product with those layout options, you can add the CSS to the Additional CSS area in your Customizer.

Note that this should be considered a proof of concept and a starting point, not production-ready CSS. For instance, this has no awareness of mobile device sizes.

wc-composite-component-cards.css

/* Turn components into cards | 5622819-zen LDG */
.composite_component {
    display: inline-block;
    margin: .5rem;
    max-width: 230px;
}

.component_title {
    margin-bottom: 0px !important;
}

.component_inner { 
    border: 1px silver solid;
    background: #FAFAFA;
    margin-bottom: 1rem;
    padding: .5rem !important;
}

.selected_option_label {
    display: none;
}

.component_wrap .quantity, 
.component_wrap .input-text.qty, 
.composited_product_images,
.component_data.details {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}