beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Use grid display in product list widgets

Browse source
This commit is contained in:
Allan Cole 2019-10-18 12:14:32 -04:00
parent df9ca102d1
commit 4886111e75
3 changed files with 39 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
varia/sass/vendors/woocommerce/widgets/_imports.scss vendored
View file

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

21
varia/sass/vendors/woocommerce/widgets/_product-lists.scss vendored Normal file
View file

@ -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
varia/style-woocommerce.css
View file

@ -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);
}
}