I am customizing the front end of Woocommerce, so I'd like to add the text "/ Per Month" after my final price before the user clicks the Add to Cart Button.
I have tried through javascript
jQuery('.woocommerce-variation-price').append(" / month")
but while it works when I run it from the console it fails when I run it through a file in the template. I can still the code when I check the page code but it does nothing.
I was thinking maybe I could achieve this through a WordPress hook.
I have inserted this in functions.php
add_filter( 'the_content', 'permonth_filter' );
function permonth_filter ( $content ) {
if ( is_single() ) {
$content .= '<div class="permonth-filter"> / Per Month </div>' . "
";
} // End IF Statement
return $content;
} // End wpcandy_filterhook_signoff()
That adds some text at the end of a blog post.
Is there a way to add some text after a specific div with a specific class? woocommerce-variation-price
Make sure that you are running your JavaScript after the page has loaded.
jQuery( document ).ready(function($) {
// Run your code
$('.woocommerce-variation-price').append(" / month");
}); // end document ready
Related
Update #1: I've managed to get the page to refresh on click, but due to the delay in adding the additional product to the cart the billing fields aren't shown until a second refresh is done. So, simply refreshing the page on click is not a good solution.
Now, I'm thinking loading the whole checkout page via ajax might be a solution?
I'm not sure how to do this (or if it's even the best idea), so if anyone has a way to implement this or a better solution feel free to share.
Update #2: Here is a loom video that shows the problem in real time.
https://www.loom.com/share/8e49e8663f1c4599a306c9c9948636b2
When my mouse goes off-screen at 0:15 I'm refreshing the page.
---- Original Post ----
My checkout page is not adding the proper billing fields after an order bump is applied to the cart (via the checkbox to add an additional product to the order). This is causing customers to be charged but no order is generated on my side. This is because the cart refreshes via ajax, while the rest of the checkout page does not.
To replicate the error, add a free product to your cart from this page:
https://blacklotusaudio.com/free-downloads/
Then, skip the popup offer and head to checkout and click to add the additional product to your order via the order bump checkbox. You'll notice the billing fields stay the same unless you refresh the page, which is what I believe is causing the issue here.
So, my solution is to refresh the page every time the order bump is clicked, I'm just not 100% certain how best to do it.
I've tried adding a modified version of this code to the page, but I cannot correctly identify the right element(s) to target as there is no "button" on the order bump to select.
<button type="button" onClick="refreshPage()">Close</button>
<script>
function refreshPage(){
window.location.reload();
}
</script>
Any help in resolving this issue would be much appreciated. I'm sure there is a better way of solving this problem than refreshing the page, but right now that's the best I can come up with.
Edit - Here's what I'm using to make the free downloads work:
function sv_free_checkout_fields() {
// first, bail if WC isn't active since we're hooked into a general WP hook
if ( ! function_exists( 'WC' ) ) {
return;
}
// bail if the cart needs payment, we don't want to do anything
if ( WC()->cart && WC()->cart->needs_payment() ) {
return;
}
// now continue only if we're at checkout
// is_checkout() was broken as of WC 3.2 in ajax context, double-check for is_ajax
// I would check WOOCOMMERCE_CHECKOUT but testing shows it's not set reliably
if ( function_exists( 'is_checkout' ) && ( is_checkout() || is_ajax() ) ) {
add_filter( 'woocommerce_order_button_text', 'woo_custom_order_button_text' );
function woo_custom_order_button_text() {
return __( 'SEND MY DOWNLOADS', 'woocommerce' );
}
add_filter( 'woocommerce_checkout_fields', 'misha_email_first' );
function misha_email_first( $checkout_fields ) {
$checkout_fields['billing']['billing_email']['priority'] = 4;
return $checkout_fields;
}
add_filter('woocommerce_mailchimp_woocommerce_newsletter_default_checked', function ($checked) {
return true;
});
// remove coupon forms since why would you want a coupon for a free cart??
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
// Remove the "Additional Info" order notes
add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );
// Unset the fields we don't want in a free checkout
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
// add or remove billing fields you do not want
// fields: http://docs.woothemes.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/#section-2
$billing_keys = array(
'billing_last_name',
'billing_company',
'billing_phone',
'billing_address_1',
'billing_address_2',
'billing_city',
'billing_postcode',
'billing_country',
'billing_state',
);
// unset each of those unwanted fields
foreach( $billing_keys as $key ) {
unset( $fields['billing'][ $key ] );
}
return $fields;
} );
}
}
add_action( 'wp', 'sv_free_checkout_fields' );
I'm trying to have a click event fire on any tag with the same class only once.
I tried using '.one', although, it removes itself after the first class tag is clicked.
$(document).ready(function() {
$(".dropdown").one('click', function() {
...
});
});
The code is bought in from another .php file on the same directory with some server information so there are multiple (no end) in the number of tags with the same class.
<div class = \"dropdown\" id=" . $row["name"] . "dropdown" . ">
<div>". $row["email"] . "</div>
<div>name:" . $row["name"] ."</div>
<div>". $row["email"] ."</div></div>
";
Any recommendations?
As per your comments what you actually needs to do is apply a check of text available already or not?
$(document).ready(function() {
$(".dropdown").on('click', function() {
if(empty($('<text wrapper class or id>').text())){
// add code to bring the info
}
//rest other code.
});
});
Note : I fyou can show your code HTML then I can Update my code to give you concreete answer. The above will guide you how to proceed.
I'm trying to create a simple WordPress plugin for the TinyMCE editor that adds a button to the editor bar, that when you click on this it inserts an image into the content, and I want this image to be clickable by the person reading the published and run some JavaScript when this occurs (basically just to open a new window with some specific sizing).
The problem I have is that TinyMCE strips the onClick event I add to the image hyperlink, so it doesn't work. I understand one way to fix this is to change the valid_elements section for TinyMCE, but this would involve anyone installing the plugin having to go and make those changes manually. Is there anyway to be able to run some JS when the image is clicked by the reader solely in my plugin?
Should be a matter of extending TinyMCE valid elements inside your own plugin. Here an example adding the image tag with all properties enabled:
add_filter( 'tiny_mce_before_init', function ( $init ) {
$img = 'img[*]';
if ( isset( $init['extended_valid_elements'] ) ) {
$init['extended_valid_elements'] .= ',' . $img;
} else {
$init['extended_valid_elements'] = $img;
}
return $init;
});
I used the following when creating the TinyMCE button to insert a clickable <img> element into the post content:
ed.addButton( 'test_button', {
title : 'Insert clickable image',
image : '../wp-includes/images/smilies/icon_eek.gif',
onclick : function() {
ed.selection.setContent( '<img src="http://example.com/test.gif" onclick="alert()" />' );
}
});
I want to apply a plugin on a certain table that is being generated dynamically through a php script. This is the plugin : CLICK
Now from what i read in the comments i should You first need some form of server side component, say a PHP script, which generates the html table from the data in the database. Then pass the URL of this PHP script into a jQuery ajax call. In the "success" callback, set the innerHTML of some holding div to the response of the ajax call, then select this newly created DOM table element and put it into the plugin.
Hope that makes sense!
Here's what i got so far.
HTML
<div class="testin">
<script>
testin();
</script>
</div>
JS
function testin(){
var load = $.get('functions.php',{gameNo:"1",function:"testin"});
$(".testin").html('Refreshing');
load.error(function() {
console.log("Mlkia kaneis");
$(".testin").html('failed to load');
// do something here if request failed
});
load.success(function( res ) {
console.log( "Success" );
$(".testin").html(res);
});
load.done(function() {
console.log( "Completed" );
});
}
php
if($_GET['function']=="testin")
{
echo '<table class="template" style="display:none"><thead><tr><th>Game Name</th><th>Round</th><th>Player Name</th><th>Target Name</th><th>Shot Number Now</th><th>Shot Score So Far</th><th>Rank</th></tr></thead><tbody></tbody></table>';
$gamenumber = $_GET['gameNo'];
echo'<table border="1" class="actualTable"><tr><th>Game Name</th><th>Round</th><th>Player Name</th><th>Target Name</th><th>Shot Number Now</th><th>Shot Score So Far</th><th>Rank</th></tr>';
$sql = mysql_query("SELECT * FROM tbl_Round WHERE match_id='$gamenumber' ORDER BY round_name")
or die(mysql_error());
$i=1;
while($row = mysql_fetch_array($sql))
{
$tempSnumber = getcurrentshot($row['round_id'],$row['player_id']);
echo'<tr>';
echo'<td>'.$gamenumber.'</td>';
echo'<td>'.$row['round_name'].'</td>';
echo'<td>'.$row['player_id'].'</td>';
echo'<td>'.$row['target_name'].'</td>';
echo'<td>'.$tempSnumber.'</td>';
echo'<td>'.$row['round_score'].'</td>';
echo'<td>'.$i.'</td>';
echo'</tr>';
$i++;
}
echo'</table>';
}
The function fills the div just fine. I also create the template table in the php script.
Now my problem is how to invoke the plugin and what should i pass ass objects?
Invocation is like $(oldTableElement).rankingTableUpdate(newTableElement) but i'm confused due to the fact that it's being generated dynamically.
I'm new to JS so any help would be appreciated.
First off, I would put your javascript outside the div with class "testin".
Below you JS function you can add the jquery call like in the code below.
See this link for more info: http://api.jquery.com/on/
$(document).ready(function(){
$("table tr").on( "click", function() {
//your custom code goes here.
});
});
What this does is make sure then any element that matches the "table tr" will get an click handler, no matter when it gets created.
Within a self-hosted WordPress blog post, I'm trying to share a Youtube video, and then have links also within that post that tell the player to jump to specific times. WordPress strips JavaScript from links, which would be the easy way to control the player. Such as:
1:00
YouTube JavaScript reference
https://developers.google.com/youtube/js_api_reference
Is there a simple plugin that enables this? Is there some specific way for me to format JavaScript so that it will not be stripped from a blog post?
Further example use...
[myvideo]
Link to 1:11
Link to 2:22
Link to 5:55
Not sure if this is too simplistic a method, but since Youtube allows links like: http://youtu.be/g_FEVa75H8g?t=2m36s
would it not be easier just to link the times manually?
e.g. Link to 1:11 would be http://youtu.be/g_FEVa75H8g?t=1m11s
You're missing the other API reference: Shortcode API, just like the [myvideo] you're already using.
It would be like [videolinks times="60,150,230" showtimes="1m,2m30s,3m50s"].
And the shortcode code:
add_shortcode( 'videolinks', 'my_shortcode_handler' );
function my_shortcode_handler( $atts, $content = null )
{
$output = '';
$count = 0;
$times = explode( ',', $atts['times'] );
$showtimes = explode( ',', $atts['showtimes'] );
foreach( $times as $time )
{
$output .= sprintf(
'Link to %s<br />',
$time,
$showtime[$count]
);
$count++;
}
return $output;
}