Support » Plugin: Autoptimize » Enqueue Optimised CSS after WooCommerce CSS?

  • Resolved jezThomp

    (@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)

    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

    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" /><!--noptimize--><!-- Autoptimize found a problem with the HTML in your Theme, tag "head" missing --><!--/noptimize-->

    Plugin Author Frank Goossens

    (@futtta)

    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?

    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)

    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

    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)

    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

    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.