Topic: Simple WooCommerce product listing/archiv styling

kernfunke
August 1, 2024 at 2:29 am

Hey friends,

Since a long time we are big friends of GeneratePress and to it´s minimal but powerful approach to extend the options/capabilities of WordPress/Gutenberg. But what I still not have figured out is why there is close to no support for styling at least basic WooCommerce pages. And even while reading through the forum, I don´t find any good solution. It would be so great if there would be a way to add a layout element or similar for something like this. Do I really have to install a heavy builder like Elementor just to make some small styling to the standard WooCommerce pages?

1.Right now I am struggling with adding a padding on the normal shop listings (optimal would be a padding only on screens smaller than the global container width of 1400px), because they are clued to the left side on screens smaller than 1400px and to center the product tiles when they become one column on small displays.

I tried already all kind of custom CSS and while the code works in the developer mode of the browser, it does not in the WordPress additional CSS for some reason.

2. And as we are already on the topic, it would be in general nice to know, if you have a clever GP solution to a setting, we have to add on every single website: A small padding right and left for the content and menu on screens smaller than the global container width. And yes, if I have a global container width of 1400px, I would like to use it completely from left to right if the display is as wide or wider. And yes, we also like the designs, where some sections of the page are full browser width (or at least the background). But I think nobody wants it´s site clued to the edges of his screen on smaller displays, so I can´t understand that there is no simple setting for this. Any suggestions to how to tackle this the best and easiest with GeneratePress?

It would be great if you could help and maybe give me a little inside, how I can maybe use the amazing capabilities of GP and GB, Elements and more to style my WooCommerce listings. That would be so great!!!!
David
August 1, 2024 at 3:10 am

Hi there,

in Appearance > Elements there is a Layout element called Page width.
It is setting the Content Area for the Entire Site to Full Width
This option makes the content container 100% and REMOVES all theme padding.

This option should be applied to pages where you need a full width container and you can build out your own content and add padding using the block editor.

So edit that element, and change the Display Rules just to those places eg. Pages, where you require a fill width layout.

The rest of the site will then use the Container Width and Container Padding set in the Customizer > Layout > Container.
kernfunke
August 1, 2024 at 7:11 am

Thanks for the suggestion. We will check it out.

Any tipps regarding my point number 1?
Ying
August 1, 2024 at 9:13 am
For #1, you are using a layout element to set the content container to be contained, which removes the theme paddings.

Edit that layout element, and set the content container to default should restore the paddings.

And to center the images and texts, try adding this CSS:
```
#wc-column-container .product {
    justify-content: center;
    text-align: center;
}

.woocommerce-text-align-left .wc-product-image {
    text-align: center;
}
```

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Simple WooCommerce product listing/archiv styling