{"id":3824,"date":"2022-09-25T16:12:10","date_gmt":"2022-09-25T16:12:10","guid":{"rendered":"https:\/\/scriptfeeds.com\/blog\/?p=3824"},"modified":"2023-03-07T21:23:25","modified_gmt":"2023-03-07T21:23:25","slug":"how-to-show-2-product-columns-in-woocommerce-shop-page","status":"publish","type":"post","link":"https:\/\/scriptfeeds.com\/blog\/wordpress\/how-to-show-2-product-columns-in-woocommerce-shop-page\/","title":{"rendered":"How to easily show 2 product columns in WooCommerce shop page"},"content":{"rendered":"\n<p>This Blog will guide you to show 2 product columns in WooCommerce Shop pages for Mobile Screen. By default <strong><a href=\"http:\/\/woocommerce.com\" data-type=\"post\" data-id=\"3107\" target=\"_blank\" rel=\"noopener\">WooCommerce<\/a><\/strong> shop pages has 1 column product for mobile screen. <\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#strong-query-from-a-client-strong\">Query from a client<\/a><\/li><li><a href=\"#strong-how-to-show-show-2-product-columns-in-a-href-https-scriptfeeds-com-blog-category-wordpress-woocommerce-data-type-url-data-id-https-scriptfeeds-com-blog-category-wordpress-woocommerce-woo-commerce-a-shop-strong\">Code to show 2 product columns in WooCommerce shop<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"has-medium-font-size wp-block-heading\" id=\"strong-query-from-a-client-strong\"><strong>Query from a client<\/strong><\/h2>\n\n\n\n<p>Our many clients asked us if we can make it 2 column for mobile screen which is better for view during scroll down, as 2 column gives more product view per scroll.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/03\/Single-columns-view-in-woocommerce-shop-page-259x550.jpg\" alt=\"show 2 product columns in WooCommerce shop\" class=\"wp-image-4021\" width=\"180\" height=\"382\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/03\/Single-columns-view-in-woocommerce-shop-page-259x550.jpg 259w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/03\/Single-columns-view-in-woocommerce-shop-page-76x161.jpg 76w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/03\/Single-columns-view-in-woocommerce-shop-page-38x81.jpg 38w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/03\/Single-columns-view-in-woocommerce-shop-page-399x848.jpg 399w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/03\/Single-columns-view-in-woocommerce-shop-page.jpg 602w\" sizes=\"(max-width: 180px) 100vw, 180px\" \/><figcaption class=\"wp-element-caption\">1 product columns in WooCommerce shop page<\/figcaption><\/figure>\n\n\n\n<h2 class=\"has-medium-font-size wp-block-heading\" id=\"strong-how-to-show-show-2-product-columns-in-a-href-https-scriptfeeds-com-blog-category-wordpress-woocommerce-data-type-url-data-id-https-scriptfeeds-com-blog-category-wordpress-woocommerce-woo-commerce-a-shop-strong\"><strong>How to show show 2 product columns in <a href=\"https:\/\/scriptfeeds.com\/blog\/category\/wordpress\/woocommerce\/\" data-type=\"URL\" data-id=\"https:\/\/scriptfeeds.com\/blog\/category\/wordpress\/woocommerce\/\">WooCommerce <\/a>shop<\/strong><\/h2>\n\n\n\n<p>To achieve this we have to add the below code in <strong>CUSTOM CSS<\/strong> option of theme or in <strong>style.css of child theme<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media only screen and (max-width:768px) {\n    .woocommerce-page ul.products{\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n         flex-flow: row wrap;\n    }\n    .woocommerce-page ul.products li.product{\n         flex: 0 0 50%;\n         -webkit-box-flex: 0;\n         padding: 10px;\n    }\n}<\/code><\/pre>\n\n\n\n<p>Just add the code and check the check the display in mobile view. So that&#8217;s all we have to do to 2 product columns in WooCommerce shop page. Let us know how it works for you in comment section. You can also contact our <strong><a href=\"https:\/\/scriptfeeds.com\/blog\/hire-us\/\" data-type=\"page\" data-id=\"3537\">Developer team<\/a><\/strong> for the same.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This Blog will guide you to show 2 product columns in WooCommerce Shop pages for Mobile Screen. By default WooCommerce shop pages has 1 column product for mobile screen. Query from a client Our many clients asked us if we can make it 2 column for mobile screen which is better for view during scroll [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3412,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":{"subtitle":"","format":"standard","video":"","gallery":"","source_name":"","source_url":"","via_name":"","via_url":"","override_template":"0","override":[{"template":"2","single_blog_custom":"","parallax":"1","fullscreen":"1","layout":"right-sidebar-narrow","sidebar":"default-sidebar","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"float","share_float_style":"share-monocrhome","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","show_post_author":"1","show_post_author_image":"1","show_post_date":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_category":"1","show_post_reading_time":"0","post_reading_time_wpm":"300","show_zoom_button":"0","zoom_button_out_step":"2","zoom_button_in_step":"3","show_post_tag":"1","show_prev_next_post":"0","show_popup_post":"0","number_popup_post":"1","show_author_box":"0","show_post_related":"1","show_inline_post_related":"0"}],"override_image_size":"0","image_override":[{"single_post_thumbnail_size":"no-crop","single_post_gallery_size":"crop-500"}],"trending_post":"0","trending_post_position":"meta","trending_post_label":"Trending","sponsored_post":"0","sponsored_post_label":"Sponsored by","sponsored_post_name":"","sponsored_post_url":"","sponsored_post_logo_enable":"0","sponsored_post_logo":"","sponsored_post_desc":"","disable_ad":"0"},"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[75,86],"tags":[264,265,263],"class_list":["post-3824","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-woocommerce","tag-display-two-column-of-products-on-mobile-view","tag-shop-page-2-column-layout-woocommerce","tag-shop-page-2-product-columns"],"_links":{"self":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/3824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/comments?post=3824"}],"version-history":[{"count":0,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/3824\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media\/3412"}],"wp:attachment":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media?parent=3824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/categories?post=3824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/tags?post=3824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}