Archived topic
Problem with WooCommerce styles
18 replies · Started by Pedro on February 6, 2019
Hello! I hope you are well.
Recently I just bought the GP Premium plugin and installed it with the Generatepress theme.
But I'm having problems with the styles. Things like:
- The colors and sizes of the buttons are not like the theme.
- The prices of the products are not the color or the original typography of the theme.
- The color of the stars (reviews) are not the color.
- In the mobile version it does not look good at all.
- Among other things.
It's as if it's not showing CSS styles correctly
My site is: http://www.celuganga.co
Please help!!
Hello! I was watching and what happens is that it leaves the original styles of WooCommerce (nothing nice)
Another thing I wanted to ask you, do you have store templates for WooCommerce? (Without page builder)
Can you help me please?
Hi there,
I don't see any of GP's code in your WooCommerce pages at all.
Is the add-on activated?
https://docs.generatepress.com/article/installing-gp-premium/#activate-your-modules
If so can you disable all caching plugins you have?
Hi leo! Of course I have it installed.
On my site I have WP Rocket + Cloudflare. I have already tried uninstalling the plugins and changing the DNS to my hosting but the problem continues.
I know you've installed GP Premium but if the WooCommerce add-on activated within GP Premium? (see the link above)
If so it's likely a caching problem or plugin conflicts.
Of course I have it activated
Then give #1 a shot here:
https://docs.generatepress.com/article/debugging-tips/
Make sure all the server cache is disabled as well.
We haven't had this problem reported before so I'm guessing it's either a caching problem or plugin conflict.
Hello! A thousand thanks for the ayauda.
Apparently what causes the problem is a plugin (Checkout for WooCommerce), since to disable it everything worked correctly.
Could you please check it? This addon is very important on my site.
Then I leave the site of the plugin: https://www.checkoutwc.com/
Hello! I want to report that even after disabling the plugin that causes conflicts (you can see the styles correctly)
In the mobile version it is not displayed well. I send some screenshots.
https://www.dropbox.com/s/d69hgi3kxi0ny6q/IMG_1770.PNG?dl=0
It looks like something is preventing the mobile CSS for WooCommerce from displaying.
Can you try excluding a file in WP Rocket?: https://docs.wp-rocket.me/article/1131-resolving-issues-with-css-minify-combine
Try these exclusions:
wp-content/plugins/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css
wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.cssI'm not sure about that plugin. I can't imagine why it would prevent any of our CSS from working. Any chance you can activate it so I can see the issue?
Hello!! I have already added the CSS exclusion in WP Rocket. I have cleared cache and it still does not work.
Please help! Thank you!
It seems like a lot of the mobile CSS isn't being read. This can happen in CSS when there's a parse error - any CSS below the error won't be read.
I ran your single product URL through this tool, and it seems there are some parse errors in the Gutenberg Woo Block: https://jigsaw.w3.org/css-validator/
I doubt those are in the actual plugin, as they would cause issues for a lot of users. I wonder if WP Rocket or Cloudflare are changing the files at all.
Do the issues go away if you disable WP Rocket?
Hello! I tried somewhere else where I also have the theme installed and the problem if it is with the cache (WP Rocket)
If you want you can tell me the path of all the CSS that are being affected to exclude them.
Thank you!
Do the issues go away when WP Rocket is deactivated?
Try this:
wp-content/plugins/woo-gutenberg-products-block/build/vendors.css
Make sure it's excluded from minifying as well.
