Styling Woocommerce single product pages

[spiezz]

I've tried .woocommerce-page .product and all kinds of specifiers from inspector but my single product pages are showing like a sidebar on mobile. The only css that is applied to them is inside the woocommerce plugin css and I have a feeling that I better not mess with that.

I found a few solutions in the forum, but none of them worked.

Any leads enthusiastically appreciated!

https://easytravelblogging.com/product/wandering-goat-ready-to-write-blog-monthly-package/

[Victor Font]

If you're making changes for WooCommerce styles and putting them in your child theme style sheet, you won't see changes because your theme's child sheet loads before the WooCommerce style sheet.

CSS applies styles in a last-in-first-out manner. The last style sheet to load is the style sheet that has the priority. If you want your child theme's style sheet to have the priority, then you have to change the load order.

If you add your custom styles the the WordPress Additional CSS page, these changes will receive the priority because they are added to your site as inline styles.

If you want to learn how to changes the style sheet load order, see this: https://victorfont.com/change-genesis-child-theme-style-sheet-load-order/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[spiezz]

Thanks so much Victor!

I shuddered when looking at the css in the woocommerce plugin. So for the naysayers, there is a great use for that "extra css" customization after all!

[Author]

Posts