Browse Source

Varia: Use grid display in product list widgets

Allan Cole 5 năm trước cách đây
mục cha
commit
4886111e75

+ 1 - 0
varia/sass/vendors/woocommerce/widgets/_imports.scss

@@ -3,3 +3,4 @@
  */
 
 @import "price-filter";
+@import "product-lists";

+ 21 - 0
varia/sass/vendors/woocommerce/widgets/_product-lists.scss

@@ -0,0 +1,21 @@
+/**
+ * Filter by Product List Widgets
+ */
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
+
+	.widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) {
+
+		@include media(mobile) {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+
+			& > li {
+				flex: 0 1 auto;
+				margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+				padding: 0;
+				width: calc((100% / 3) - #{map-deep-get($config-global, "spacing", "unit")});
+			}
+		}
+	}
+}

+ 17 - 0
varia/style-woocommerce.css

@@ -1899,3 +1899,20 @@ body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-hand
 body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-widget-content {
 	background-color: #767676;
 }
+
+/**
+ * Filter by Product List Widgets
+ */
+@media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	body[class*="woocommerce"] #page .widget.woocommerce ul.product_list_widget:not(.woocommerce-mini-cart) > li {
+		flex: 0 1 auto;
+		margin-bottom: 32px;
+		padding: 0;
+		width: calc((100% / 3) - 16px);
+	}
+}