Enqueue Optimised CSS after WooCommerce CSS?

Resolved

(@jezthomp)

Is it possible to enqueue the optimised Autopimize css after other css that i’ve told it to ignore.

Currently the optimised css appears at the very top and the woocommerce below it.

I usually use the following to ensure my CSS appears below the woocomerce css, is it possible to do the same with Autopimize?

/**
 * Enqueue Main Site Styles AFTER WooCommerce Styles
 *
 * @since  1.0.0
 * @access public
 * @return void
 */
function enqueue_style_after_wc(){
    $deps = class_exists( 'WooCommerce' ) ? array( 'woocommerce-layout', 'woocommerce-smallscreen', 'woocommerce-general' ) : array();
    wp_enqueue_style( 'global-style', get_stylesheet_directory_uri() . '/css/global.css' , $deps, '1.0' );
}

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Author Frank Goossens
(@futtta)

9 years, 4 months ago
well, AO happens after the queue is read and the styles are printed, but you can use AO’s API to change the injection point like this;
```
add_filter('autoptimize_filter_css_replacetag','override_css_replacetag',10,1);
function override_css_replacetag($replacetag) {
	return array("<head>","after");
	}
```
And the 2nd argument in the array can be “before”, “after” or “replace”.

Hope this helps,
frank
Thread Starter jezthomp
(@jezthomp)

9 years, 4 months ago

Thankyou.

I tried adding your code and got the following error, do i need to put it anywhere specific?

<link type="text/css" media="all" href=“site-bit.com/wp-content/cache/autoptimize/css/autoptimize_4a23bc6078aa709859e90f1dfcb22a91.css" rel="stylesheet" />

Plugin Author Frank Goossens
(@futtta)

9 years, 4 months ago

hmmm .. should work if your theme outputs a <head>-tag in the HTML (unless there’s another plugin messing with the output buffer).

can you share the URL of your site?

Thread Starter jezthomp
(@jezthomp)

9 years, 4 months ago

I’m afraid not as its in development.

The html prints out a header tag and that warning appears at the bottom in the source?

Plugin Author Frank Goossens
(@futtta)

9 years, 4 months ago

well, normally AO gets the entire HTML and it tries to find the tag that it got a injection-point (<title> by default for CSS) in that HTML to inject the code (“before” for CSS).

so if:
* your HTML does not contain the tag
* AO does not get the entire HTML due to output buffer manipulations by other plugins

then you would get that error.

what you could do:
* disable the code snippet and see if the CSS is injected before the title
* double-check if the tag you pass in the snippet is in the HTML and if that is the case
* disable other plugins to see if any of them is messing with the output buffer
* or alternatively try with other tags

if you copy/ paste the HTML of the page where you get that warning into a pastebin past or a github gist and if you link to it here, I’ll be happy to have a look.

frank

Thread Starter jezthomp
(@jezthomp)

9 years, 4 months ago

Thank you, thats very kind.

A pastebin of the html here, with the url edited..

http://pastebin.com/GSivu2sG

Thanks again 🙂

Plugin Author Frank Goossens
(@futtta)

9 years, 4 months ago

ok, you have
<head itemscope="itemscope" itemtype="http://schema.org/WebSite">

so <head> does not match which explains the warning 🙂

Now as you want the CSS to be injected after the woocommerce one, which is a lot later then <head>, I would use </head> instead (with “before”)?

frank

Thread Starter jezthomp
(@jezthomp)

9 years, 4 months ago

Perfect thank you so much 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Enqueue Optimised CSS after WooCommerce CSS?’ is closed to new replies.

Tags