[Resolved] Product category page style

Hi there,

Have you tried our WooCommerce options in “Customize > Layout > WooCommerce”?

You could set the columns to 1, then align the image to the left.

That should get you a similar look.

Let me know 🙂

You need to adjust the image size in the Customizer if the image is too large.

You will need a decent amount of CSS to achieve that look on mobile. This might be a good start:

.product p.wc-gzd-additional-info {
    clear: none;
}

@media (max-width: 768px) {
    .woocommerce ul.products li.product.woocommerce-image-align-left .wc-product-image {
        float: left;
        margin-right: 1.5em;
    }

    .woocommerce ul.products li.product.woocommerce-image-align-left .wc-product-image img {
        max-width: 200px;
    }

    .wc-columns-container .products {
        grid-gap: 0;
    }

    #wc-column-container .product {
        border-bottom: 1px solid #ccc;
        padding-bottom: 20px;
        margin-bottom: 20px
    }
}

You’re welcome 🙂