ul.wc-block-grid__products, ul.products { display: grid !important; gap: 30px; margin: 0; padding: 0; li.wc-block-grid__product, li.product { width: 100%; max-width: none !important; list-style: none; position: relative; text-align: center; position: relative; border: none; img { transition: opacity 0.3s; } &:hover { img { opacity: 0.7; } } .col-md-7 > *, .col-md-8 > *, > * { margin-top: 0; margin-bottom: 12px; &:last-child { margin-bottom: 0 !important; } } svg { fill: #fff; } .wc-block-grid__product-image { margin-bottom: 0; } .price, .woocommerce-LoopProduct-link, img { display: block; } .wp-block-button__link, .button { display: table; margin: 17px auto 0; text-transform: uppercase; padding: 11px 24px; line-height: 1; } .wc-block-grid__product-title, .woocommerce-loop-product__title, .woocommerce-loop-category__title, .botiga-wc-loop-product__title { @include font-size(16); font-weight: 400; word-break: break-word; transition: ease color 300ms; text-decoration: none; } .wc-block-grid__product-link { text-decoration: none; } } } /* Responsive shop columns */ @media screen and (min-width: 48em) { ul.products { @for $i from 1 through 6 { &.columns-#{$i} { grid-template-columns: repeat($i, 1fr); } } } .wc-block-grid { @for $i from 1 through 6 { &.has-#{$i}-columns .wc-block-grid__products { grid-template-columns: repeat($i, 1fr); } } } } @media screen and (max-width: 991px) { @for $i from 1 through 6 { .shop-columns-tablet-#{$i} { ul.products, .wc-block-grid .wc-block-grid__products { grid-template-columns: repeat($i, 1fr); } } } } @media screen and (max-width: 719px) { @for $i from 1 through 6 { .shop-columns-mobile-#{$i} { ul.products, .wc-block-grid .wc-block-grid__products { grid-template-columns: repeat($i, 1fr); } } } } .woocommerce-pagination { clear: both; } .woocommerce-sorting-wrapper { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #eee; p { margin: 0; } select { border: 0; padding: 0 25px 0 0; max-width: 220px; min-height: auto; } } .product-list { ul.products { grid-template-columns: 1fr; } ul.products li.product { width: 100% !important; margin-right: 0; .loop-image-wrap { margin: 0; } .loop-button-wrap { &.button-layout3 { position: absolute; top: 50%; left: 50%; opacity: 0; visibility: hidden; transform: translate3d(-50%, -40%, 0); transition: ease opacity 300ms, ease visibility 300ms, ease transform 300ms; } &.button-layout4 { position: absolute; bottom: 15px; left: 15px; opacity: 0; visibility: hidden; transition: ease opacity 300ms, ease visibility 300ms; } } &:hover { .loop-button-wrap { &.button-layout3 { opacity: 1; visibility: visible; transform: translate3d(-50%, -50%, 0); } &.button-layout4 { opacity: 1; visibility: visible; } } } } } .loop-button-wrap.button-layout4 { .ws-svg-icon { width:24px; height:24px; } .button, .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link { margin-left: 0 !important; } } .loop-price-inline { text-align: right; } .loop-image-wrap { position: relative; overflow: hidden; } .related.products, .upsells.products, .product-grid { .button-layout3, .button-layout4 { position: absolute; opacity: 0; transition: ease opacity 300ms, ease visibility 300ms, ease transform 300ms; } .button-layout3 { top: 50%; width: 100%; text-align: center; transform: translate3d(0, -40%, 0); a { display: inline-block !important; } } ul.products { li.product { &:hover { .button-layout3 { opacity: 1; visibility: visible; transform: translate3d(0, -50%, 0); } .button-layout4 { opacity: 1; } } } } .button-layout4 { width: 100%; bottom: 10px; left: 10px; } } .button-layout3, .button-layout4 { a { margin-top: 0 !important; } } .button-layout3 { .wc-forward { margin-left: 5px; } } .button-layout2 { .wc-forward { margin-top: 8px; display: block; } } ul.wc-block-grid__products { li.wc-block-grid__product { .button-layout3, .button-layout4 { .wp-block-button { margin-bottom: 0; } } &:hover { .button-layout3 { opacity: 1; visibility: visible; transform: translate3d(0, -50%, 0); } .button-layout4 { opacity: 1; } } } } .wc-block-grid { &.has-4-columns, &.has-5-columns, &.has-6-columns { .wc-block-grid__product { font-size: 1em !important; } } } .wc-block-grid__product-link { display: block; } .price { font-weight: 600; ins { background-color: transparent; } del { margin-right: 6px; font-weight: 400; } } ul.products { li.product-category { mark { background: none; color: inherit; } } } .product-category-item-layout1 { ul.products { li.product-category { .woocommerce-loop-category__title { margin-top: 15px; } } } } .product-category-item-layout2 { ul.products { li.product-category { a { position: relative; display: block; } .woocommerce-loop-category__title { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(255, 255, 255, 0.6); padding: 20px; margin: 0; } } } } .product-category-item-layout3 { ul.products { li.product-category { a { position: relative; display: block; overflow: hidden; } .woocommerce-loop-category__title { position: absolute; left: 0; bottom: 0; width: 100%; padding: 20px; margin: 0; color: #FFF; z-index: 1; &:after { content: ''; position: absolute; left: 0; bottom: 0; height: 0; width: 100%; box-shadow: 0px 0px 60px 60px rgba(0, 0, 0, 0.5); z-index: -1; } } } } } .product-category-item-layout4 { ul.products { li.product-category { a { position: relative; display: block; } .woocommerce-loop-category__title { position: absolute; left: 0; bottom: 0; width: calc( 100% - 30px ); background: #FFF; padding: 20px; margin: 0 0 15px 15px; } } } } .product-category-item-layout5 { ul.products { li.product-category { a { position: relative; display: block; overflow: hidden; &:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 0; } } .woocommerce-loop-category__title { position: absolute; left: 50%; top: 50%; margin: 0; color: #FFF; transform: translate3d(-50%, -50%, 0); z-index: 1; } } } }