1 column

@media (max-width: 767px) {
.woocommerce ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-3 li.product {
margin: 0;
}
}

column ที่ 3
จะทำให้เรียง3column ภาพ ติดกัน ไม่เว้นระยะห่าง
ถ้าใช้ margin-left:3% จะทำให้ รูปขวาสุด มีช่องว่างขวา

@media only screen and (min-width: 768px) {
  .woocommerce ul.products.columns-3 li.product,
  .woocommerce-page ul.products.columns-3 li.product {
      width: 33.33%;
      margin: auto
  }
}