Shop Layout CSS – 3 Columns & Filter Sidebar

/* Сетка товаров в 3 колонки и фильтр 1/6 ширины */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
}

.woof_container {
display: flex !important;
gap: 30px !important;
align-items: flex-start !important;
}

.woof_widget_wrapper {
width: 16.67% !important;
flex-shrink: 0 !important;
background: #f9f9f9 !important;
border-radius: 8px !important;
padding: 20px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.woof_products_wrapper {
width: 83.33% !important;
flex-grow: 1 !important;
}

.woof_widget_wrapper .woof_title,
.woof_widget_wrapper h3 {
font-size: 14px !important;
font-weight: 600 !important;
color: #1a3a5c !important;
margin-bottom: 12px !important;
padding-bottom: 8px !important;
border-bottom: 2px solid #e8732a !important;
text-transform: uppercase !important;
}

.woof_widget_wrapper select {
width: 100% !important;
padding: 10px 12px !important;
border: 1px solid #ddd !important;
border-radius: 4px !important;
margin-bottom: 12px !important;
background-color: #fff !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}

.woof_widget_wrapper select:hover {
border-color: #e8732a !important;
box-shadow: 0 0 0 3px rgba(232, 115, 42, 0.1) !important;
}

.woof_widget_wrapper select:focus {
outline: none !important;
border-color: #e8732a !important;
box-shadow: 0 0 0 3px rgba(232, 115, 42, 0.2) !important;
}

.woof_widget_wrapper button,
.woof_widget_wrapper .woof_submit_button {
width: 100% !important;
padding: 12px !important;
background-color: #e8732a !important;
color: #fff !important;
border: none !important;
border-radius: 4px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
margin-top: 15px !important;
}

.woof_widget_wrapper button:hover,
.woof_widget_wrapper .woof_submit_button:hover {
background-color: #d45a1a !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(232, 115, 42, 0.3) !important;
}

@media (max-width: 1024px) {
.woof_container {
flex-direction: column !important;
}
.woof_widget_wrapper {
width: 100% !important;
}
.woof_products_wrapper {
width: 100% !important;
}
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
}

@media (max-width: 768px) {
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: 1fr !important;
}
}

Оставьте комментарий

Прокрутить вверх