WooCommerce Shop Product Columns - How to Change the Number Shown

By default the theme automatically styles the shop pages to show as 3 items per row. However this can be changed with some Custom CSS:

This code is to setup 4 columns:

/* Show 4 products per row on Shop page */
@media (min-width:992px) {
    .woocommerce ul.products li.product {
        width:22%;
        margin-right:4%;
    }
    .woocommerce ul.products li:nth-child(3n+3),
    .woocommerce ul.products li.last, .woocommerce-page ul.products li.last {margin-right:4%}
    .woocommerce ul.products li:nth-child(3n-8) {clear:none}
    .woocommerce ul.products li:nth-child(4n+1) {clear:left}
    .woocommerce ul.products li:nth-child(4n) {margin-right:0}
}

This code is to setup 5 columns:

/* Show 5 products per row on Shop page */
@media (min-width:992px) {
    .woocommerce ul.products li.product {
        width:17.6%;
        margin-right:3%;
    }
    .woocommerce ul.products li:nth-child(3n+3),
    .woocommerce ul.products li.last, .woocommerce-page ul.products li.last {margin-right:3%}
    .woocommerce ul.products li:nth-child(3n-8) {clear:none}
    .woocommerce ul.products li:nth-child(5n+1) {clear:left}
    .woocommerce ul.products li:nth-child(5n) {margin-right:0}
}