✏️ Editing: _listing.scss Writable

.woocommerce{

#woo_main{
		
		padding: 0 10px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		
		@media(max-width: 767px){
			padding: 0 20px;
			flex-direction: column;
		}

.content-area{
			
			@media(max-width: $desktop -1 ){
				flex: 0 0 100%;
				padding-left: 0;
				width: 100%;
			}

// Show Result 
			.woocommerce-result-count{
				margin: 6px 0 0 0 ;
				font-size: 18px;
				line-height: 26px;
				font-weight: 400;
			}

// Sorting
			.woocommerce-ordering{
				width: 245px;
				margin-bottom: 40px;
				.orderby {
					background-color: #fff;
					color: rgba(0,0,0,0.7);
				}
			}

// Listing
			ul.products{
				margin-bottom: 60px;
				@media(max-width: 991px){
					margin-bottom: 30px;
				}

&[class*=columns-] {
					li.product {
		                @media (max-width: 580px) {
							width: 100%;
							float: none;
						}
					}
				}

li.product{
					text-align: center;
					position: relative;
					overflow: hidden;
					padding-bottom: 40px;
					background-color: $background-field;
					border: 1px solid $border-field-color;
					.cat_product{
						color: var(--text);
						font-weight: 500;
						line-height: 1;
						display: inline-block;
						padding: 0 8px;
						&:hover {
							color: var(--primary);
						}
					}
					.button{
						visibility: visible;
						opacity: 1;
					}
					.star-rating {
						font-size: 13px;
						margin: 0 auto 8px auto;
					}
					.onsale{
						display: inline-block;
						top: 10px;
						right: 10px;
						left: auto;
						background: var(--primary);
						padding: 0 10px;
						margin: 0;
						min-height: 25px;
						line-height: 25px;
						font-size: 14px;
						font-weight: 600;
						min-width: unset;
						border-radius: 3px;
						text-transform: uppercase;
					}
					a.woocommerce-loop-product__link{
						img{
							padding: 40px 0 0 0;
						}
					}
					.woocommerce-loop-product__title{
						margin: 0;
						font-size: 18px;
						line-height: 26px;
						color: var(--heading);	
						font-weight: 600;
						z-index: 3;
						&:hover {
							color: var(--primary);
						}
					}
					.price{
						font-size: 16px;
						line-height: 26px;
						color: var(--primary);
						font-weight: 600;
						padding: 0px 15px 0px 15px;
						ins{
							font-weight: 600;
							margin-left: 6px;
							text-decoration: none;
						}
					}
					
					.button, 
					a.add_to_cart_button{
					    transition: 0.4s;
					    z-index: 2;
					    
					    &.loading:after{
							right: 0.5em;
						}
						
						&:hover{
							background: var(--primary);
							color: #fff;
						}
					}

a.added_to_cart{
						margin-top: 20px;
						display: inline-block;
						visibility: visible;
						opacity: 1;
						background-color: transparent;
						color: var(--heading);
						text-decoration: underline;
						text-transform: capitalize;
						padding: 0 15px;
						&:hover{
							color: var(--primary);
						}	
						&:after{
							padding-left: 5px;
						}	
					}

.product_type_external,
					.product_type_grouped,
					.product_type_variable{
						&:after{
							position: absolute;
						    top: 0;
						    right: 10px;	
						}
					}

}
			}
			
			
		}
		
	}

&.elementor-default #woo_main{
		padding: 0 10px;
	}
}

🔐 Sid Gifari File Manager Pro