File: /var/www/vhosts/miroglu.net/httpdocs/wp-content/themes/the-landscaper/assets/sass/woocommerce.scss
@import "vars";
@import '../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables';
/*--------------------------------------------------------------
19.0 WooCommerce
--------------------------------------------------------------*/
.woocommerce {
// Buttons
a.button,
input.button,
input.button.alt,
button.button,
button.button.alt,
#respond input#submit {
display: inline-block;
padding: 19px 22px;
font-size: 13px;
border-radius: 1px;
color: $white-color;
text-transform: uppercase;
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
background-color: $primary-color;
transition: $primary-transition;
-webkit-font-smoothing: auto;
&:hover {
color: $white-color;
background-color: darken( $primary-color, 3);
}
}
// Headings
#reviews #comments h2,
#reviews h3,
div.product .woocommerce-tabs h2,
.related h2 {
font-size: 24px;
margin-bottom: 20px;
}
// Forms
form {
.form-row {
padding: 0;
&.woocommerce-invalid .select2-container,
&.woocommerce-invalid input.input-text,
&.woocommerce-invalid select {
border-color: red;
}
label {
color: #434343;
}
input.input-text,
textarea {
display: block;
padding: 15px 20px;
margin: 7px 0 0 0;
font-size: 14px;
font-weight: normal;
color: #a5a5a5;
border: 1px solid #e6e6e6;
background-color: #f5f5f5;
border-radius: 1px;
transition: all 100ms ease-out;
&:active,
&:focus {
border-color: #a2c046;
}
}
&#billing_country_field,
&#shipping_country_field,
&#billing_state_field,
&#shipping_state_field {
margin-bottom: 15px;
}
&#billing_address_1_field,
&#shipping_address_1_field {
margin-bottom: -10px;
}
#order_comments {
min-height: 163px;
}
.woocommerce-terms-and-conditions-wrapper {
.input-checkbox {
position: relative;
}
}
}
}
// Pagination
.woocommerce-pagination {
display: block;
margin: 0 0 55px 0;
padding-top: 60px;
text-align: center;
border-style: dashed;
border-width: 1px 0 0 0;
border-color: #dedede;
}
nav.woocommerce-pagination {
ul {
position: relative;
margin: 0;
border: none;
li {
margin-right: 5px;
border-right: none;
span {
&.current {
color: $white-color;
background-color: $primary-color;
border-color: $primary-color;
}
}
.page-numbers {
color: $text-color;
width: 60px;
padding: 21px 0;
font-weight: bold;
border: 2px solid #f2f2f2;
border-radius: 1px;
transition: $primary-transition;
}
a {
&:focus,
&:hover {
color: $white-color;
border-color: transparent;
background-color: $primary-color;
}
}
}
}
}
// Product Summary
.woocommerce-ordering .orderby {
padding: 5px 10px 5px 18px;
height: 34px;
margin: -7px 6px 15px 0;
}
ul.products {
li {
&.product {
@media(min-width: $screen-md) {
width: 23%;
margin: 0 2.5% 50px 0;
}
a {
// Product Image in Grid
img {
margin-bottom: 25px;
outline: 3px solid transparent;
transition: $primary-transition;
}
&:hover img {
outline-color: $primary-color;
}
&.added_to_cart {
margin-left: 15px;
font-weight: 700;
}
}
// Star rating
.star-rating {
margin: 10px 0;
font-size: 14px;
}
// Sale Badge
.onsale {
position: absolute;
left: 25px;
top: 25px;
margin: 0;
width: 70px;
height: 30px;
min-height: 10px;
line-height: 24px;
font-size: 14px;
font-weight: bold;
z-index: 2;
border-radius: 1px;
background-color: $primary-color;
transition: $primary-transition;
&:hover {
background-color: darken( $primary-color, 3);
}
}
// Product Title
.woocommerce-loop-category__title,
.woocommerce-loop-product__title,
&.product h3 {
padding: 0;
margin-bottom: 10px;
font-size: 20px;
color: $dark-color;
transition: $primary-transition;
&:hover {
color: $primary-color;
}
}
// Product Price
.price {
font-size: 18px;
font-weight: bold;
color: $dark-color;
del {
line-height: 19px;
}
}
}
&.last {
margin-right: 0;
}
}
}
// Single Product Page
// Quantity on single product page
.quantity {
margin-right: 0;
@media(min-width: $screen-md) {
width: 50%;
}
.qty {
width: 100%;
height: 54px;
padding: 0;
font-size: 14px;
color: $text-color;
border: 1px solid #f5f5f5;
background-color: #f9f9f9;
}
}
// Sale Badge
span.onsale {
position: absolute;
left: 25px;
top: 25px;
margin: 0;
width: 70px;
height: 30px;
min-height: 10px;
line-height: 24px;
font-size: 14px;
font-weight: bold;
z-index: 2;
border-radius: 1px;
background-color: $primary-color;
transition: $primary-transition;
}
div.product {
// Product Title
.product_title {
margin-bottom: 0;
word-break: break-word;
}
// Product Rating
.woocommerce-product-rating {
margin-bottom: 10px;
.woocommerce-review-link {
color: $text-color;
}
}
.images,
.summary {
margin-top: 0;
}
// Product Price
p.price {
margin-bottom: 20px;
padding-bottom: 20px;
font-size: 30px;
font-weight: bold;
color: $primary-color;
border-style: dashed;
border-width: 0 0 1px 0;
border-color: #dedede;
del {
color: $text-color;
font-weight: normal;
}
}
// Add to cart
form.cart {
margin: 30px 0;
// Quantity single product
div.quantity {
margin: 0;
}
// Variations
.variations {
th {
vertical-align: inherit;
}
td,
td.label {
padding: 10px 0;
vertical-align: text-bottom;
}
label {
color: #464646;
margin-bottom: 0;
}
select {
padding: 3px 15px;
}
}
// Add to cart Button
.button.single_add_to_cart_button {
width: 45%;
height: 54px;
margin-left: 5%;
font-size: 14px;
background-color: $white-color;
transition: $primary-transition;
&:hover {
background-color: #9ab643;
}
}
}
// Meta data
.product_meta {
.posted_in {
a {
font-weight: 700;
}
}
}
// Gallery
.flex-viewport {
margin-bottom: 20px;
}
.flex-control-nav {
display: flex;
align-items: center;
}
// Tabs
.woocommerce-tabs {
ul.tabs {
margin-bottom: 40px;
padding: 0;
text-align: center;
border-radius: 1px;
background-color: #f2f2f2;
li {
padding: 0;
margin: 0 -3px;
background: none;
border-style: solid;
border-color: rgba(0,0,0,0.1);
border-width: 0 1px 0 0;
border-radius: 0;
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
transition: $primary-transition;
&:first-of-type {
border-left: 1px solid rgba(0,0,0,0.1);
}
&:hover,
&.active {
border-color: transparent;
background-color: darken( $primary-color, 3);
a {
color: $white-color;
}
}
a {
padding: 18px 40px;
color: $text-color;
-webkit-transform: skew(25deg);
transform: skew(25deg);
}
}
&::before,
li.active::before,
li.active::after,
li::before,
li::after {
display: none;
}
}
}
// Reviews
#reviews {
#comments {
h2 {
font-size: 24px;
}
ol.commentlist {
padding: 0;
li {
.comment-text {
padding: 25px 30px 13px 30px;
margin-left: 80px;
border-radius: 2px;
border-color: rgba(0,0,0,0.1);
p.meta {
font-size: 13px;
font-style: normal;
font-weight: 700;
color: #464646;
.woocommerce-review__author {
font-size: 16px;
font-style: normal;
font-weight: 700;
}
}
}
.avatar {
padding: 0;
width: 60px;
border: none;
background: none;
}
}
}
}
#comment {
min-height: 125px;
}
#review_form {
label {
margin-bottom: 8px;
color: #464646;
font-size: 14px;
}
#respond {
p {
margin-bottom: 10px;
}
}
.comment-reply-title {
display: block;
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: #464646;
line-height: 1.3;
}
}
}
}
// Cart page
table.shop_table {
border-spacing: 0;
border-radius: 2px;
th,
td {
padding: 9px 20px;
border-bottom: none;
border-left: none;
border-right: none;
color: #464646;
}
th {
color: #464646;
font-size: 15px;
}
thead {
th {
padding-top: 12px;
padding-bottom: 12px;
color: #fff;
}
}
.quantity {
.qty {
width: 80px;
height: 40px;
}
}
.product-name {
font-weight: $bold-font-weight;
}
.button {
padding: 15px 30px!important; // need to be important to overwrite default WooCommerce style
}
.woocommerce-Price-amount {
color: #464646;
font-weight: 700;
}
}
form {
.form-row {
padding: 3px 0;
label {
color: #464646;
font-weight: 700;
}
}
&.woocommerce-checkout {
#customer_details {
margin-bottom: 30px;
}
.woocommerce-billing-fields {
@media screen and (max-width: 991px) {
margin-bottom: 30px;
}
}
#order_review_heading {
margin-bottom: 15px;
}
h3 {
font-size: 22px;
}
}
&.checkout_coupon {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 20px 20px 15px 20px;
border-color: #eee;
border-radius: 2px;
p {
margin: 0 -1px 6px 0;
&:first-of-type {
flex: 100%;
}
}
#coupon_code {
height: 56px;
}
}
}
// After payment - order overview
.woocommerce-thankyou-order-details {
padding: 20px 30px;
background-color: #f9f9f9;
}
ul.order_details {
li {
color: #464646;
}
}
.woocommerce-customer-details {
margin-bottom: 0;
address {
padding: 20px;
border-radius: 2px;
border: 1px solid #eee;
}
}
}
// Widget Product Categories
.widget_product_categories {
.product-categories {
li {
position: relative;
list-style: none;
&:first-of-type {
a {
border-top: none;
}
}
a {
display: block;
padding: 15px 25px;
font-weight: bold;
color: $white-color;
text-decoration: none;
background-color: $primary-color;
border-top: 1px dashed #99b34a;
text-shadow: 0 1px rgba(0,0,0,0.1);
transition: $primary-transition;
&:hover {
color: $white-color;
background-color: darken( $primary-color, 3);
}
}
> span {
position: absolute;
right: 30px;
top: 16px;
font-size: 13px;
font-weight: 700;
color: $white-color;
}
}
}
}
// Widget Toprated Products List
.woocommerce ul.product_list_widget,
ul.product_list_widget {
li {
padding: 10px 0;
border-bottom: 1px dashed #dedede;
&:first-of-type {
padding-top: 0;
}
&:last-of-type {
padding-bottom: 0;
border-bottom: none;
}
a {
color: $dark-color;
transition: $primary-transition;
&:hover {
color: $primary-color;
}
}
.star-rating {
display: block;
margin: 3px 0 4px 0;
}
img {
width: 50px;
margin-top: 7px;
}
}
}
// Widget Price Filter
.widget_price_filter {
.price_slider_amount .button {
padding: 12px 22px;
}
.price_slider_wrapper .ui-widget-content {
background-color: #f9f9f9;
}
.ui-slider .ui-slider-range {
background-color: #dedede;
}
.ui-slider .ui-slider-handle {
background-color: $primary-color;
}
}
// Widget Cart Widget
.widget_shopping_cart {
.cart_list {
li {
padding: 8px 0 8px 45px;
&:first-of-type {
padding-top: 10px;
}
&:last-of-type {
padding-bottom: 10px;
}
a.remove {
top: calc(50% - 10px);
}
}
.product_list_widget li img {
width: 30px;
}
}
.total {
padding-top: 10px;
border-top: 1px solid #dedede;
}
.button {
padding: 12px 22px;
width: calc(50% - 2px);
text-align: center;
}
}
// Widget Product Search
.widget_product_search {
.search-field {
float: left;
height: 55px;
outline: none;
padding: 0 20px;
width: 65%;
border-width: 1px 0 1px 1px;
border-style: solid;
border-color: #e6e6e6;
}
button[type="submit"] {
height: 55px;
width: 35%;
cursor: pointer;
outline: none;
line-height: 1;
white-space: normal;
border-radius: 0 1px 1px 0;
}
}
// WooCommerce Page
.woocommerce-page {
.woocommerce-NoticeGroup {
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
display: block;
}
}
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 10px 10px 70px;
margin-bottom: 40px;
font-weight: 700;
border-top: 0;
border-radius: 1px;
line-height: 1.25;
background: #f5f5f5;
@media(min-width: 500px) {
line-height: 43px;
}
&::before {
top: calc(50% - 10px);
left: 20px;
font-size: 20px;
line-height: initial;
color: $primary-color;
}
a.button {
order: 3;
flex-shrink: 0;
margin-top: 0;
padding: 15px 26px;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
&:hover {
background-color: darken( $primary-color, 3);
}
}
.showcoupon {
margin-right: auto;
margin-left: 10px;
}
}
.col2-set {
margin-bottom: 30px;
}
}
// WooCoomerce Cart
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
background-color: $primary-color;
font-size: inherit;
text-transform: uppercase;
&:hover {
background-color: darken( $primary-color, 3);
}
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
border: 1px solid #e6e6e6;
padding: 20px 30px 5px 30px;
border-radius: 1px;
table {
width: 100%;
}
}
// WooCommerce Checkout
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
border-radius: 1px;
background: #f5f5f5;
}
.woocommerce-shipping-fields {
#ship-to-different-address {
margin-bottom: 0;
}
.woocommerce-form__label {
display: flex;
gap: 15px;
}
.woocommerce-form__label-for-checkbox {
margin-top: 0;
}
#ship-to-different-address-checkbox {
position: relative;
margin-top: 10px;
margin-left: 0;
}
}
// WooCommerce Myaccount Page
.woocommerce-MyAccount-navigation ul {
list-style: none;
padding-left: 0;
li {
a {
display: block;
padding: 16px 30px;
margin: 3px 0;
font-size: 15px;
font-weight: bold;
color: #a5a5a5;
text-decoration: none;
background-color: #f5f5f5;
&:hover {
color: #fff;
background-color: #a2c046;
}
}
&.is-active {
a {
color: #fff;
background-color: #a2c046;
}
}
}
}
// WooCommerce Login Screen
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
padding: 30px 30px 15px 30px;
border-color: #eee;
border-radius: 2px;
}
.woocommerce form .form-row label.inline {
margin-left: 10px;
}
// WooCommerce select2 field
.woocommerce-page {
.select2-dropdown {
border-radius: 2px;
.select2-search__field {
margin: 5px 10px;
padding: 6px 15px;
width: calc( 100% - 20px);
border-color: #eee;
}
}
}
.woocommerce {
.select2-container {
&.select2-container--default {
.select2-selection--single {
padding: 0 10px;
outline: none;
color: #a5a5a5;
border: 1px solid #e6e6e6;
border-radius: 1px;
background-color: #f5f5f5;
}
}
&.select2-container--open {
.select2-selection--single {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
}
.select2-selection--single {
height: 51px;
}
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #999;
line-height: 50px;
outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
top: 13px;
right: 20px;
}
}
// Custom WooCommerce Elementor elements
.elementor-element {
// product category widget
.product-categories {
ul.products {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
margin: 0;
padding: 0;
list-style: none;
@media(min-width: $screen-md) {
grid-template-columns: repeat(4, 1fr);
}
&::before,
&::after {
display: none;
}
li.product {
width: auto;
float: none;
margin: 0;
&:first-of-type {
grid-column-start: 1;
}
}
li {
a {
display: block;
&.category-image {
overflow: hidden;
text-align: center;
margin-left: auto;
margin-right: auto;
border-radius: 2px;
-webkit-transform: scale(1);
transform: scale(1);
transition: transform .2s ease;
img {
margin-bottom: 0;
}
}
}
&:hover {
a {
&.category-image {
> img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
}
}
}
}
.product-categories__title {
margin: 25px 0;
font-size: 18px;
font-weight: 700;
a {
color: #464646;
transition: all .1s ease;
}
&:hover {
a {
color: $primary-color;
}
}
mark {
position: relative;
top: -3px;
padding: 0;
font-size: 14px;
background: none;
}
}
}
// shop products widget
.recent-products {
ul.products {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
margin: 0;
@media(min-width: $screen-md) {
grid-template-columns: repeat(4, 1fr);
}
&::before,
&::after {
display: none;
}
li.product {
width: auto;
float: none;
margin: 0;
&:first-of-type {
grid-column-start: 1;
}
.star-rating {
display: inline-block;
}
}
}
}
.woocommerce {
.products {
.product-category {
overflow: visible;
&:hover {
img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
a {
display: block;
}
img {
margin-left: auto;
margin-right: auto;
-webkit-transform: scale(1);
transform: scale(1);
transition: transform .2s ease;
}
.woocommerce-loop-category__title {
font-size: 18px;
}
.count {
transition: color .1s ease;
}
}
}
}
}