Customizing a Product Page for WooCommerce

WooCommerce by WooThemes is a great plugin for running an ecommerce site. I use it in this site! But, sometimes you need to make modifications to just one product page. This can be true for any site. How to make one page architecturally different from the other pages? It is a lot of work to make a special page type and mark that page to use it. Well, we can us Script Manager to make easy and quick modifications. Here’s how!

When I created the WebAPI plugin from my tutorial on Making Your Own WebAPI, I decided that that plugin should be free. I also wanted to list it on my website and on WordPress Plugins site. The problem being, the WooCommerce plugin does not allow for that type of customization, unless I wanted to make my own gateway. So, I decided to perform some simple DOM editing from JavaScript using Script Manager.

A typical product page looks like this:

I need to remove the stuff for putting the product in your cart and replace it with a link to where they can download the plugin. When we look at the DOM using Chrome’s inspector, we see the structure for this page here:

What we need to do is remove the HTML form element with class ‘.cart’ and replace it with a link to where to directly download the item. We can easily do this with the following code:

//
// We need to remove the form file with the class cart and place our link to the WordPress Plugin directory.
//
jQuery('form').remove('.cart');
jQuery('.product_meta').before("

Download at WordPress Plugin Repository for cct-webapi

");

So, create a JavaScript file called ‘FreeLink’ and put the above code in it. Now, paste this code into your product description using the CodeInsert shortcode. Your code should look like this:

[CodeInsert lang='JavaScript' name='FreeLink' param='']

Now, when you view the page, the normal cart HTML will be gone and a new link to where to download the software is there:

This works fine since the description for the product is after the HTML that we are trying to edit. Therefore, the DOM will be ready to do the edits as soon as it reaches the JavaScript. Otherwise, we can put the JavaScript in a function to be called when the document is fully loaded. It is that simple!

So, give it a try yourself. You can post how you used this feature in the forum for Script Manager! That way, more people can benefit from your experimentation!

comments powered by Disqus