Override Plugin function - wordpress

Question

I am using the WP Jobs Plugin with the add-on WP Jobs Application Deadline and there is a function that I need to change:
public function display_the_deadline() {
global $post;
$deadline = get_post_meta( $post->ID, '_application_deadline', true );
$expiring = false;
$expired = false;
$date_str = null;
if ( $deadline ) {
$expiring_days = apply_filters( 'job_manager_application_deadline_expiring_days', 2 );
$expiring = ( floor( ( current_time( 'timestamp' ) - strtotime( $deadline ) ) / ( 60 * 60 * 24 ) ) >= -$expiring_days );
$expired = ( floor( ( current_time( 'timestamp' ) - strtotime( $deadline ) ) / ( 60 * 60 * 24 ) ) >= 0 );
$date_str = date_i18n( $this->get_date_format(), strtotime( $deadline ) );
}
// Do not display anything if listing is already expired.
if ( is_singular( 'job_listing' ) && $expired ) {
return;
}
$timestamp = strtotime( $deadline );
/**
* Filters the display string for the application closing date.
*
* #since 1.2.1
*
* #param string $date_str The default date string to be displayed.
* #param string $timestamp The timestamp of the closing date.
*/
$date_str = apply_filters( 'job_manager_application_deadline_closing_date_display', $date_str, $timestamp );
if ( $date_str ) {
echo '<li class="application-deadline ' . ( $expiring ? 'expiring' : '' ) . ' ' . ( $expired ? 'expired' : '' ) . '"><label>' . ( $expired ? __( 'Closed', 'wp-job-manager-application-deadline' ) : __( 'Closes', 'wp-job-manager-application-deadline' ) ) . ':</label> ' . $date_str . '</li>';
}
}
In the section that echo's the "li class="application-deadline..." I need to change Closes: to Deadline: and am wondering if it is possible to override this function in my functions.php file. I tried to replace it using Jquery but that didn't work.

Answer 1

Unfortunately there's not a great way to filter existing functions in plugins unless they're designed that way - and it doesn't appear this one is set up to allow that.
Using JavaScript should absolutely work. Since your HTML output is something like:
<li class="application-deadline expiring"><label>Closes:</label> Sept 4th, 2018</li>
You should be able to select the element fairly easily. Take a look at this vanilla JS snippet:
let deadlines = document.querySelectorAll('.application-deadline');
for( i = 0, n = deadlines.length; i < n; ++i ){
deadlines[i].innerText = deadlines[i].innerText.replace('Closes:', 'Deadline:');
}
<li class="application-deadline expiring"><label>Closes:</label> Sept 4th, 2018</li>
Or if you so-desire, a jQuery version:
jQuery(document).ready(function($){
$('.application-deadline').each(function(){
$(this).text( $(this).text().replace('Closes:', 'Deadline:') );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="application-deadline expiring"><label>Closes:</label> Sept 4th, 2018</li>
Edit: It appears your content is loaded in dynamically with Ajax. You could attempt to use $.ajaxComplete to handle the code:
jQuery(document).ajaxComplete( function( event, request, settings){
$('.application-deadline').each(function(){
$(this).text( $(this).text().replace('Closes:', 'Deadline:') );
});
});
Alternatively you can abuse CSS pseudo-elements to manipulate the text:
.job_listing-location.job-end label {
font-size: 0;
}
.job_listing-location.job-end label:before {
content: "Deadline:";
font-size: 16px;
}