Skip Navigation

[Resolved] Woocommerce Archive Page JavaScript

This thread is resolved. Here is a description of the problem and solution.

Problem:
The issue here was that the user had some custom javascript that he wanted to add to his Archive pages.

Solution:

To add custom javascript to your Custom Archive or Views all you need to do is to edit that view and then go to the JS editor on that view and just add the Javascript there.

This support ticket is created 6 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 17 replies, has 2 voices.

Last updated by dmitryK-2 6 years, 10 months ago.

Assisted by: Shane.

Author
Posts
#606865
screen2.jpg
screen1.jpg

I am trying to: add menu effect by js inserted in header of theme (Divi child theme). It works great all over the site (including the Woocommerce check out pages) but not at the shop pages where Toolset Woocommerce views + Views are handle the page template. Can you please help. It's all good at the home page or any other page on scroll except Shop page (or any product category page archive).

Link to a page where the issue can be seen: hidden link

I expected to see: same effect on pages handled by Toolset Views (or Toolset Woocommerce views)

JS code goes here:
<script>
(function($) {
$(window).on(‘scroll’, function() {
if(jQuery(‘#main-header’).hasClass(“et-fixed-header”)) {
jQuery(‘#logo’).attr(‘src’,’/wp-content/uploads/2017/08/DNK_Logo-Sign-H150px.png’);
}
else {
jQuery(‘#logo’).attr(‘src’,’/wp-content/uploads/2017/08/DNK_Logo-15-h90px.png’);
}
});
})( jQuery );
</script>

Also there is css for it (lines 8-41) but they just add effects, so I won't mention it here.

Right now it been inserted in:
Divi header - screen1 - NO LUCK, works everywhere except Shop
Toolset Layouts - #48620 WC-Shop-Layout (which leads to Toolset WordPress Archive WC-Shop #48621) - still NO LUCK
Also added to child-theme functions.php via enque - NO LUCK Screen2

function mojowil1_scripts() {
    wp_register_script( 'header-logo', get_template_directory_uri() . '/js/header-logo.js', array( 'jquery' ), '2.2.1', false );
	wp_enqueue_script( 'header-logo' );
}
 
add_action( 'wp_enqueue_scripts', 'mojowil1_scripts' );

Can you please help to find the right place or solution to insert this code. Thank you!

#606894

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dmitry,

Thank you for contacting our support forum.

The issue here might that you added the <script> tags in the JS editor.

In the JS editor you don't need to add these tags 🙂

Please let me know if this helps.
Thanks,
Shane

#606896

Checked w/o <script>
No luck. Need to be investigated more.

#606909

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dmitry,

Would you mind providing me with admin access to the website so that I can check on this further for you ?

The private fields have been enabled.

Thanks,
Shane

#607213

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dmitry,

If i'm correct then the code should keep the header fixed when scroll correct?

Please let me know.
Thanks,
Shane

#607727

Well it should react exactly the same as in Home page (on scroll move to top of page and change to alt logo to left). That is what code provides on all other pages.

#607773

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dmitry,

All this code here does is switch the logo .

(function($) {
$(window).on("scroll", function() {
if(jQuery("#main-header").hasClass("et-fixed-header")) {
jQuery("#logo").attr("src","/wp-content/uploads/2017/08/DNK_Logo-Sign-H150px.png");
}
else {
jQuery("#logo").attr("src","/wp-content/uploads/2017/08/DNK_Logo-15-h90px.png");
}
});
})( jQuery );

It actually doesn't do anything else. Could you let me know where the code that is responsible for the header scroll?

Thanks,
Shane

#607774
2018-01-18_22-47-18.jpg

Dear Shane, please find a short update of my findings

For some reasons , ALL woocommerce pages been created via Views (Woocommerce views) didn't have "et-animated-content" class ( please see screen 1) when I began to scroll page, and that stops CSS/JS from change logo/menu position.

That is why page css structure is different on Home page (left) and Shop page (right) - after scroll and I can't get "et-fixed-header" class in Shop / Product pages.

Can you please fix this?

#607782

Yep, and here goes CSS

<CSS>
/*****top-menu fixes*****/
.logo_container {margin-top: 0.5em;margin-bottom: 1em;}
/*hide top menu on scroll no blink*/
.et_fixed_nav #top-header { position: absolute !important; } .et-fixed-header {top: 0px!important;}

/*switch logo on scroll*/
/*********************************
change logo for fixed header - quick and easy way and fix for WC pages
**********************************/
.et-fixed-header #logo {
content: url(hidden link);
}

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/

.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 25%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 75%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}</CSS>

#607783

so imho all Woocommerce pages do nothing with menu because "et-animated-content" class is missing ( "et-animated-content" class creates "et-fixed-header" on other pages)

#608011

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dmitry,

This scroll functionality is it a part of the theme ?

I'm trying to find the js that adds the class on scroll.

If its a functionality of the theme then the divi team should be able to let us know where the javascript is and then we can just add that code to our JS editor.

Could you contact them as well.

Please let me know.
Thanks,
Shane

#608012

Yep! Thanks!

#608032

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

I was also trying to add the classes using JS.

For the most part it works but I'm still trying to figure out how to remove the class when it's scrolled to the top again.

If I'm able to i'll keep you posted as well.

#608033

Great! Cheers, I've posted message for thier support, I'll return in case fast reply!

#608048

While we are waiting - hidden link