Archived topic
More than 6 columns with WooCommerce
4 replies · Started by Marinex on October 31, 2017
Viewing posts 1–5 of 5
Hi guys. Any ideas on how to display more than 6 columns on the shop page?
Hi there,
It would involve some PHP and CSS. How many columns are you needing?
Hi Tom. The plan was to have 8 columns :]
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 }
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 :)
This archived topic is closed to new replies.