[Resolved] Woocommerce styles overwrite my custom css

[Author]

Posts

[gaianH]

I am trying to:
Integrate a woocommerce store into my site.

Using the same style elements from the rest of my site fails because in the woocommerce pages of the starter theme the "custom layout css" gets called before the woocommerce and standard theme styling.

I've been forced to set everything in the custom layout css to !important, because I wasn't able to understand where that css gets called in the template source files.

[Luo Yang]

Hi,

I assume we are talking about the custom CSS codes in Dashboard-> Toolset-> Layouts CSS and JS-> CSS Editor

It is loaded in the Layouts plugin, file \layouts\classes\wpddl.cssmanager.class.php, line 102:

wp_enqueue_style('wp_ddl_layout_fe_css', $this->css_url() . '/' . $md5 . '.css', array(), WPDDL_VERSION, 'screen' );

Which is using wordpress function wp_enqueue_style:
https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Since you are using same CSS class name as Woocommerce, I suggest you add the "!important" into your custom CSS codes.

[gaianH]

I don't really understand what to do with this information.

What I don't understand is that in the CSS hierarchy it loads in this order (only on woo commerce pages):

1) Theme.css:5
2) My "Layouts CSS & JS" code
3) Style.css
4) Theme.css:5 again

On all my non-woo commerce pages it loads as you'd normally expect:

Theme > Style > Custom.

What is going on in the woo commerce integration that seems to shuffle the order in which things are loaded?

What can I do to put it back in the proper, expected order?

[Luo Yang]

I can not duplicate same problem, here is the detail steps, please correct me if anything missing:
1) Install Layouts + Woocommerce plugins + Toolset Starter theme in a fresh wordpress installation
2) Create a layout, and assign it with a product post,
3) Test the product post in front-end

In my Chrome browser-> , I can see the "Layouts CSS" is loaded at the end of other CSS files. see screenshot 11.jpg

[gaianH]

Well. I'm unable to figure anything out about this issue. I had woo commerce installed long before I bought Toolset, I don't have the time or understanding to fix this so I guess that's it.

Thanks for your help, I'm sorry nothing could be resolved.