Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] More than 6 columns with WooCommerce

Home Forums Support More than 6 columns with WooCommerce

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #413518
    Marinex

    Hi guys. Any ideas on how to display more than 6 columns on the shop page?

    GeneratePress 1.4
    GP Premium 1.4.3
    #413885
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It would involve some PHP and CSS. How many columns are you needing?

    #414065
    Marinex

    Hi Tom. The plan was to have 8 columns :]

    #414275
    Marinex

    Nevermind, solved.

    add_action( 'wp_head', 'add_new_hax', 100 );
    
    function add_new_hax(){ ?>
    <style>
    	.woocommerce ul.products {
    		margin-left: 0px !important;
    		margin-right: 0px !important;
    	}
    	ul.products {
    		flex-wrap: wrap;
    		justify-content: center !important;
    	}
    	ul.products li.product {
    		width: 11.5% !important;
    		float: left !important;
    		margin-left: 0.5% !important;
    		margin-right: 0.5% !important;
    		clear: none !important;
    	}
    	
    	ul.products li.product .wp-post-image {
    		width: calc(100% - 10px) !important;
    	}
    	@media (max-width:1400px){
    		ul.products li.product {
    			width: 18% !important;
    			float: left !important;
    			margin-left: 1% !important;
    			margin-right: 1% !important;
    			clear: none !important;
    		}
    	}
    	@media (max-width:990px){
    		ul.products li.product {
    			width: 24% !important;
    			float: left !important;
    			margin-left: 0.5% !important;
    			margin-right: 0.5% !important;
    			clear: none !important;
    		}
    	}
    	@media (max-width:768px){
    		ul.products li.product {
    			width: 49% !important;
    			float: left !important;
    			margin-left: 0.5% !important;
    			margin-right: 0.5% !important;
    			clear: none !important;
    		}
    	}
    
    </style>
    <?php }
    #414663
    Tom
    Lead Developer
    Lead Developer

    Great job! Since you don’t need PHP inside the CSS, you can add it straight into the Additional CSS control in the Customizer instead of using a function to hook it into wp_head 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.