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 :)

Hi Tom,

thanks for the information.

I tried it, but it does not look that good.

The picture is much too large and the arrangement does not look like I had shown in the first post.
https://www.bilder-upload.eu/bild-aa587c-1563258526.png.html

In addition, it looks in the mobile view, unfortunately, not as intended.
https://www.bilder-upload.eu/bild-c2cfa0-1563258540.png.html

I wanted it to look something like this, in the mobile view: https://www.bilder-upload.eu/bild-4b2eb6-1563258569.png.html

Can I somehow arrange with the "elements", or is it all about CSS?

Thank you and greetings, Andreas

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
    }
}

Hello Tom,

thats a good start :)

The css code help me :D
https://www.bilder-upload.eu/bild-3d528a-1563357526.png.html

Thank you!

Greetings, Andreas

You're welcome :)