WordPress Shop Demo Using NextGen Gallery and WP Shopping Cart

by admin on March 28, 2009

This is a demo page showing how the WordPress Paypal shopping cart plugin is used in conjunction with the NextGen Gallery to create an online store for digital 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.

Related posts

{ 177 comments… read them below or add one }

www.produsedigitale.net July 22, 2009 at 10:35 am

is very simple to us…interstering

Reply

Anonymous August 1, 2009 at 6:38 am

Thank you an interesting theme

Reply

Arteccentrix August 2, 2009 at 9:20 pm

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

Kevin August 7, 2009 at 12:09 am

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

newdeveloper August 12, 2009 at 7:41 pm

thanks so much it is a very useful and simple demo :)

Reply

Jenny August 13, 2009 at 4:01 pm

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

nycbone August 16, 2009 at 1:31 am

Viewable here http://arcane-arts.com/shop/buy-direct_wp-shopping/

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

Dan August 16, 2009 at 10:02 pm

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

Steve C August 16, 2009 at 10:43 pm

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

admin August 17, 2009 at 8:15 am

@Dan, Please use the latest version (v2.3). Variation control was introduced in version 2.2.

Reply

admin August 17, 2009 at 8:32 am

@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

admin August 17, 2009 at 8:34 am

@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

Voltage September 16, 2009 at 10:48 am

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

Voltage September 22, 2009 at 4:59 pm

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

Reply

admin September 23, 2009 at 9:22 am

@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

reid September 25, 2009 at 9:35 pm

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

reid September 25, 2009 at 9:41 pm

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

beni September 30, 2009 at 4:27 pm

Hi,very nice plug ,i’m using it with next gen gallery ,and i folow thexact steps to install and i can’t get the button under the image in gallery …please ,any help? http://radha.ro/shop-radha/

Reply

beni September 30, 2009 at 4:31 pm

NextGEN Gallery 1.3.3 with wordpres 7.1

Reply

beni September 30, 2009 at 4:35 pm

there is my code in descripsion of images in the next-gen …
http://radha.ro/wp-content/uploads/2009/09/help.jpg

Reply

Coolpix October 1, 2009 at 3:15 am

I’ve had the same problem “reid” had, and I figured out quickly that the eStore template for NextGen Gallery was missing, and reinstalled it. The problem now is that I see the gallery with the code I inserted for the description and the “add to cart” button, but everything shows including the code that is supposed to make the button to show, except the add to cart button. I tried everything: Downgraded to NextGen Gallery 1.3.5, (last working version), reinstalled WP Simple PayPal Shopping Cart, but nothing seems to work. Now my online store is broken. The plug-in works, because when I create items without NextGen Gallery, they show the button normally. Take a look: http://www.dreamsensescandles.com/store/?page_id=695. Any help is appreciated.

Reply

Donna October 1, 2009 at 1:05 pm

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

admin October 3, 2009 at 2:32 am

@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

admin October 3, 2009 at 2:38 am

@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

admin October 3, 2009 at 2:41 am

@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

beni October 3, 2009 at 6:06 pm

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 ….

http://radha.ro/wp-content/uploads/2009/09/help2.jpg

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

Donna October 4, 2009 at 9:58 am

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

Donna October 4, 2009 at 10:00 am

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

Coolpix October 5, 2009 at 1:20 am

@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

admin October 5, 2009 at 7:44 am

@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

beni October 5, 2009 at 8:20 am

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 ….

http://radha.ro/wp-content/uploads/2009/09/help2.jpg

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

Donna October 5, 2009 at 8:42 am

@admin any ideas what is causing the problem I’m experiencing with NextGen and the Simple WP Shopping Cart?

Reply

Coolpix October 5, 2009 at 8:49 pm

@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: http://www.dreamsensescandles.com/store/?page_id=456

Reply

troy October 28, 2009 at 10:12 pm

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

On the Curve November 2, 2009 at 6:50 pm

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

On the Curve November 2, 2009 at 7:40 pm

Problem solved! Awesome option for making a blog a store! Thanks A Mill!

Reply

daren December 3, 2009 at 7:46 pm

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

anita harris December 5, 2009 at 2:35 am

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

Chris December 24, 2009 at 8:14 pm

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

Sapna December 28, 2009 at 4:54 pm

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

etiqi January 4, 2010 at 9:44 am

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

Peter Armenti January 20, 2010 at 5:06 pm

can you use table rate pricing and is it possible to have a quantity field before clicking add to cart?

Reply

Jackie January 26, 2010 at 11:27 pm

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

Jot February 13, 2010 at 4:45 pm

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

Choubacca February 16, 2010 at 9:53 pm

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

Choubacca February 17, 2010 at 3:10 am

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

barry February 18, 2010 at 6:23 pm

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

Greensnapper February 22, 2010 at 2:17 pm

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

Reply

janet February 24, 2010 at 8:19 am

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

Reply

janet February 24, 2010 at 9:55 am

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

Installing the plugin.

Destination folder already exists. /home/cindyeve/public_html/wp-content/plugins/gallery-wp-eStore/

Plugin Install Failed.

how to i delete this file that i error uploaded?

Reply

Leave a Comment

Previous post:

Next post: