[Resolved] Product category page style

[retroreiz]

Hello,

how do I best change the styling of the product category pages?

I want it to look like this: https://www.bilder-upload.eu/bild-a1b0cd-1563178805.png.html

Currently it looks like this: https://retroreiz.de/produkt-kategorie/nintendo/game-boy/spiele/

It should of course be applied to the mobile view.

Could you show me a way how to do it with generatepress board means?

Many Thanks.
Greetings Andreas

[Tom]

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 🙂

[retroreiz]

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

[Tom]

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

[retroreiz]

Hello Tom,

thats a good start 🙂

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

Thank you!

Greetings, Andreas

[Tom]

You’re welcome 🙂

[Author]

Posts