WordPress Shop Demo Using NextGen Gallery and WP Shopping Cart

This tutorial shows you how the WordPress Paypal shopping cart plugin is used in conjunction with the NextGen Gallery plugin to create an online store to sell your photos. Hit the ‘Add to Cart’ button to see how the shopping cart looks on the sidebar.

When you add an item to the cart the shopping cart will be shown below this line.

Please note that the secure delivery of the digital images after purchase is only available in the WordPress eStore Plugin and to know how to do this please watch the video tutorial on How to Turn Your WordPress Site into a Digital Photo Store and Sell Photos Securely.

How to Integrate NextGen Gallery and WordPress Paypal Shopping Cart Plugins

What Plugins do you need?

You will need the WordPress Paypal shopping cart v1.6 or above and NextGen Gallary Plugins. This guide assumes that you have used NextGen Gallery Plugin and know how to use it. If you don’t know how to use NextGen Gallery then I suggest you read the ‘Readme.txt’ file that comes with the NexGen Gallery plugin or try the NextGen Gallery forum

What NextGen Gallery Modification is needed?

We are going to use a custom template file for the NextGen gallery to display the shop:

  1. Download the WP eStore template file for NextGen Gallery from here.
  2. Unzip and upload the ‘gallery-wp-eStore.php’ file to the ‘view’ folder of the NextGen gallery plugin directory (nextgen-gallery/view/gallery-wp-eStore.php).

Displaying the Gallery

Use the following tag to display the Gallery in a post or page.

nextgen-gallery-template-tag

Given the gallery id is 1. Using the ‘template=wp-eStore’ option will show captions underneath each thumbnail image where you can display the ‘Add to Cart’ button and a little bit of other details/description of the image.

Adding the ‘Add to Cart’ Buttons below the Image Thumbnails

1. Go to ‘Manage Gallery’ from the NextGen Gallery settings menu and choose the Gallery that you want to turn into a shop. 2. Now in the ‘Alt & Title Text / Description’ field of every image enter the Image details (name, price etc) and the trigger text for the ‘Add to Cart’ button of that image. It should look similar to the following example:

nextgen_wp_paypal_cart_integration_desc_field

“<br />” is a HTML code to insert a line break so the name, price and the button doesn’t come in one line.

3. Do the same for all the images in the gallery.

4. Save the Changes to the Gallery and Now your Gallery will look similar to the demo shown at the start of this Page.

What Happens When You Upgrade the NextGen Gallery Plugin?

After you upgrade the NextGen Gallery, you need to put the WP eStore Template file back in the ‘view’ directory (nextgen-gallery/view) and all done.

This is because, when upgrading, WordPress completely deletes the folder of the plugin that is being upgraded then downloads the new version. So the previously uploaded WP eStore template file gets deleted in the process.

Visit the WordPress Shopping Cart plugin page to download the plugin or to leave comment.

You can also visit the post on How to Turn Your WordPress Site into a Digital Photo Store and Sell Photos Securely for more information.

Recommended post

You can have a look at the post on how to create amazing photo stores if you want to create a nice photo gallery without using nextgen gallery plugin.

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5.00 out of 5)
Loading ... Loading ...

196 thoughts on “WordPress Shop Demo Using NextGen Gallery and WP Shopping Cart

  1. Arteccentrix

    This is an excellent tutorial using two great plugins thank you.

    I have one issue and that is this – the two work together very well but is there any way to prevent the wp-cart code from showing when viewing images in the gallery? You can see what I mean by viewing any image in the gallery in my sidebar.

    Thanks.

    Reply
  2. Kevin

    I AM trying to add the code to image in the gallery Alt & Title Text for some reason cant work right now its acting as a pop view page when I click the buy now button on selected destination page what em I doing wrong thanks kevin

    Reply
  3. Jenny

    I have added the WP simple paypal cart to my website integrated with Nextgen Gallery and the Add to Cart Button is transparent – no colour. Is there a way to change this to a colour.

    Thanks

    Jenny

    Reply
  4. nycbone

    Viewable here [admin deleted the url]

    I have integrated WP Simple shopping cart with NextGen. When on that page, I “add to cart”… seems to work fine.

    ISSUES
    1) Sidebar widget has a double title when there is a product in the cart
    2) When I go to another page, the widget resets with nothing in the cart.

    Have I missed some documentation? Any suggestions would be helpful. Thanks for all your work!
    Look forward to getting the kinks figured out.
    db

    Reply
  5. Dan

    Hi,
    We’re big fans of your terrific plugin.
    We’re trying to use variations for size-we’re selling t-shirts.
    We’re using the WP Simple PayPal version 2 with NexGen plugin and e-store template.
    I can’t get the drop down’s to appear.
    Below is the trigger code we used.

    [wp_cart:Caique on a Branch T-shirt:price:18:var1[Size|Small|Medium|Large]:end]
    Can you help?

    Reply
  6. Steve C

    It looks like the latest version of NextGen Gallery (1.3.5) broke the WP eStore template file. Any thoughts on what might be causing the error?

    Reply
  7. admin Post author

    @nycbone, You can make the “Shopping Cart Title” field empty so the title doesn’t show. Regarding the shopping cart reset… it seems to be a PHP session issue.

    Reply
  8. admin Post author

    @Steve C, The template file is not broken. You need to upload the template file in the “view” directory after you upgrade the NextGen Gallery plugin as wordpress deletes all the files of the current installation during the upgrade.

    Reply
  9. Voltage

    Hi,
    This looks like a great plug-in, at least from the examples I’ve seen. Unfortunately I cannot get it to work. Initially I thought it was because of the theme but now I’ve changed at least 10 themes and even re-installed the whole WP. Any ideas on how to figure out what is wrong if nothing is working at all? I’m using the latest versions of Nextgen, Shopping Cart and WP. Maybe I need to downgrade from 2.8.4?

    Reply
  10. Voltage

    Ok, I downgraded to 2.7. Tried another bunch of themes. Not working. Nothing gets added to the shopping cart. Please help!

    Reply
  11. admin Post author

    @Voltage, You shouldn’t need to change the theme or change the wordpress version for this to work. Can you please explain what part is not working? “I cannot get this to work” doesn’t tell me much.

    Reply
  12. reid

    i was running the nextgen gallery and e-store for a while now and every thing was good..i just did the posted upgrade of the nextgen gallery now my images of items for sale is not showing.

    Instead this message appears:

    Rendering of template gallery-wp-eStore.php failed

    help please!

    Reply
  13. reid

    never mind i was able to fix it! upon upgrading the nextgen gallery i lost the WP estore template file just had to re-load it.

    Reply
  14. Donna

    I’ve just set up a test site, installed WP 2.8.4, installed the latest NextGen 1.3.6, installed the latest WP Shopping Cart 2.3 and the latest version of the template file from the link on this page. I’ve followed the instructions listed here to add the shopping cart code below the images, but it’s coming out above the image and breaking the NextGen code.

    The “Add to cart” button appears above the image followed by the code:
    ” class=”thickbox” rel=”farm-animals” >
    //end of code. The quotes are intact exactly as I’ve included them here.

    NextGen gallery was working fine before I activated the WP Shopping Cart plugin and added the template file. This is on my local development server, so sorry I don’t have a link to send to you by way of example.

    Reply
  15. admin Post author

    @Beni, Just had a quick look and it looks like you have a spelling mistake in the trigger text. You are using “up_cart” in the tag where it should be “wp_cart”

    Reply
  16. admin Post author

    @Coolpix, I am pretty sure it’s conflicting with some other plugin. I have heard this problem once but can’t remember the exact name of the plugin that was causing this.

    Reply
  17. admin Post author

    @Donna, Did you upload the template file to the “view” directory of the nextgen-gallery plugin and use this template file to display the gallery eg. [nggallery id=1 template=wp-eStore]

    Reply
  18. beni

    Hi ,Thanks for help ,but its just don’t work .i correct the spelling in trigger text ,and nothing …There is no button with “add to cart” please help :( (

    Please take a look to my trigger text again ….

    [admin deleted the url]

    Again i’m using wordpress 7.1 with NextGen 1.3.3 , i copy template to “view” directory of the next gen ,it see it ,and use it ,but no botton …. :( ( help again please…

    Reply
  19. Donna

    Yes that’s exactly what I did. Then in the NextGen gallery I put the following in the description field for 2 of the photos:

    Maya
    Price: $100
    [wp_cart:Maya:price:100:end]

    The button does appear, but as I posted above it breaks the NextGen code somehow so that part of the code also appears.

    Reply
  20. Donna

    Sorry, I submitted the previous comment then remembered this… although the Add to Cart button appears, it does not work either. Clicking the button goes to the full size image, not to the cart.

    Reply
  21. Coolpix

    @ADMIN, The problem is that the setup I have was working before the last update. Everything was working fine, I did not add anything to the site, no plug-ins, nothing else different from what was there before, but when I updated to the latest NextGen and the latest Shopping Cart, it broke almost everything, so I don’t think it’s conflicting with any other plugins.

    Reply
  22. beni

    beni said:
    Hi ,Thanks for help ,but its just don’t work .i correct the spelling in trigger text ,and nothing …There is no button with “add to cart” please help (

    Please take a look to my trigger text again ….

    [admin deleted the url]

    Again i’m using wordpress 7.1 with NextGen 1.3.3 , i copy template to “view” directory of the next gen ,it see it ,and use it ,but no botton …. ( help again please…

    Reply
  23. admin Post author

    @Coolpix, You need to put the eStore template file back in the view directory of the NextGen gallery plugin. Please read the “What Happens When You Upgrade the NextGen Gallery Plugin” section in the post.

    Reply
  24. Coolpix

    @Admin, that was the first thing I did. If you read my first post, you’ll see that I actually mentioned that the template file had to be reinstalled. If you take a look a my site, you see that what’s going on is something different, that I haven’t seen anyone reporting yet. What really bogs my mind is that everything worked fine before. Do I need to have a certain Worpress Version in order to make the new version of the WP shopping cart to work properly with NextGen? I created the website with WordPress 2.7.1, Atauhalpa template (older version, available the the WP templates/plugins site), NextGen 1.3.3 and WP Shopping Cart 2.2, and everything was fine. I updated to NextGen 1.3.6 and Shopping Cart 2.3, and it got broken, even after reinstalling the WP template on the View folder under NextGen folder on the server. I wonder if the problem is on the database, but I did not even went there yet to take a look, because I do not know what to remove, and I am afraid I can brake down the site completely. Here’s a page that have the items broken: [admin deleted the url]

    Reply
  25. troy

    I have a suggestion for above problem – make sure that the file name gallery-wp-eStore.php is spelelled correctly including “-” and “_” signs. Make sure not to forget to add correct template text in your gallery page [nggallery id=67 template=wp-eStore] and pay attention to letter capitalization (there should be “S” not “s”).

    Reply
  26. On the Curve

    Im new & trying to work this kick ass plug-in but like others the triggers arent working. All is up to date * instructions gave been followed. Ive read all the comments & replies on here too. Any new progress made on solving this issue?

    Reply
  27. daren

    hi, plugin is pure awesomeness.

    question, is it possible to specify a price for each variation and that would reflect perfectly in the cart?

    Reply
  28. anita harris

    Hi
    I notice the nextgen gallery at the top of this very page is NOT being displayed correctly , this SAME error happended to me too, and I RESOLVED this BY :
    1) specifying [nggallery id=n template=wp-eStore] on the page or post AND
    2) ensuring the wp-eStore.php template file is copied to the correct plugins folder for nextgen.. ie plugins/nextgen-gallery/view

    Hope this helps

    Reply
  29. Chris

    I am not sure what is causing my issue but I have exhausted all possibilities at this point and maybe you guys can help. Basically I am starting up a new online store and I have followed the install instructions here to a t. The Problem is when I click on the thumbnail, the thickbox load bar comes up, then just stays there. The image never loads. It also only does this in internet explorer. It does this on different versions of explorer and has the problem on any computer I bring up the store with in ie. All the other effects in nextgen to the same thing. I have even installed shadowbox independently of nextgen and it has the same problem. It seems none of these type of javascripts want to open all the way from my site in ie. They work great on other people’s sites and even in the admin area. Any suggestions would be greatly appreciated.

    Reply
  30. Sapna

    Hi,
    I downloaded the NEXT Gen and the Paypal plugins into my WP site and I tried to do exactly what is mentioned in this link … but when I add the code [wp_cart:photo1:10:end] and check the page.. I see the same code reflected instead of the addtocart button.. can you please tell me where I am going wrong.. I have uploaded the template file too…

    Awaiting for your help,
    Sapna

    Reply
  31. etiqi

    Hello!

    great, but something does not work in my website.

    When I type in description, doesn’t appears a line brake in the web, for example:

    aaaa eeee

    should appears

    aaaa
    eeee

    but appers like this:

    aaaa eeee

    What I have to do?

    I am using wordpress 2.9 and nextgen 1.4.3

    thanks!

    Reply
  32. Jackie

    Any way to have the ADD TO CART button go to a page where user can insert options like if they want a Print, Painting or Gift Card and what size they want of the one they choose? Also, each one has a different cost.

    Reply
  33. Jot

    Everything works for me except tha add to cart button appears to adjust to different sizes with each product I post. The shopping cart icons also increase in size to look distorted. Is there a place where I can correct this.

    Reply
  34. Choubacca

    Hey,

    I’m getting this error message. rendering of template gallery-wp-store.php failed.

    Any ideas on what I can do to fix it? thanks! :)

    Reply
  35. Choubacca

    AH! nevermind! I figured it out! I swear, it was because i had to rename the insert gallery code with an “S” instead of an “s”… GRRRRR coding!!!

    Reply
  36. barry

    almost there, gallery looks good…but when i click on the “add to cart” button, nothing happens…what am I missing here???

    Thanks in advance!

    Reply
  37. Greensnapper

    Should this plugin work with Next Gen smooth gallery? I get the message rendering of template gallery-wp-store.php failed.

    Reply
  38. janet

    i upload the WP estore template file to plugin there then it
    appear Unpacking the package.

    Installing the plugin.

    Destination folder already exists. [admin deleted the url]

    Plugin Install Failed.

    how to i delete this file that i error uploaded?

    Reply
  39. janet

    can i know where is the ‘view’ folder of the NextGen gallery plugin directory? i am new to wordpress.
    please reply asap, thxs !

    Reply
  40. Colm Doyle

    Hi I am having problems with using NextGen Gallery and the WP Shopping Cart plug in, I get the error “Rendering of template gallery-wp-estore.php failed” you can view my shop page here: [admin deleted the url] I have checked I have all the latest versions of the plug-in’s any help would be great.

    Thanks
    Colm

    Reply
  41. Colm Doyle

    edit: I found my problem was the same as ” Choubacca ”

    “it was because i had to rename the insert gallery code with an “S” instead of an “s”… GRRRRR coding!!!”

    thanks for your helpful plug in

    Colm

    Reply
  42. Ricky Stafford

    Not working for me…

    Latest WordPress, Nexgen, and Simple Shopping Cart.

    My website is clickable via my name if anyone can help.

    The add to car button is not even showing up.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>