How to add the DISQUS comment system to WP E-Commerce

Category: Tech Tips and Tutorials ( written by bignotch on Monday, June 13th, 2011 at 1:42 pm )

 

 

I’ve been using the WP E-Commerce system for WordPress for YEARS and I thinks it’s a very useful tool for small businesses, but it also needs to be tweaked and modified to be completely useful. I hated the default comment system that came with the plug-in and wanted to use the popular disqus system since it supports a many ways of logging in and has many parameters. I couldn’t find much help on ways to implement the system, so after a few hours of trial and error, I have finally figured out how to get the disqus comment system working with WP-Ecommerce.

 

1.) Create a Disqus Account and add your website to the account.

disqusreg.jpg

2.) After you finish registering and setting up the account, navigate over the the Install Tab and Select the “Universal Code” and Copy the ‘Embed Code’ that the disqus site gives you.

InstallTab.jpg

3.) Next, you will need to edit the Header.php file of your current wordpress theme that is in use. (wp-content/themes/yourcurrenttheme/header.php)

phpheader.jpg

 

4.) Open the php file with Dreamweaver or a Text Editor to modify the code.

 

5.) Use Insert the portion of the Embed Code that is highlighted in red and insert it just above the closing </head> tag.

embedcode.jpgheadercode.jpg

6.) Next its time to place the the remaining small portion of code(highlighted in blue) inside of the WP E-commerce plug-ins. Make sure you have moved your WPEC theme files over to the uploads folder. The path should be something like ( wp-content/uploads/wpsc/theme/your_current_theme) If they are not there, you can move them in the setting panel in under your WP E-commerce tab in the WordPress Dashboard.

 

7.)In your theme folder. (i’m using a heavily modified iShop theme) you should see a file named single_product.php  or wpsc-single_product.php. Open it with a text editor to start editing.

themefolder.jpg

 

8.) Look for the Shopping Cart Symbol php method. It should be right around line 176. Once you find it insert the portion of code highlighted in blue “<div id=”disqus_thread”></div>” directly under it.

embedcode.jpg

So it Should look something like this.

singproduct.jpg

 

After that, you should see the disqus comment box DIRECTLY under your Add To Cart function on your Single Products page.singleProductPage.jpg

 

9.) Next we’re going to create a View Comments link to link to the Single product page on the main product page, you’ll need to open the products page php (highlighted in blue) file in your theme folder. And get your text editor ready for editing.

themefolder2.jpg

10.) You’ll need to call the permalink function and link it to text (or an Image if you want), so that it links to the single product and it’s comments. With your products_page, look for the “Add to Cart” function. It should be around line 195.  Then add this line of code:

<a href=’<?php echo wpsc_the_the_product_permalink(); ?’> Your Text Link Here </a>

Of Course you would replace the “Your Text Link Here” part with whatever you desire. I personally created a custom .png buttondisqusbutton.png, then I wrapped the code in a div so I could position the button in the theme css file. So Here is what my code looks like.

lastCode.jpg

So, now my product list in my store looks like this.

storefront.jpg

 

This is just my way of doing it and it may not be the best. There is a way to get the Comment Count to show also, but I didn’t have time to implement it. If anybody has an alternative way of doing this or a better method, please leave a comment.

Powered By DT Author Box

Written by bignotch

bignotch

My name is Joshua Howard. I’m a Web Developer, a Musician, and a Blogger from New Orleans. I enjoy sunset, long walks on the beach, and tons of nerdy stuff. I hope you find this article useful.

25 Comments »
  • Anonymous

    hi

  • shadybaloch

    hi

  • http://www.tissotwatchshop.com/ Tissot watches Sale

    This is a serious issue that merits thoughtful, serious response. Thank you.

  • http://www.tissotwatchshop.com/ Tissot watches Sale

    This is a serious issue that merits thoughtful, serious response. Thank you.

  • prakash

    hey dude, that’s really great post. and that’s you in banner image?

  • prakash

    hey dude, that’s really great post. and that’s you in banner image?

  • http://www.mycanadagooseparka.com/ Canada Goose Parka

    This is a really good read for me, Must admit that you are one of the best bloggers I ever saw.Thanks for posting this informative article.

  • http://www.mycanadagooseparka.com/ Canada Goose Parka

    This is a really good read for me, Must admit that you are one of the best bloggers I ever saw.Thanks for posting this informative article.

  • http://www.omegawatchshop.com/ Omega Watches

    Thank you for the good writeup. It in fact was a amusement account it,Look advanced to far added agreeable from you! By the way, how could we communicate?

  • http://www.omegawatchshop.com/ Omega Watches

    Thank you for the good writeup. It in fact was a amusement account it,Look advanced to far added agreeable from you! By the way, how could we communicate?

  • http://www.omegawatchshop.com/ Omega Watches

    Thank you for the good writeup. It in fact was a amusement account it,Look advanced to far added agreeable from you! By the way, how could we communicate?

  • http://www.omegawatchshop.com/ Omega Watches

    Thank you for the good writeup. It in fact was a amusement account it,Look advanced to far added agreeable from you! By the way, how could we communicate?

  • http://exchangesocial.net/ exchangesocial

    Thank you on nice post. ;)

    • http://health-club.org/ Health Information

      Thank you :)

  • http://exchangesocial.net/ exchangesocial

    Thank you on nice post. ;)

  • http://koli-za-skrap.com/ Koli za skrap

    Thank you :)

  • 1tshammert1me

    Nice one, cheers.

  • 1tshammert1me

    Nice one, cheers.

  • http://www.mymobitricks.com/ Virtual-Knight

    Disqus is really a great comment widget.. I always wanted to add it into my blog.. but I didn’t know how. And bro for your post.. Now I will add disqus. :)

  • http://www.mymobitricks.com/ Virtual-Knight

    Disqus is really a great comment widget.. I always wanted to add it into my blog.. but I didn’t know how. And bro for your post.. Now I will add disqus. :)

  • http://terrypasencio.blog.com/2012/05/18/leave-9-to-5-job-and-start-your-own-web-store/ Webmeester.eu

    Thanks for sharing .Your post is very informative  and very useful .

  • http://terrypasencio.blog.com/2012/05/18/leave-9-to-5-job-and-start-your-own-web-store/ Webmeester.eu

    Thanks for sharing .Your post is very informative  and very useful .

  • http://www.integrationworksinc.com/ Small business IT support Crys

    Thank you.Its really good read for me, Must admit that you are one of the best
    bloggers I ever saw.Thanks for posting this informative article.

  • http://www.healthinformationtips.net/ health insurance

    A lot of information are showing here. Thanks for sharing with us.

  • http://www.biztechconsultancy.com/magento-development.htm Magento Development

    I like a way you explain all the stuffs here. Such a fantastic post it is. Thanks a lot for sharing it here and aware all of us from it.