[Resolved] More than 6 columns with WooCommerce

[Marinex]

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

[Tom]

Hi there,

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

[Marinex]

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

[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 }

[Tom]

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 🙂

[Author]

Posts