文件操作 - single_product.scss

文件: /root/Desktop/OLD/temi wordpress/anon/assets/css/woocommerce/single_product.scss

编辑文件内容

.wrap-breadcrumb {
    .woocommerce-breadcrumb {
        font-size: 1rem;
        margin-bottom: 0 !important;
        color: inherit;
    }
}

@media(min-width: 992px) {
    .wrap-breadcrumb {
        margin-bottom: 0
    }
}

.single-product {
    .wrap-breadcrumb .container {
        flex-wrap: wrap;
    }
    &.single .main-content {
        padding-top: 0;
        padding-bottom: 20px;
    }
}

.wrap-single-product-content {
    padding-top: 10px;
    &.content-half-width {
        .wrap-single-product-images, .summary {
            width: 100%;
            display: inline-block;
            position: relative;
        }
    }
    &.right-content-layout {
        .wrap-single-product-images {
            float: left;
        }
        .product > .summary {
            float: right;
        }
    }
    &.left-content-layout {
        .wrap-single-product-images {
            float: right;
        }
        .product > .summary {
            float: left;
        }
    }
    &.center-gallery-layout {
        .wrap-single-product-images, .summary, .zoo-product-data-tabs {
            width: 33%;
        }
        & > .product {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .summary {
            order: -1
        }
    }
    &.center-layout {
        .summary {
            max-width: 450px;
            text-align: center;
            margin: 0 auto;
        }
        .zoo-product-gallery {
            &.vertical-gallery, &.horizontal-gallery, &.none {
                max-width: 450px;
                margin-left: auto;
                margin-right: auto;
            }
        }
    }
    &.sticky-content-layout {
        .wrap-single-product-images {
            float: left;
        }
        .summary {
            float: right;
        }
    }
    .wrap-sticky-content-block {
        width: 100%;
        display: inline-block;
        margin-bottom: 30px;
    }
    ul.products {
        position: relative;
    }
    section.products {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin-bottom: 30px;
        h2 {
            text-align: center;
            @include px2rem(30);
            margin: 0 auto;
            text-transform: lowercase;
            font-weight: 400;
        }
        ul.products {
            padding-top: 40px;
        }
    }
    .wrap-single-product-images .onsale {
        position: absolute;
        right: 15px;
        left: auto;
    }
}

.wrap-single-product-content {
    .wrap-single-product-images, .summary {
        padding-top: 40px
    }
    span.onsale {
        top: 55px
    }
}

.woocommerce div.product form.cart .button {
    background: transparent;
    color: var(--black-color);
    line-height: 30px;
    padding: 15px 20px;
    letter-spacing: 1px;
    --link-hover-color: #666;
    &:hover {
        background: var(--black-color);
        color: var(--white-color);
    }
    &.zoo-wishlist-button {
        margin-right: 30px;
    }
    &.zoo-wishlist-button, &.zoo-compare-button {
        color: var(--link-color);
        padding: 0;
        display: flex;
        height: auto;
        align-items: center;
        margin-bottom: 20px;
        font-size: 1rem;
        font-weight: normal;
        transition: all 300ms;
        line-height: 1.3;
        text-transform: capitalize;
        i {
            margin-right: 15px;
        }
        &:hover {
            background: none;
            color: var(--link-hover-color);
        }
    }
    &.zoo-wishlist-button.browse-wishlist, &.zoo-compare-button.browse-products-compare {
        color: var(--link-hover-color);
    }
}

.variations_form table.variations {
    tr {
        background: none;
    }
    td label {
        color: var(--black-color);
    }
}

@media (max-width: 552px) {
    .wrap-single-product-content span.onsale {
        top: 15px
    }
    .wrap-product-video {
        top: 15px
    }
    .product.sale .wrap-product-video {
        top: 55px
    }
}

@media(min-width: 768px) {
    .wrap-single-product-content {
        &.content-half-width {
            .wrap-single-product-images, .summary.entry-summary {
                width: calc(50% - 15px);
                margin-bottom: 40px;
            }
            .summary {
                padding-left: 8.3%;
                padding-right: 8.3%;
            }
            &.product-grid-gallery{
                .summary {
                    padding-left: 5vw;
                    padding-right: 5vw;
                }
            }
            .zoo-product-data-tabs{
                margin-top: 80px;
            }
            .wrap-sticky-content-block{
                margin-bottom: 80px;
            }
        }
        .wrap-sticky-content-block{
            .summary {
                padding-left: 5vw;
                padding-right: 5vw;
            }
        }
    }
    .summary {
        .zoo-product-data-tabs {
            padding-top: 50px
        }
        .woocommerce-tabs #comments, .woocommerce-tabs #review_form_wrapper {
            width: 100%;
            margin: 0 !important;
        }
        .woocommerce-tabs .woocommerce-Reviews {
            flex-wrap: wrap;
        }
    }
}

.woocommerce div.product form.cart {
    td.label {
        label {
            padding: 10px 0;
            display: inline-block;
        }
    }
    select {
        width: 100%;
        padding: 10px 15px;
        height: 50px;
        text-transform: uppercase;
    }
}

//Grouped product
.woocommerce div.product form.cart {
    .group_table tr {
        background: none;
        border-bottom: 1px solid $border_color;
    }
    .group_table td {
        vertical-align: middle;
        .wrap-group-qty {
            margin: 0
        }
        &.woocommerce-grouped-product-list-item__image {
            width: 80px;
            padding-right: 0;
            padding-left: 15px;
            img {
                display: block;
            }
        }
        &.woocommerce-grouped-product-list-item__label {
            .product-loop-title {
                margin-bottom: 5px;
                font-size: 1rem;
            }
            .stock {
                margin-bottom: 0;
            }
        }
    }
}

//Quantity block
div.quantity {
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

input[type=number] {
        -moz-appearance: textfield;
    }
    input.qty {
        box-shadow: none;
        background: none;
        border: none;
        min-width: 35px;
        background: var(--white-color);
    }
    border: 1px solid $border_color;
    height: 50px;
    padding: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .qty-nav {
        width: 35px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        color: var(--black-color);
    }
}

.woocommerce .quantity input.qty {
    width: 40px;
}

//Next and previous product
.zoo-single-product-nav {
    margin: 0 -8px 0 0;
    position: relative;
    li {
        list-style: none;
        padding: 0;
        display: inline-block;
        &:hover {
            .product-item {
                top: 100%;
                opacity: 1;
                visibility: visible;
                z-index: 1;
            }
        }
    }
    .product-link-btn {
        height: 35px;
        position: relative;
        text-align: center;
        line-height: 35px;
        padding: 0 4px;
        @include px2rem(10);
        display: block;
        .product-title {
            text-transform: uppercase;
            padding: 0 5px;
            @include px2rem(12);
            font-weight: 500;
            display: none;
        }
    }
    img {
        display: block;
    }
    .product-item {
        @include transition(all 300ms);
        visibility: hidden;
        opacity: 0;
        position: absolute;
        right: 0;
        top: calc(100% + 20px);
        box-shadow: 0 0 5px $black_transparent_2;
        width: 280px;
        display: inline-block;
        background: var(--white-color);
        .product-img, .product-item-info {
            display: inline-block;
            float: left;
        }
        .product-img {
            max-width: 80px;
        }
        .product-item-info {
            width: calc(100% - 80px);
            padding: 5px 10px 0 10px
        }
        .price {
            margin: 0 !important;
            padding: 0 !important;
            font-size: 14px !important;
            .amount {
                padding: 0 !important;
            }
            del .amount {
                color: var(--del-price-color);
            }
        }
        .product-loop-title {
            margin-bottom: 5px;
            font-size: 1rem;
            font-weight: 400;
            a{
                color:var(--product-title);
                &:hover{
                    color:var(--product-title-hover);
                }
            }
        }
    }
}

//Share product
.zoo-woo-share {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .label-share {
        color: var(--text-color);
        margin-right: 10px;
        @include px2rem(11);
        text-transform: uppercase;
    }
    .social-icons {
        margin: 0;
    }
    li {
        list-style: none;
        padding: 0;
        display: inline-block;
        margin-right: 10px;
        a {
            color: var(--text-color);
            &:hover {
                color: var(--black-color);
            }
        }
    }
}

//Product carousel
.products {
    .slick-list {
        width: 100%;
    }
    &:hover {
        .zoo-carousel-btn {
            opacity: 1;
        }
    }
    .zoo-carousel-btn {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 20px);
        z-index: 1;
        background: $black_transparent_5;
        cursor: pointer;
        opacity: 0;
        color: var(--white-color);
        @include transition(all 300ms);
        i {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
        }
        &:hover {
            background: $black_transparent_8;
        }
        &.prev-item {
            left: 30px;
        }
        &.next-item {
            right: 30px;
        }
    }
    .slick-track {
        margin-left: 0 !important;
    }
}

//COunt down
.zoo-countdown {
    width: 100%;
    display: inline-block;
    text-align: center;
}

.label-product-countdown {
    @include px2rem(18);
    font-weight: 500;
    color: var(--black-color);
    margin-bottom: 15px;
    width: 100%;
    display: inline-block;
}

.wrap-zoo-countdown {
    text-align: center;
    background: $bg_block;
    margin: 10px 0 20px;
    padding: 20px 20px 15px;
}

.label-countdown-block {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 400;
}

.countdown-times {
    display: inline-block;
    & > div {
        min-width: 60px;
        margin: 0 10px;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        height: 60px;
        padding: 10px 5px;
        line-height: 20px;
        float: left;
        @include px2rem(10);
        background: var(--bg-block-color);
        border-radius: 5px;
        font-weight: 500;
        &:last-child {
            margin-right: 0;
        }
        &:first-child {
            margin-left: 0;
            b:after {
                display: none;
            }
        }
        b {
            @include px2rem(16);
            text-transform: uppercase;
            width: 100%;
            text-align: center;
            font-weight: 500;
            display: block;
        }
    }
}

.summary {
    & > .stock:not(.zoo-single-stock-label) {
        display: none;
    }
}

//End Count down

/*Sticky Add to Cart*/
.zoo-sticky-add-to-cart {
    width: 100%;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 15px 0;
    box-shadow: -1px 0 5px $black_transparent_2;
    background: var(--white-color);
    z-index: 1;
    @include transition(all 300ms);
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .wrap-product-content {
        width: 70%;
        display: flex;
        align-items: center;
        h3, p {
            margin: 0;
            display: inline-block;
        }
        h3.product-title {
            @include px2rem(24)
        }
        .price {
            margin-left: 15px;
            display: flex;
            @include px2rem(20);
            & > .amount {
                padding: 0 5px;
                &:first-child {
                    padding-left: 0;
                }
                &:last-child {
                    padding-right: 0
                }
            }
        }
    }
    .button.button-sticky-add-to-cart {
        background: var(--black-color);
        color: var(--white-color);
        white-space: nowrap;
        &:hover {
            background: $sec_accent_color;
            color: var(--white-color);
        }
    }
}

.price {
    color: var(--price-color);
    del {
        margin-right: 10px;
        opacity: 1;
        color: var(--del-price-color);
    }
    ins {
        color: var(--sale-price-color);
        background: none;
        text-decoration: none;
    }
    .amount {
        color: inherit;
        font-weight: 500;
    }
}

.amount {
    color: var(--price-color)
}

.zoo-sticky-add-to-cart.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media(max-width: 576px) {
    .wrap-product-content .price {
        display: none !important;
    }
    .wrap-product-content .product-title {
        @include px2rem(18)
    }
}

/*End Sticky Add to Cart*/
/*Add to cart button*/
.wrap-group-qty, .bundle_button {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    div.quantity {
        height: 60px;
        justify-content: center;
        margin: 0 20px 0 0 !important;
        .qty-nav {
            @include px2rem(22);
        }
        input {
            @include px2rem(16);
            height: 100%;
        }
        &.hidden {
            display: none !important;
        }
    }
    .button {
        margin: 0 !important;
    }
}

.product button.single_add_to_cart_button {
    display: flex;
    &:after {
        order: -1;
        margin-right: 5px;
        position: static !important;
    }
    &.loading {
        i {
            display: none;
        }
    }
    i {
        margin-right: 5px;
    }
}

/*End Add to cart button*/
/*Content Single Product*/
.woocommerce {
    .summary {
        .product_title {
            @include px2rem(24);
            margin-bottom: 10px;
            color:var(--product-title-detail);
        }
        .zoo-countdown {
            text-align: left;
            margin-bottom: 30px;
        }
        .countdown-times > div {
            text-align: center
        }
        .zoo-new-label {
            background: var(--new-bg);
        }
        .onsale {
            position: static;
            background: var(--red-bg);
            border: none
        }
        p.zoo-single-stock-label {
            background: var(--stock-bg);
            &.out-of-stock {
                background: var(--border-dark);
            }
        }
        .zoo-new-label, .onsale, p.zoo-single-stock-label.stock{
            margin: 0 5px 15px 0;
            color: var(--white-color);
            text-transform: uppercase;
            padding: 3px 8px;
            line-height: 20px;
            font-weight: 500;
            box-shadow: none;
            display: inline-block;
            border-radius: 3px;
            @include px2rem(13)
        }
    }
    .wrap-custom-meta {
        margin-bottom: 20px;
        width: 100%;
    }
    div.product .woocommerce-product-rating {
        margin-bottom: 0;
    }
    .woocommerce-product-rating {
        display: flex;
        align-items: center;
        a:hover {
            color: var(--black-color);
        }
        .star-rating {
            width: 5.2em;
            margin: 0 5px 0 0
        }
    }
    .star-rating::before {
        color: var(--star-color);
        font-family: WooCommerce;
        content: '\e021\e021\e021\e021\e021';
    }
    .star-rating span::before {
        color: var(--star-color);
        font-family: WooCommerce;
        content: '\e020\e020\e020\e020\e020';
    }
    div.product p.price {
        padding: 0;
        margin-bottom: 20px;
    }
    div.product .summary p.price, div.product .summary span.price {
        color: var(--price-color);
        @include px2rem(24);
        width: 100%;
        span.amount {
            padding: 0 5px;
            font-weight: 500;
        }
        & > .amount {
            &:first-child {
                padding-left: 0;
            }
        }
        del {
            opacity: 1;
            font-size: 83%;
            margin: 0;
            span.amount {
                padding-left: 0;
            }
        }
        ins {
            text-decoration: none;
            font-weight: 400;
        }
    }
    div.product span.price {
        margin-bottom: 5px;
    }
    .woocommerce-product-details__short-description {
        width: 100%;
        display: inline-block;
        margin-bottom: 30px;
        p:last-child {
            margin: 0;
        }
    }
    div.product form.cart {
        margin-bottom: 15px;
        button.button {
            width: 100%;
            margin-bottom: 20px;
            justify-content: center;
        }
        .button {
            &.single_add_to_cart_button {
                background: var(--black-color);
                color: var(--white-color);
                &:hover {
                    background: $sec_accent_color;
                }
            }
            &.zoo-buy-now {
                background: #F6A2A2;
                @extend .better-font-rendering;
                color: var(--black-color);
                &:hover {
                    color: var(--white-color);
                    background: var(--black-color);
                }
            }
        }
    }
    .product_meta {
        width: 100%;
        text-transform: uppercase;
        @include px2rem(11);
        & > span {
            width: 100%;
            display: inline-block;
            margin-bottom: 10px;
        }
        a {
            color: var(--text-color);
        }
        a:hover {
            text-decoration: underline;
            color: var(--black-color);
        }
    }
}

.zoo-cw-attr-row div.label .zoo-cw-name {
    color: $sec_accent_color;
}

.woocommerce div.product form.cart div.quantity {
    margin: 0;
}
.single_variation{
    margin-bottom: 20px;
    p{
        margin:0
    }
}
/*Buy Now block*/
.wrap-buy-now {
    width: 100%;
    display: inline-block;
    a:hover {
        text-decoration: underline;
    }
}

.zoo-product-term {
    margin-bottom: 20px;
    input {
        opacity: 0;
        position: absolute;
        z-index: -1;
    }
    label {
        cursor: pointer;
        display: flex;
        align-items: center;
        height: 20px;
        @include px2rem(14);
        &:before {
            font-family: cleversoft;
            content: '\c265';
            text-indent: -99px;
            overflow: hidden;
            margin-right: 5px;
            border: 1px solid $body_color;
            border-radius: 2px;
            width: 15px;
            height: 15px;
            display: inline-block;
            text-align: center;
            line-height: 13px;
            @include px2rem(10);
            color: var(--black-color);
        }
    }
    input:checked ~ label, label:hover {
        &:before {
            text-indent: 0;
        }
    }
    a {
        padding: 0 5px
    }
}

/*End Buy Now block*/
/*End Content Single Product*/
.woocommerce .star-rating span {
    line-height: 1;
}

/* Stock countdown*/
.zoo-stock-countdown {
    margin-bottom: 30px;
    .label-product-stock-countdown {
        margin-bottom: 10px;
        @include px2rem(18);
        font-weight: 500;
        color: var(--black-color);
        width: 100%;
        display: inline-block;
        .number-product {
            color: var(--red-bg)
        }
    }

}

.stock-countdown-bar {
    position: relative;
    display: block;
    box-shadow: inset 0 1px 2px $black_transparent_1;
    background: var(--border-color);
    overflow: hidden;
    height: 12px;
    .inner-stock-countdown-bar {
        height: 100%;
        display: block;
        &.final-parse {
            background-color: #f56f5e !important;
        }
        &.second-parse {
            background-color: #ff9900 !important;
        }
        &.first-parse {
            background-color: #33cc33 !important;
        }
    }
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 0 0
    }

to {
        background-position: 40px 0
    }
}

@-moz-keyframes progress-bar-stripes {
    from {
        background-position: 0 0
    }

to {
        background-position: 40px 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 0 0
    }

to {
        background-position: 40px 0
    }
}

/* End Stock countdown*/
/*Extend product notice*/
.zoo-extend-notice {
    margin: 0 0 20px;
    width: 100%;
    li {
        list-style: none;
        color: var(--black-color);
        padding:0;
        margin-bottom: 10px;
        i {
            margin-right: 5px;
        }
    }
    .end-of-day {
        color: var(--red-bg);
        text-decoration: underline;
    }
    .get-order-date {
        text-decoration: underline;
    }
    .visitor {
        background: var(--black-color);
        color: var(--white-color);
        padding: 0 5px;
        margin: 0 3px;
    }
    .zoo-guarantee-safe-checkout-logo {
        text-align: center;
        border-top: 1px solid $border_color;
        padding: 35px 0 0;
        margin: 30px 0 30px;
        position: relative;
        img {
            max-width: 100%;
            display: block;
            margin: 0 auto
        }
    }
    .heading-guarantee-safe-checkout-logo {
        @include px2rem(18);
        font-weight: 500;
        padding: 0 20px;
        background: var(--white-color);
        white-space: nowrap;
        position: absolute;
        text-transform: capitalize;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .amount {
        color: var(--red-bg);
    }
}

.zoo-product-sold-day {
    color: var(--red-bg);
    i {
        animation: blink 600ms infinite ease-in-out;
    }
}

/*End Extend product notice*/
.close-zoo-extend-cart-info {
    @extend .zoo-mask-close;
}

.wrap-content-popup-page {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white-color);
    padding: 20px 0;
    opacity: 0;
    visibility: hidden;
    max-width: calc(100% - 50px);
    max-height: calc(100vh - 50px);
    width: 100%;
    .content-popup-page {
        width: 100%;
        overflow: hidden;
        overflow-y: auto;
        padding: 0 20px;
        max-height: calc(100vh - 90px);
        display: none;
        &.active {
            display: inline-block;
        }
    }
    .close-popup-page {
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--black-color);
        color: var(--white-color);
        transform: translate(50%, -50%);
        @include transition(all 300ms);
        cursor: pointer;
        &:hover {
            background: var(--accent-color);
        }
    }
}

.wrap-content-popup-page.active {
    opacity: 1;
    visibility: visible;
    z-index: 100;
}

.close-zoo-extend-cart-info.active {
    opacity: 1;
    visibility: visible;
    z-index: 99;
}

.zoo-extend-cart-info-item {
    margin: 0 30px 0 0;
    padding: 0;
    list-style: none;
    a {
        text-transform: capitalize;
        color: var(--black-color);
        text-decoration: underline;
        white-space: nowrap;
        @include px2rem(14);
        &:hover {
            color: var(--accent-color);
            text-decoration: underline;
        }
    }
}

.zoo-extend-cart-info {
    display: flex;
    align-items: center;
    margin: 0 0 30px;
    flex-wrap: wrap;
    .ask-product-block {
        margin-right: 0;
    }
}

.wrap-content-popup-page .wpcf7-form {
    .wpcf7-text, .wpcf7-textarea {
        background: $bg_block;
        border: none;
        border-radius: 0;
        padding: 5px 15px;
        margin-bottom: 20px;
    }
    & > p, .wpcf7-submit {
        margin: 0
    }
    .wpcf7 h5 {
        margin-bottom: 20px;
    }
}

@media(min-width: 992px) {
    .woocommerce .summary .zoo-new-label, .woocommerce .summary .onsale, .woocommerce .summary p.stock {
        margin-bottom: 15px;
    }
    .wrap-content-popup-page {
        max-width: 80vw;
        max-height: 80vh;
        width: auto;
        height: auto;
        .content-popup-page {
            max-height: calc(80vh - 40px);
        }
    }
    .zoo-extend-cart-info {
        flex-wrap: nowrap;
        .ask-product-block {
            margin-left: auto;
            width: 50%;
            text-align: right;
        }
    }
    .wrap-custom-meta {
        display: flex;
        justify-content: space-between;
        .sku_wrapper {
            width: auto !important;
        }
    }
}

文件操作 - single_product.scss

文件: /root/Desktop/OLD/temi wordpress/anon/assets/css/woocommerce/single_product.scss

编辑文件内容

修改文件时间

删除文件