Question

我正在使用woocommerce产品类别，我想在两列中显示产品类别，而不是一列。我试图将CSS代码更改为

@media (max-width: 479px) {
.et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n), .et_gallery_item:nth-child(n) {
width: 48% !important;
}
}
@media only screen and ( max-width: 480px ) {
.woocommerce-page .woocommerce ul.products li.product:nth-child(n) {
margin-right: 5px !important;
margin-top: 5px !important;
margin-bottom: 5px !important;
}
}
@media (max-width: 479px){
.et_pb_row_fullwidth.custom-fullwidth-row {
width: 100% !important;
max-width: 100% !important;
margin: 0;
}
.custom-fullwidth-row .woocommerce {
padding: 0 5px 0 5px !important;
}}

但是，它没有显示两列产品类别。我该如何解决？这是我的完整CSS代码

body.boxed .main-menu-wrap { background: #0088cc; padding: 8px 0; }
.home-slider.owl-carousel .owl-nav .owl-prev,
.home-slider.owl-carousel .owl-nav .owl-next{
    background: transparent;
    color: #544e4e;
    font-size: 40px;   
}
.home-slider.owl-carousel .owl-nav .owl-prev{
    left: 20px;
}
.home-slider.owl-carousel .owl-nav .owl-next{
    right: 20px;
}
.home-slider.owl-carousel .owl-nav .owl-prev:before{
    content: '\e84f';
}
.home-slider.owl-carousel .owl-nav .owl-next:before{
    content: '\e850';
}
i.widget-title-icon {
    font-size: 26px;
    color: #2f2727;
}
#main.main-boxed .vc_row.custom-line-full{
    max-width: inherit;
    left: -1000px !important;
    width: 3000px !important;
}
@media (max-width: 479px) {
.et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n), .et_gallery_item:nth-child(n) {
width: 48% !important;
}
}
@media only screen and ( max-width: 480px ) {
.woocommerce-page .woocommerce ul.products li.product:nth-child(n) {
margin-right: 5px !important;
margin-top: 5px !important;
margin-bottom: 5px !important;
}
}
@media (max-width: 479px){
.et_pb_row_fullwidth.custom-fullwidth-row {
width: 100% !important;
max-width: 100% !important;
margin: 0;
}
.custom-fullwidth-row .woocommerce {
padding: 0 5px 0 5px !important;
}}

更新：只需将CSS文件更改为

即可

@media (max-width:479px){ 
    ul.pcols-ls-1 li.product, .column2 ul.pcols-ls-1 li.product, ul.pcols-ls-1 li.product-category, .column2 ul.pcols-ls-1 li.product-category { 
        width: 50% !important; } }

Answer 1

$("#owlCarousel").owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:2,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})

现在转到主题的自定义js脚本部分，如果它是你的主题。然后粘贴上面的javascript代码。另外，你需要检查你的滑块ID，如果它与使用你的滑块ID不同，而不是上面代码中的#owlCarousel

Answer 2

请按照以下链接。

https://docs.woocommerce.com/document/change-number-of-products-per-row/

它会告诉你如何在woo commerce中管理行和产品限制。

如何在woocommerce产品类别中显示两列？

2 个答案: