Archived topic
Generatepress / Elementor / Woocommerce big problem
10 replies · Started by Cees on August 11, 2018
I have installed the last update from Elementor (Woocommerce). I can't display the products or the category images very well until I deactivate the Woocommerce module from GP. When I set the module on then the category images and text size in the 'editor' displays nice, but doesn't do that on the frontpage. Images displays with different height.
I have also add a custom CSS found on Facebook (Tom) :
.elementor-widget-container .woocommerce ul.products li.product {
width: auto;
}
But it doesn't work .
Please please can you help me.
Hi there,
Which page should I be looking at?
Let me know :)
Hi Tom,
This is the page. It looks good now but I have to set WooCommerce ON and and the CSS.
And now with link :)
https://www.ceescoenen.nl/bladmuziek-catalogus
This is the page. It looks good now but I have to set WooCommerce ON and and the CSS.
I would need to see the problem in order to know what's going on.
Can you see it? The images from the category are different and also the text is not changed on the frontside.
I'm seeing one category image with a different size. How are the other ones being sized? An option in WooCommerce?
Which text isn't changed on the front end?
Hi Tom, I have send you an e-mail with screenshots and explanation.
So here's what I'm seeing. The images are the same size, but Elementor is using CSS Grid to build the columns, but the columns don't have a fixed width.
So when one of your category names is long (without a space), it makes the column a little larger than the others.
You can try:
a) Increasing your container width: Customize > Layout > Container
b) Decreasing the category name font size:
.woocommerce ul.products li.product .woocommerce-loop-category__title {
font-size: 15px;
}Let me know if this helps or not :)
Thank you Tom, it looks like it works now.
One question if you can answer me: how can I change the product titles at once with CSS here https://www.ceescoenen.nl/bladmuziek-catalogus/
My CSS skills are not the best. I understand how it works but I'm afraid to make mistakes.
Something like this?
.woocommerce ul.products li.product .woocommerce-LoopProduct-link h2 {
font-size: 30px;
color: #ddd;
}