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!
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");
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:
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!