Diseño en vivo de Layout de producto #3 con el Theme Builder de Divi

En nuestro #UXDIVILiveDesign​​ nuevo haremos el diseño en vivo de un layout de producto #3 personalizado con el Theme Builder en Divi. En este caso buscaremos crear un layout de producto personalizado con variaciones de colores aplicado todo en Divi.

Resultado:

Ver demo

Código CSS Usado:

Ajustar los espacios en variation Swatches:

/* CSS para espacios en variation swatches */
#left-area ul, .comment-content ul, .entry-content ul, .et-l--body ul, .et-l--footer ul, 
.et-l--header ul, body.et-pb-preview #main-content .container ul {
    list-style-type: disc;
    padding: 0 0 0px 0em;
    line-height: 2px;
}

Corregir color en precio de variaciones de producto:

#et_search_icon:hover, #top-menu li.current-menu-ancestor>a, #top-menu li.current-menu-item>a, .bottom-nav li.current-menu-item>a, 
.comment-reply-link, .entry-summary p.price ins, .et-social-icon a:hover, .et_password_protected_form .et_submit_button, .footer-widget h4, 
.form-submit .et_pb_button, .mobile_menu_bar:after, .mobile_menu_bar:before, .nav-single a, .posted_in a, 
.woocommerce #content div.product p.price, .woocommerce #content div.product span.price, .woocommerce #content input.button, 
.woocommerce #content input.button.alt, .woocommerce #content input.button.alt:hover, .woocommerce #content input.button:hover, 
.woocommerce #respond input#submit, .woocommerce #respond input#submit.alt, .woocommerce #respond input#submit.alt:hover, 
.woocommerce #respond input#submit:hover, .woocommerce-page #content div.product p.price, .woocommerce-page #content div.product span.price, 
.woocommerce-page #content input.button, .woocommerce-page #content input.button.alt, .woocommerce-page #content input.button.alt:hover, 
.woocommerce-page #respond input#submit, .woocommerce-page #respond input#submit.alt, .woocommerce-page #respond input#submit.alt:hover, 
.woocommerce-page #respond input#submit:hover, .woocommerce-page .star-rating span:before, .woocommerce-page a.button, 
.woocommerce-page a.button.alt, .woocommerce-page a.button.alt:hover, .woocommerce-page a.button:hover, 
.woocommerce-page button.button, .woocommerce-page button.button.alt, .woocommerce-page button.button.alt.disabled, 
.woocommerce-page button.button.alt.disabled:hover, .woocommerce-page button.button.alt:hover, 
.woocommerce-page button.button:hover, .woocommerce-page div.product p.price, .woocommerce-page div.product span.price, 
.woocommerce-page input.button, .woocommerce-page input.button.alt, .woocommerce-page input.button.alt:hover, 
.woocommerce-page input.button:hover, .woocommerce .star-rating span:before, .woocommerce a.button, 
.woocommerce a.button.alt, .woocommerce a.button.alt:hover, .woocommerce a.button:hover, .woocommerce button.button, 
.woocommerce button.button.alt, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, 
.woocommerce button.button.alt:hover, .woocommerce div.product p.price, .woocommerce div.product span.price, 
.woocommerce input.button, .woocommerce input.button.alt, .woocommerce input.button.alt:hover, 
.woocommerce input.button:hover, .wp-pagenavi a:hover, .wp-pagenavi span.current {
    color: #222222;
}

CSS personalizado para Galería vertical en producto.

/* para deskto */
display: flex;
align-items: center;

/* para tablet y movil */
display: block;

CSS Personalizado para Galería vertical en producto (colocar en módulo de código debajo de la imagen)

<style>
 
.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 5px;
}
 
.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}
 
.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}
 
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}
 
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}
 
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 5px;
}
 
</style>

Si eres premium, descarga el layout completo desde acá abajo 👇