With WordPress you ordinarily don’t have to do much extra coding, there are so many plugins that are helpful for that. But sometimes you just have to roll up your sleeves and bite the bullet. And sometimes you can do it with just CSS but when that fails you absolutely have to use jQuery. This is one of those times.
A client wanted to turn off shipping methods for a particular product. I use shopp for my carts, and the product was a fresh turkey for the holidays. People who order this product should get free shipping, and just this product. If other products show up, they would get a shipping fee for those products.
But the client did not want the shipping methods showing up, to control the shipping themselves.
Even though in the admin section of the cart you can create free shipping using categories and discounts, the shipping options still showed up. So the idea here is to display:none for the shipping methods, when that particular product was on the page.
Using FireBug in FireFox you can see the html/css for that page – when the product is loaded in the cart:
So the idea here is to use jQuery to find on the page that unique https path, and then invoke the css rule for the right identifier. One way is to gather all the hrefs into a collection, and examine each one and find an exact match. Here is the code in its entirety.
jQuery(document).ready(function(){
jQuery(‘a[href^=”https://”]’).each(function(){
var extlink = jQuery(this).attr(‘href’);
if ( extlink == “https://williebird.com/shop/fresh-turkey/”){
jQuery(‘#shipping-methods’).css(“display”, “none”);
jQuery(‘#shipping-methods’).after(“<p><em><strong>Free Shipping for the Fresh Turkey</strong></em></p>”);
return false;
}
})
});
What this code is doing is collecting all the hrefs, and going through each one to look for an exact match, and when it finds it sets the proper id to display none, then exits the loop ( return false).
To get the code into wordpress requires enqueueing the script so in order to do that the functions.php had to have the script registered and enqueued like so:
function turnoffshippingmethods() {
wp_register_script (‘turnoffshippingmethods’, get_stylesheet_directory_uri() . ‘/js/turnoffshippingmethods.js’,
array(‘jquery’));
wp_enqueue_script(‘turnoffshippingmethods’);
}
add_action ( ‘wp_enqueue_scripts’, ‘turnoffshippingmethods’);
I had created a subdirectory off the child theme and placed the previous code in that folder. Note the use of jQuery instead of dollar signs – that is the no conflict admonition to jQuery, so previous entries would not conflict. The little piece of code added some text to replace the part that was now gone, to give another message to the shopper.
I hope this little piece helps you in your own jQuery coding problem solving!
