.single-product { .header-image:not(:empty) { margin-bottom: 80px; } div.product { position: relative; .woocommerce-product-gallery { position: relative; .woocommerce-product-gallery__trigger { position: absolute; top: 1.5em; right: 1.4em; display: block; z-index: 99; } .flex-control-thumbs { margin: 0; padding: 0; display: flex; &:not(.botiga-slides){ grid-gap: 20px; } li { cursor: pointer; list-style: none; user-select: none; margin: 0; padding: 0; width: 95px; img { opacity: 0.5; width: 100%; height: 100%; padding: 4px; object-fit: cover; transition: opacity .2s, border-color .3s; will-change: opacity, border-color; &:hover, &.flex-active { opacity: 1; border: 1px solid #212121; } } } } } &.sold-individually, &.has-only-one-instock { form.cart { .quantity { display: none; } } } } &.no-single-breadcrumbs { .gallery-showcase, .gallery-full-width { margin-top: -80px; } } } /* Allow vertical thumb control only on larger screens */ @media (min-width: 992px) { .single-product { div.product { .gallery-vertical, .gallery-showcase { .woocommerce-product-gallery { flex-direction: row; } .flex-viewport{ width: calc(100% - 85px); } .flex-control-thumbs { order: -1; flex-direction: column; li { width: 65px; height: 65px; } } .flex-nav-prev { left: calc(80px + 30px); } .flex-nav-next { right: 30px; } } .gallery-showcase { left: 50%; width: 80vw; transform: translate3d(-50%, 0, 0); .woocommerce-product-gallery { flex: 0 0 60%; max-width: 60%; } .entry-summary { flex: 0 0 40%; max-width: 40%; } .swiper-vertical { margin: auto 0; } } } } } .stock { &:empty::before { display: none; } &.in-stock { color: $woocommerce__color-success; } &.out-of-stock { color: $woocommerce__color-error; } } .product-gallery-summary { display: flex; flex-wrap: wrap; align-items: flex-start; .woocommerce-product-gallery{ display: flex; grid-gap: 20px; flex-direction: column; &.hidden{ display: none; } } .woocommerce-product-gallery, .entry-summary { flex: 0 0 50%; max-width: 50%; } .entry-summary { padding-left: 40px; > *:last-of-type { margin-top: 15px; } } .product_title { margin-top: 0 !important; margin-bottom: 20px; } .divider { margin-top: 25px; } .woocommerce-product-rating { margin-top: 0; margin-bottom: 20px; } .product_meta { @include font-size(14); color: $color__primary; margin-bottom: 20px; & > * { display: block; margin-bottom: 8px; text-transform: uppercase; & > * { text-transform: none; } } } .stock { margin-bottom: 20px; } .price { @include font-size(24); margin-bottom: 20px; del { @include font-size(16); position: relative; top: -2px; } } form.cart { flex-wrap: wrap; margin-bottom: 30px; & + .product_meta { margin-top: 30px; } } .botiga-single-addtocart-wrapper { display: flex; width: 100%; flex-wrap: wrap; gap: 20px; h4, table{ width: 100%; flex-basis: 100%; } @media(max-width: 1024px) { flex-direction: column; } .button { flex-grow: 1; display: inline-block; text-transform: uppercase; padding-top: 17px; padding-bottom: 17px; @media(max-width: 991px) { width: 100%; } } a.added_to_cart{ display: none; } & + button, & + div { margin-top: 15px; } } button, div { & + .botiga-single-addtocart-wrapper { margin-top: 15px; } } .botiga-accordion { .price { font-size: inherit !important; } } .botiga-trust-badge-wrapper, .botiga-reasons-list { & + div { margin-top: 15px; &.botiga-trust-badge-wrapper { margin-top: 30px; } } } .shortcode-content, .html-content { & + div { margin-top: 15px; } } &.gallery-side { .flex-viewport { width: calc( 100% - 80px ); float: right; } .flex-control-nav { width: 60px; float: left; li { width: 100% !important; margin-bottom: 15px; } } } &.gallery-single, &.gallery-showcase, &.gallery-full-width { ul.flex-direction-nav { margin: 0; padding: 0; list-style: none; position: absolute; top: calc(50% - 20px); width: 100%; li{ position: absolute; top: calc(50% - 20px); z-index: 998; margin: 0; padding: 0; } } .flex-nav-prev { left: 15px; } .flex-nav-next { right: 15px; } .flex-next, .flex-prev { display: block; position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid $color__primary; background: #FFF; text-indent: -9999px; transition: all 0.3s; } .flex-next::after, .flex-prev::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; color: $color__primary; display: inline-block; line-height: 37px; text-align: center; border-top: 8px solid transparent; border-bottom: 8px solid transparent; transition: all 0.3s; } .flex-next:hover, .flex-prev:hover { background-color: $color__primary; &:before { border-right-color: #FFF; } &:after { border-left-color: #FFF; } } .flex-next::after { visibility: visible; border-left: 12px solid $color__primary; transform: translate3d(-40%, -50%, 0); } .flex-prev::before { visibility: visible; border-right: 12px solid $color__primary; transform: translate3d(-70%, -50%, 0); } } &.gallery-single{ .woocommerce-product-gallery { grid-gap: 0; } } &.gallery-showcase, &.gallery-full-width { position: relative; padding: 40px 0; &:before { content: ''; top: 0; left: 50%; right: 0; bottom: 0; background: #f0f0f0; position: absolute; z-index: 0; width: 100vw; transform: translate3d(-50%, 0, 0); } .flex-next, .flex-prev { border: none; background: none; } .flex-next::after, .flex-prev::before { content: ''; width: 10px; height: 10px; border-top: 2px solid $color__primary; border-right: 2px solid $color__primary; border-bottom: none; border-left: none; transform: rotate(45deg); } .flex-prev::before { transform: rotate(-135deg); transform-origin: 30% 32%; } .flex-next::after { transform-origin: 70% -60%; } .flex-next:hover, .flex-prev:hover { &:before, &:after { border-color: #FFF; } } .woocommerce-product-gallery, .entry-summary { z-index: 2; ul.flex-direction-nav { opacity: 0; visibility: hidden; transition: ease opacity 300ms; } &:hover { ul.flex-direction-nav { opacity: 1; visibility: visible; } } } } &.gallery-full-width { .woocommerce-product-gallery, .entry-summary { ul.flex-direction-nav { li.flex-nav-prev { left: 15px; } li.flex-nav-next { right: 15px; } } } .woocommerce-product-gallery { .flex-control-thumbs { display: block !important; } } } &.gallery-showcase { padding: 80px 0; } &.gallery-grid, &.gallery-scrolling { .woocommerce-product-gallery__wrapper { margin-right: -10px; margin-left: -10px; > div { padding-right: 10px; padding-left: 10px; &:not(:first-child) { width: 50%; } & + div, & + .onsale + div { margin-top: 20px; } a { &:before { } &:hover { img { opacity: 0.8; } } img { transition: ease opacity 300ms; } } } } } &.gallery-scrolling { .woocommerce-product-gallery__wrapper { > div { &:not(:first-child) { width: 100%; } } } } &.gallery-full-width { flex-direction: column; .woocommerce-product-gallery, .entry-summary { position: relative; flex: 0 0 100%; width: 100%; max-width: 100%; padding-left: 0; margin-top: 40px; } .woocommerce-product-gallery__wrapper { img { display: block; margin: 0 auto; } } .flex-control-thumbs { justify-content: center; li { max-width: 95px; } } @media(min-width: 992px) { .entry-summary { display: flex; .gallery-full-width-title-wrapper { flex: 0 0 55%; max-width: 55%; padding-right: 30px; } .gallery-full-width-addtocart-wrapper { padding-left: 30px; flex: 0 0 45%; max-width: 45%; } } } } &.gallery-grid, &.gallery-scrolling, &.gallery-showcase { align-items: stretch; .sticky-entry-summary { position: sticky; top: 30px; } } } .sticky-header-active { .product-gallery-summary { &.gallery-grid, &.gallery-scrolling, &.gallery-showcase { .sticky-entry-summary { top: 115px; } } } } .woocommerce-product-gallery__wrapper { margin: 0; } .admin-bar { .product-gallery-summary { &.gallery-grid, &.gallery-scrolling, &.gallery-showcase { .sticky-entry-summary { top: 70px; } } } &.sticky-header-active { .product-gallery-summary { &.gallery-grid, &.gallery-scrolling, &.gallery-showcase { .sticky-entry-summary { top: 155px; } } } } } .related.products, .upsells.products, .recently-viewed-products { padding-top: 80px; padding-bottom: 80px; & > h2 { margin: 0 0 30px; @include font-size(32); } .products { overflow: hidden; } } .single-product { .site-main { > .product { > section.products { position: relative; > * { position: relative; z-index: 2; } &:after { content: ''; position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; background-color: transparent; transform: translate3d(-50% , 0, 0); z-index: 1; } &:last-child { margin-bottom: -120px; } } } } &.botiga-site-layout-boxed{ .site-main { > .product { > section.products { &:after { max-width: var(--botiga_boxed_width, 1200px); } } } } } } figure.woocommerce-product-gallery__wrapper div:not(:first-of-type) { display: inline-block; vertical-align: top; } #review_form { .comment-form-rating { margin-top: 15px; } input[type="text"], input[type="email"] { width: 100%; } } .single-product { .woocommerce-notices-wrapper { margin-bottom: 30px; &:empty { display: none; } .wc-forward { margin-right: 15px; } } &.no-single-breadcrumbs { .woocommerce-notices-wrapper { &:not(:empty) { margin-bottom: 120px; margin-top: -40px; } } } } .woocommerce-product-rating, .comment_container { .star-rating { margin-left: 0; margin-right: 0; } } .woocommerce-product-rating { display: flex; margin: 12px 0; .woocommerce-review-link { margin-left: 8px; margin-top: 2px; @include font-size(13); } } .woocommerce-Reviews .commentlist { padding-left: 0; } .woocommerce-product-details__short-description { p:last-of-type { margin-bottom: 30px; } } /* Variable and grouped products */ .variations_form.cart, .grouped_form.cart { flex-direction: column; } .variations_form.cart { .variations { tbody { > tr + tr > td { padding-top: 15px; } } .label { width: 125px; text-align: left; padding-left: 0; padding-right: 15px; label { vertical-align: middle; } } } } table.variations { position: relative; border: 0; th,tr,td { border: 0; } td { border: 0; padding: 0; select { width: 100%; min-height: auto; } } } .woocommerce-variation-price { margin-bottom: 15px; } @media(min-width: 1025px) { .single-product { .variations_form.cart { .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; } } } } .reset_variations { display: none; text-align: right; margin-top: -20px; margin-bottom: 20px; margin-left: 0; color: #716f6f; text-transform: uppercase; text-decoration: underline; @include font-size(13); } .grouped_form.cart { .product_type_variable { width: 100%; text-align: center; } .quantity { width: 100% !important; max-width: 100% !important; } .group_table { border: none; th, td, tr { border: none; } .woocommerce-grouped-product-list-item__quantity { width: 150px; max-width: 150px; padding-left: 0; } .stock { margin-bottom: 0; } } } // When sold individually option is checked form.cart .quantity.hidden { display: none !important; } @media (max-width: 767px) { .single-product { .woocommerce-notices-wrapper { .woocommerce-message { display: flex; flex-wrap: wrap; flex-direction: column; text-align: center; } .wc-forward { padding: 8px 24px; order: 2; margin-top: 15px; align-self: center; margin-right: 0; } } } } /* * Sticky add to cart */ .botiga-single-sticky-add-to-cart-wrapper { position: sticky; padding: 15px 0; background: #FFF; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; z-index: 997; &.position-top { top: 0; transition: ease top 300ms; } &.position-bottom { bottom: 0; transition: ease bottom 300ms; } .botiga-single-sticky-add-to-cart-wrapper-content-mobile { display: none; } .botiga-single-sticky-add-to-cart-wrapper-content { display: flex; justify-content: center; align-items: center; flex-direction: row; padding: 0 20px; .botiga-single-sticky-add-to-cart-item { &:last-child { margin-right: 0 !important; } &.product-image { width: 75px; } &.product-title { h5 { margin: 0; } } &.product-price { .price { margin: 0; } } &.product-addtocart { display: flex; align-items: center; .stock { margin-bottom: 0; margin-right: 20px; } .quantity { width: 125px; max-height: 51px; margin: 0; .botiga-quantity-plus, .botiga-quantity-minus { justify-content: center; } } .button { white-space: nowrap; margin-left: 15px; max-height: 51px; } .grouped_form { align-items: center; flex-direction: row; } .group_table { display: block; border: none; max-height: 85px; overflow: auto; margin-bottom: 0; &::-webkit-scrollbar { width: 7px; } &::-webkit-scrollbar-track { background: #e2e2e2; } &::-webkit-scrollbar-thumb { background-color: #CCC; } tbody { tr:first-child { padding-top: 0; padding-bottom: 0; td { padding-top: 0; padding-bottom: 0; } } tr:not(:first-child) + tr { padding-top: 0; td { padding-top: 0; } } tr, td { border: none; } } } .variations_form.cart { align-items: center; .variations { line-height: 4; } .variations tbody > tr + tr > td { padding-top: 0; } .botiga-variations-wrapper { .botiga-variation-type-button { > a { margin-bottom: 0; } } } .reset_variations { margin: 0 0px 0 15px; } } } } .variations_form { flex-direction: row; .woocommerce-variation-description { display: none; } table.variations { margin-bottom: 0; tbody { display: flex; } tr { padding: 0 15px 0 0; &:last-child { padding: 0; } } td.value { > select { margin: 0; } } .label { width: auto; padding-right: 10px; } & + .single_variation_wrap { margin-left: 15px; } } .single_variation_wrap { display: flex; align-items: center; margin-left: 20px; .woocommerce-variation-add-to-cart { flex-wrap: nowrap; } .woocommerce-variation-price { margin: 0 15px 0 0; } .quantity { max-height: 51px; } } } } // Hide gpay and applepay buttons from sitcky add to cart // WooCommerce payments div[id*="wcpay-"], p[id*="wcpay-"] { display: none !important; } // Stripe payments div[id*="wc-stripe-payment-"], p[id*="wc-stripe-payment-"] { display: none !important; } } @media(max-width: 1024px) { .botiga-single-sticky-add-to-cart-wrapper { &.visible-desktop-only { display: none; } .botiga-single-sticky-add-to-cart-wrapper-content-mobile { display: block; text-align: center; .botiga-mobile-sticky-close-button { display: none; text-transform: uppercase; } } .botiga-single-sticky-add-to-cart-wrapper-content { display: none; padding: 0 15px; .botiga-single-sticky-add-to-cart-item { margin-right: 20px !important; &.product-title { max-width: 190px; } &.product-addtocart { > form:not(.variations_form) { display: flex; } > .variations_form { display: flex; flex-wrap: wrap; max-width: 380px; justify-content: flex-end; .variations { width: auto; line-height: 1 !important; } .single_variation_wrap { display: flex; justify-content: flex-end; width: 100%; margin-top: 25px; .woocommerce-variation-add-to-cart { display: flex; } } } .single_add_to_cart_button { background-repeat: no-repeat; background-position: center; } select { padding: 10px; min-height: 35px; } } } } &.botiga-sticky-addtocart-mobile-active { position: fixed; top: 0 !important; width: 100%; padding-top: 0; transition: ease all 300ms; .botiga-mobile-sticky-addtocart-button { display: none; } .botiga-mobile-sticky-close-button { display: block; } .botiga-single-sticky-add-to-cart-wrapper-content { display: flex; flex-wrap: nowrap; flex-direction: column; align-items: flex-start; padding-top: 30px; .botiga-single-sticky-add-to-cart-item { text-align: left !important; margin-right: 0 !important; &:not(.product-image) { width: 100%; max-width: none; text-align: center; } &.product-title { margin-top: 20px; } &.product-addtocart { .variations_form { &.cart { justify-content: flex-start; } .single_variation_wrap { display: block; margin: 50px 0 0; .woocommerce-variation-price { font-size: 1.5rem; margin: 25px 0 10px; } } } } } .variations_form { display: block; table.variations { tbody { display: block; } tr { padding: 0; & + tr td { padding-top: 20px !important; } } } } } } } } @media(max-width: 767px) { .botiga-single-sticky-add-to-cart-wrapper { .botiga-single-sticky-add-to-cart-wrapper-content { flex-wrap: wrap; .botiga-single-sticky-add-to-cart-item { &.product-price { width: 100%; margin-top: 15px; text-align: center; } &.product-addtocart { margin-top: 15px; > .variations_form { justify-content: center; .single_variation_wrap { justify-content: center; } } } } } } } @media(min-width: 1025px) { .botiga-single-sticky-add-to-cart-wrapper { &.visible-mobile-only { display: none; } } } body { &.admin-bar { @media(min-width: 601px) { .botiga-single-sticky-add-to-cart-wrapper { top: 32px; } &.sticky-header-active { .botiga-single-sticky-add-to-cart-wrapper { top: 108px; } } } } &.sticky-header-active { .botiga-single-sticky-add-to-cart-wrapper { &.position-top { top: 76px; } &.position-bottom { top: auto; bottom: 0; } } } //Hide when scroll &:not(.botiga-scrolling-up) { .botiga-single-sticky-add-to-cart-wrapper { &.hide-when-scroll.position-bottom { bottom: -180px !important; } } } &.botiga-scrolling-up { .botiga-single-sticky-add-to-cart-wrapper { &.hide-when-scroll.position-top { top: -180px !important; } &.hide-when-scroll.position-bottom { bottom: -180px !important; } } @media(max-width: 767px) { .botiga-single-sticky-add-to-cart-wrapper { &.hide-when-scroll.position-top { top: -300px !important; } &.hide-when-scroll.position-bottom { bottom: -300px !important; } } } } &.botiga-scrolling-down { .botiga-single-sticky-add-to-cart-wrapper { &.hide-when-scroll.position-bottom { bottom: 0 !important; } } @media(max-width: 767px) { .botiga-single-sticky-add-to-cart-wrapper { &.hide-when-scroll.position-bottom { bottom: 0 !important; } } } } } /** * Reviews */ .woocommerce-Reviews { #review_form_wrapper { padding: 40px; margin-top: 40px; .comment-reply-title { font-weight: 600; } } #comments { margin-top: 40px; li { list-style: none; } .review { & + .review { margin-top: 40px; } .comment_container { display: flex; align-items: flex-start; .avatar { max-width: 60px; height: auto; margin-right: 20px; } .comment-text { width: 100%; .meta { margin-bottom: 30px; } .description { padding: 25px; p:last-child { margin-bottom: 0; } } } } } .woocommerce-pagination { li { .page-numbers { text-decoration: none; } } } } } /** * Product Video Gallery for Woocommerce — Compatibility */ .product-gallery-summary { .nickx_product_images_with_video { max-width: 50%; flex-basis: 50%; } } /** * Product Navigation */ .botiga-product-navigation { position: relative; z-index: 100; float: right; margin-left: 10px; margin-bottom: 10px; display: flex; grid-gap: 10px; justify-content: flex-end; a { position: relative; display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; border-radius: 42px; border: 2px solid #eee; transition: all .2s; &:hover { border-color: #212121; span { opacity: 1; visibility: visible; margin-top: 10px; } } i { display: flex; &:before { content: ''; width: 8px; height: 8px; border-top: 2px solid #212121; border-left: 2px solid #212121; transform: translateX(2px) rotate(-45deg); } } &[rel="next"] { i:before { transform: translateX(-2px) rotate(135deg); } } span { position: absolute; z-index: 1; top: 100%; display: flex; flex-direction: column; width: 160px; left: 50%; margin-left: -80px; margin-top: 20px; padding: 12px; background-color: #fff; border-top: 4px solid #212121; box-shadow: 0 3px 7px rgba(0,0,0,0.125); opacity: 0; visibility: hidden; transition: all .3s; &:before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; } &:after { content: ""; position: absolute; left: 50%; top: -10px; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #212121; } } &.out-from-viewport { span { left: -100%; &:after { left: 86%; } } } } h2 { margin: 10px 0 0 0; font-weight: 700; font-size: 15px; text-align: center; } figure { margin: 0; } } /** * Product Stock */ .botiga-product-stock { color: green; font-size: 14px; font-weight: bold; text-transform: capitalize; margin-top: 15px !important; > span { display: block; } } .botiga-product-stock-low { color: red; } /** * Swiper for Product Thumbnails Carousel (Vertical) */ .botiga-swiper { width: 100%; position: relative; z-index: 1; overflow: hidden; padding: 0; &.swiper-vertical .swiper-wrapper { flex-direction: column; } &.swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; transform: translate3d(0px, 0, 0); } .swiper-pointer-events { touch-action: pan-y; } .swiper-pointer-events.swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: auto; height: auto; position: relative; transition-property: transform; img { display: block; width: 100%; height: 100%; object-fit: cover; } } } .botiga-swiper-button { cursor: pointer; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 26px; height: 26px; border-radius: 26px; color: #555; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all .2s; &:before { content: ''; width: 8px; height: 8px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; } &:focus { outline: none; } &:active { opacity: 0.3; } &.swiper-button-disabled { user-select: none; pointer-events: none; cursor: inherit; opacity: 0; } &.swiper-button-lock { display: none; } } .botiga-swiper-button-prev { left: 8px; &:before { transform: translateX(2px) rotate(-45deg); } } .botiga-swiper-button-next { right: 8px; &:before { transform: translateX(-2px) rotate(135deg); } } .swiper-vertical { order: -1; flex-shrink: 0; width: 77px; height: 490px; padding: 6px; .botiga-swiper-button { top: auto; right: auto; left: 50%; transform: translateX(-50%); } .botiga-swiper-button-prev { top: 8px; &:before{ transform: translateY(1px) rotate(45deg); } } .botiga-swiper-button-next { bottom: 8px; &:before{ transform: translateY(-1px) rotate(-135deg); } } } .swiper-horizontal { padding: 6px; } /** * Flexslider for Product Thumbnails Carousel (Horizontal) */ .botiga-flexslider { position: relative; user-select: none; display: flex; ol { margin: 0; padding: 0; list-style: none; li { padding: 0; margin: 0; } } } .botiga-flex-direction-nav { margin: 0; padding: 0; list-style: none; a { cursor: pointer; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 26px; height: 26px; border-radius: 26px; color: #555; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-indent: -9999px; transition: all .2s; &:before { content: ''; width: 8px; height: 8px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; } &:focus { outline: none; } &:active { opacity: 0.3; } &.botiga-flex-disabled { user-select: none; pointer-events: none; cursor: inherit; opacity: 0; } } } .botiga-flex-nav-prev { a { left: 8px; &:before { transform: translateX(2px) rotate(-45deg); } span { display: none; } } } .botiga-flex-nav-next { a { right: 8px; &:before { transform: translateX(-2px) rotate(135deg); } span { display: none; } } } .single_add_to_cart_button { &.loading { opacity: 0.5; pointer-events: none; &:after { font-family: WooCommerce; content: "\e031"; animation: spin 2s linear infinite; margin-left: 0.5em; line-height: 1em; position: relative; top: 1px; display: inline-block; width: auto; height: auto; } } &.added:after { font-family: WooCommerce; content: "\e017"; position: relative; top: 1px; margin-left: 0.5em; line-height: 1em; display: inline-block; width: auto; height: auto; } }