Add script to Woocommerce

I changed the code to because zoom is depreciated:

        $("#content").scroll(function () {
        if ($(this).scrollTop() > 20) {
            $('#header').addClass('small');
        } else {
            $('#header').removeClass('small');
        }
    });

Still works peachy in Styler Chrome extension.  I tried wrapping in a function and putting it in functions.php:

function load_script_to_shrink_header(){
?>
<script>
$(document).ready(function() {
$(“#content”).scroll(function () {
if ($(this).scrollTop() > 20) {
$(‘#header’).addClass(‘small’);
} else {
$(‘#header’).removeClass(‘small’);
}
});
});
</script>
<?php
}
add_action( ‘wp_footer’, ‘load_script_to_shrink_header’ );`

`nadda

Still hunting for a solution.

Trying to keep body fixed so body background images looks pretty and scroll content while shrinking header.

So, the code I used is at the bottom. The key was to give #header a width in CSS (eg. 100vw).

for .small I set zoom to .65. Works great because shrinking with zoom has added benefit of moving logo to left so, once user starts scrollin logo moves left. Hope this helps someone.

`<script>
jQuery(document).ready(function($) {
$(“#content”).scroll(function () {
if ($(“#content”).scrollTop() > 10) {
$(‘#header’).addClass(‘small’);
}
else{
$(‘#header’).removeClass(‘small’);
}
});
});
</script>

Hi @akmiecik,

This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

I hope this helps!

Hey @akmiecik,

It looks like you were able to get this sorted out. WordPress loads jQuery with jQuery instead of $ assigned to it. Switching that in your snippet appears to have made a difference for you.

If you do need anything, please open up a new thread and we’d be happy to help you out.

Stay safe!