How to Change the Number of Product Columns on WooCommerce Shop Pages

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 display 4 columns:

@media (min-width: 768px) {
  .woocommerce ul.products li.product {
    width: 22.05%;
    margin: 0 3.8% 2.992em 0;
  }
  .woocommerce ul.products li:nth-child(3n+3) {margin-right: 3.8% !important;}  
  .woocommerce ul.products li:nth-child(3n-8) {clear: none;}
  .woocommerce ul.products li.last, .woocommerce-page ul.products li.last {margin-right: 0 !important;}  
}

This code is to display 5 columns:

@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% !important}
    .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 !important}
}

This code is to display 6 columns:

@media (min-width:992px) {
    .woocommerce ul.products li.product {
        width:15%;
        margin-right:2%;
    }
    .woocommerce ul.products li:nth-child(3n+3),
    .woocommerce ul.products li.last, .woocommerce-page ul.products li.last {margin-right:2% !important}
    .woocommerce ul.products li:nth-child(3n-8) {clear:none}
    .woocommerce ul.products li:nth-child(6n+1) {clear:left}
    .woocommerce ul.products li:nth-child(6n) {margin-right:0 !important}
}

Custom CSS can be added into the child theme, or under Appearance > Customize > Additional CSS.