File: /var/www/html/wpkoopkj/wp-content/themes/ohio/assets/sass/plugins/woocommerce/_single-product.scss
.woo-product {
// Product gallery
&-image {
@include flex;
@include flex-just(flex-end);
.product-thumbs {
margin-right: $bullets-spacer;
width: 5rem;
min-width: 5rem;
height: 100%;
.product-thumb {
cursor: pointer;
&:not(:last-child) {
margin-bottom: 0.5rem;
}
&.active {
border: 2px solid $color-neutral;
}
}
}
// Slider
&-slider {
width: 100%;
position: relative;
overflow: hidden;
height: auto;
// Init animation
.gimg {
min-width: 100%;
opacity: 0;
@include transition(opacity);
}
@include md-screen {
.image-wrap {
overflow: hidden;
&:not(:last-child) {
margin-bottom: 0.5rem;
}
}
}
@include sm-screen {
.clb-slider-nav-btn {
position: static;
padding: 0;
transform: none !important;
.prev-btn {
top: 50%;
bottom: auto;
transform: translate(0%, -50%);
position: absolute;
left: 20px;
}
.next-btn {
top: 50%;
bottom: auto;
transform: translate(0%, -50%);
position: absolute;
right: 20px;
}
}
}
}
// Sale tag
.tag {
+ .tag {
margin-top: 2rem;
}
@include sm-screen {
top: auto;
bottom: 2.5rem;
}
@include md-screen {
+ .share-bar {
margin-top: 3.5rem;
}
}
}
// Quickview button
.btn-lightbox {
@include sm-screen {
bottom: 2.5rem;
top: auto;
}
}
.tag,
.share-bar,
.btn-lightbox {
position: absolute;
@include spacer2x(top);
}
// Mobile
@include sm-screen {
&[class^='vc_col'] {
padding-left: 0 !important;
padding-right: 0 !important;
}
.product-thumbs {
display: none;
}
}
}
// Product details
&-details {
// Headline
&-title {
margin: 0.75rem 0;
@include headings-typo(h3);
}
.price {
margin: 0.35rem 0 0.6rem;
@include flex;
@include align-items(center);
> span {
&:nth-child(1) {
margin-right: 0.25rem;
}
&:nth-child(2) {
margin-left: 0.25rem;
}
}
.amount {
font-size: 1.15em;
}
// Old price
del {
.amount {
color: $color-grey;
font-size: 1rem;
margin-right: 0.35rem;
}
}
}
// Rating
.woocommerce-product-rating {
font-size: $font-size-small;
.write-review {
font-weight: 500;
}
.woo-review-link {
&::after {
@include divider;
}
}
}
// Meta
.product_meta {
font-size: $font-size-small;
margin-top: 1rem;
font-weight: 600;
.sku_wrapper,
.woo-c_product_category,
.tagged_as {
font-weight: 600;
> span {
font-weight: 400;
}
}
.sku_wrapper,
.woo-c_product_category {
&::after {
@include divider;
}
}
> span {
vertical-align: middle;
position: relative;
a {
font-weight: 400;
}
}
}
// Variations
.variations,
.simple-qty {
border-top: 1px solid $color-border;
padding: 1rem 0;
select,
input {
max-width: 100%;
padding-left: 0.65rem;
min-height: 2rem;
font-size: $font-size-small;
}
.quantity {
max-width: 4.5rem;
}
.label {
+ * {
margin-top: 0.5rem;
}
}
.variation {
margin: 0 0.6rem 0.6rem 0;
.screen-reader-text {
+ * {
margin-top: 0;
}
}
&:last-child {
margin: 0;
}
// Reset button
&.reset {
.icon {
font-size: 1em;
}
.button {
width: 100%;
font-size: $font-size-small;
margin: 0;
@include lg-screen {
margin-top: 1.8rem;
}
@include sm-screen {
margin-top: 0.5rem;
}
}
}
}
}
.variations {
flex-wrap: wrap;
@include flex;
@include sm-screen {
@include flex-just(space-between);
}
}
// Button holder
.variations_button {
@include flex;
@include align-items(center);
@include md-screen {
.button {
&:not(.-outlined):not(.yith-wcwl-add-to-wishlist) {
margin-right: 1rem;
}
}
}
}
form {
+ .yith-wcwl-add-to-wishlist {
display: none;
}
}
// Variable product
.single_variation_wrap {
.woo-variation-price {
border-top: 1px solid $color-border;
.price {
margin-top: 1.25rem;
}
}
.variations_button {
margin-top: 1rem;
}
// Hide duplicate button
.single-variation {
display: block;
.variation-add-to-cart-wrap {
display: none;
}
}
}
// Out of stock product
.out_of_stock {
margin: 1.5rem 0px;
}
// Grouped product
.woocommerce-grouped-product-list {
td {
padding-top: 1rem;
padding-bottom: 1rem;
}
&-item__quantity {
.button {
text-transform: capitalize;
padding: 0 0.75rem;
min-height: 2.25rem;
margin: 0;
font-size: $font-size-small;
}
}
&-item__label {
a {
font-size: 1rem;
font-weight: 600;
@include headings-typo(h6);
}
}
@include md-screen {
&-item__price {
text-align: right;
}
}
}
// Mobile
@include sm-screen {
background-color: $color-white;
padding-top: $grid-spacer;
margin-top: -$grid-spacer;
@include border-top-radius($radius-large);
.variations_button {
@include flex-direction(column);
@include align-items(flex-start);
}
.yith-wcwl-add-to-wishlist,
.button {
width: 100%;
margin-bottom: 0.75rem;
}
}
}
}
// Layout Type 1
.type1 {
.share-bar,
.tag {
@include spacer2x(left);
}
.btn-lightbox {
@include spacer2x(right);
}
}
// Layout Type 2 - Reverse
.type2 {
.share-bar,
.tag {
@include spacer2x(right);
}
.btn-lightbox {
@include spacer2x(left);
}
.woo-product {
// Product gallery
&-image {
@include flex-direction(row-reverse);
.product-thumbs {
margin-right: 0;
margin-left: $bullets-spacer;
}
}
}
// Mobile
@include sm-screen {
// Reverse gallery position
.product {
> .page-container {
> .vc_row {
flex-wrap: wrap;
@include flex;
@include flex-direction(column-reverse);
}
}
}
}
}
// Tabs
.single-product-tabs {
background-color: $color-neutral-6;
@include spacer6x(margin-top);
.tabs {
transform: translateY(-3rem);
&-content {
margin-bottom: -2rem;
@include spacer3x(padding-top);
@include spacer3x(padding-bottom);
}
}
@include sm-screen {
margin-top: 4rem;
}
// Additional information
.shop_attributes {
p {
margin: 0;
}
}
// Reviews
@include md-screen {
.comments {
.comment-form {
> p {
width: calc(50% - 1rem) !important;
}
}
}
}
}
// Add upper gap when header blank spacer is disabled
.single-product {
&:not(.with-spacer) {
&.with-header-1,
&.with-header-3,
&.with-header-4 {
.woo-product {
padding-top: $header-height;
}
}
&.with-header-2 {
.woo-product {
padding-top: $header-height-2;
}
}
}
}