{"id":5399,"date":"2021-12-13T00:22:37","date_gmt":"2021-12-13T00:22:37","guid":{"rendered":"https:\/\/essentials.pixfort.com\/knowledge-base\/?p=5399"},"modified":"2024-03-11T21:36:20","modified_gmt":"2024-03-11T21:36:20","slug":"display-2-columns-for-products-in-mobile","status":"publish","type":"post","link":"https:\/\/essentials.pixfort.com\/knowledge-base\/display-2-columns-for-products-in-mobile\/","title":{"rendered":"Display 2 columns for products on mobile and tablet"},"content":{"rendered":"\n
<\/p>\n\n\n\n
You can customize WooCommerce plugin<\/strong> products and display 2 columns on mobile by adding this custom css code via the Theme options > Layout > Advanced > Custom css<\/strong>:<\/p>\n\n\n\n You can customize WooCommerce plugin<\/strong> products and display 2 columns on mobile and tablet by adding this custom css code via the Theme options > Layout > Advanced > Custom css<\/strong>:<\/p>\n\n\n\n@media (max-width: 692px) {
.woocommerce ul.products[class*=columns-] li.product.type-product, .woocommerce-page ul.products[class*=columns-] li.product.type-product {
width: 48% !important;
}
}<\/pre>\n\n\n\nOn Mobile & Tablet<\/strong><\/h6>\n\n\n\n
@media (max-width: 992px) {\n.woocommerce ul.products[class*=columns-] li.product.type-product, .woocommerce-page ul.products[class*=columns-] li.product.type-product {\nwidth: 48% !important;\n}\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"Learn how to display Woocommerce products in 2 columns in mobile\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[97],"tags":[316,234,7,114,315,112],"yoast_head":"\n