我想更改每行(类别页面(的产品数量,具体取决于屏幕尺寸。
jQuery(window).resize(function(){
var width = jQuery(window).width();
if(width >= 1000 && width <= 1200){
jQuery('.sentry-product').removeClass('columns-4').addClass('columns-3');
}
else{
jQuery('.sentry-product').removeClass('columns-3').addClass('columns-4');
}
})
.resize();
我正在使用这个jQuery来更改可能的列数,我还需要更改产品的数量,
现在我正在对产品数量进行硬编码
function storefront_product_columns_wrapper() {
$columns = storefront_loop_columns();
echo '<div class="sentry-product columns-' . intval( $columns ) . '">';
}
}
if ( ! function_exists( 'storefront_loop_columns' ) ) {
/**
* Default loop columns on product archives
*
* @return integer products per row
* @since 1.0.0
*/
function storefront_loop_columns() {
return apply_filters( 'storefront_loop_columns', 4 ); // 4 products per row
}
}
我有另一个想法,如果我可以从类名中传递产品数量作为参数,它将解决问题 - 返回 apply_filters( 'storefront_loop_columns', X (;
我不明白我能不能做到,一些想法?
这是如何使用三列来做到这一点,在 600px 或更小的视口上减少到两列;
@media screen and (max-width: 600px) {
.woocommerce.columns-3 ul.products li.product, .woocommerce-page.columns-3 ul.products li.product {
width: 45%; /* was 30.75% */
}
.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
width: 45%; /* for category pages */
}
.woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
clear: none; /* was both */
}
.woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
margin-right:3.8%; /* was 0 */
}
显然,您必须针对不同数量的列或断点进行调整。我即将为 480px 编写另一组,这样我就可以在手机上每行有一个产品。这个CSS是在woo commerce的CSS之后(或使用!important
(