(batches issue) take this course button loading issue with js code

[EduMEE2]

when single course page loaded then the take this course button loads after sometime. my custom code does not work because take this course button is loading by react codes: http://somup.com/cr6UDv3GD6 what i need is- "if there is batches in the course and user is not enrolled in any of batch then the take this course button should be hidden." my code-

add_action('wp_footer',function(){
if(is_singular('course') || is_singular('course-layout')){
?>
<script>
jQuery(document).load(function($){
let enrollNowButton = document.querySelector(".single-course .wplms_batches_wrapper.block a.enrol_in_batch.button.is-primary.small");
let takeThisCourse = document.querySelector(".single-course div#take-this-course-button-wrapper a.course_button.button.full");
if(enrollNowButton && enrollNowButton.innerText == 'ENROLL NOW' && takeThisCourse && takeThisCourse.innerText.includes("Take this course") && document.querySelector("body").classList.contains("logged-in")){
takeThisCourse.style.display="none";
jQuery('.single-course .course_pricing>strong').append("<a href='#batches-area' id='append-batches-button'>Click the Enroll Now button to subscribe in this course.</a>");}
});
</script>
<?php
}
},9999);

[MrVibe]

Ideally, you can simply paste a small CSS code in single course page to hide the Take this course button. I am converting your jquery code into native js code. We execute your code when the user logs into WPLMS as WPLMS is a session less cookie less login system. document.addEventListener('userLoaded',function(){ let enrollNowButton = document.querySelector(".single-course .wplms_batches_wrapper.block a.enrol_in_batch.button.is-primary.small"); let takeThisCourse = document.querySelector(".single-course div#take-this-course-button-wrapper a.course_button.button.full"); if(enrollNowButton && enrollNowButton.innerText == 'ENROLL NOW' && takeThisCourse && takeThisCourse.innerText.includes("Take this course") && document.querySelector("body").classList.contains("logged-in")){ takeThisCourse.style.display="none"; let aTag = document.createElement('a'); aTag.setAttribute('href','#batches-area'); aTag.setAttribute('href','append-batches-button'); aTag.innerHTML = 'Click the Enroll Now button to subscribe in this course.'; document.querySelector('.single-course .course_pricing>strong').appendChild(aTag); } });

[MrVibe]

Another alternate is to create another Course layout for Batches and Assign that course layout to the courses which have batches. In that layout do not add the course button.

[EduMEE2]

This reply has been marked as private.

[MrVibe]

Did you try adding the above code, replacing your javascript code with the above ? 1. currently you can apply a course layout on a category of courses as well. 2. replace the one you added. 3. turning opacity zero, the enroll button in batch will trigger click on the course button. --- "my code checks if user is logged in" For that you were using wrong Event in javascript, the code i shared uses the correct event userLoaded.

[Author]

Posts