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. John Pizzolato

    Harish Save wrote:

    //Added this line
    $price = ltrim(rtrim(strstr(stripslashes($_POST['product']), ‘$’), ‘)’), ‘$’);

    ****
    Sorry, but my PHP skills are not that strong. I inserted the previous statement that Harish suggested but I am getting the following parse error. I can’t see what’s wrong with it. Please Help

    Parse error: syntax error, unexpected T_VARIABLE in /home/jpwebdev/public_html/jpwebsitedev1.com/wp-content/plugins/wordpress-simple-paypal-shopping-cart/wp_shopping_cart.php on line 119

    Reply
  2. Elan42

    You will love me for this:
    UPDATE `PREFIX_ngg_pictures` SET `description`= (
    SELECT CONCAT(“Price 1 €
    [wp_cart:", (SELECT `filename`), ":price:1:end]“)) where `galleryid` = 666

    Reply
  3. Luz

    Hello,
    The answer might be obvious but I can’t get it:
    I have NextGen Gallery installed. And WP store. I am stuck connecting the two. Can one do these simply by installing plugins rather than uploading, unzipping, etc?
    I did not download (the WP eStore template file for NextGen Gallery) since I had installed it as a plug in. But what does “upload the ‘gallery-wp-eStore.php’ file to the ‘view’ folder of the NextGen gallery plugin directory (nextgen-gallery/view/gallery-wp-eStore.php)” mean?

    Where exactly is the ‘view’ folder for NextGen? Thank you.

    Reply
  4. Hemanth

    I need a Nextgen Photo Gallery Plugin, set up and integrated with a paypal shopping cart. Can somebody help?

    I have followed the Instructions of http://www.wordpress-ecommerce.com/wordpress-shop-using-nextgen-gallery-and-wp-shopping-cart-7 to Integrate the Nextgen Plugin with paypal shopping cart.

    I tried and came up with this [admin deleted the url]

    Issues I am Facing in my implementation;

    1. “Add to Cart” does not look like the button described in the Instructions Link Above.
    2. On Click of “Add to Cart” button I don’t get to see the Shopping Cart Contents as shown in the Instructions Link Screenshot.

    Looking forward for help.

    Thank you.

    Reply
  5. Jacob

    I got the plugin to work great on the gallery page. I just want to know if you can tell me how to make the add to cart button show up in the fancybox? Right now it just shows the shortcode itself. If I can’t make the add to cart button show, do you know how I can hide the caption?

    Reply
  6. Bob

    Hi, im just wondering is it possible, with the next gen gallery addition to offer different options for items, for example a tshirt in different colours?

    Thanks

    Reply
  7. bahgheera

    Hi there, I got nextgen and the shopping cart to play nicely together as long as I’m displaying the gallery with the eStore template. But, I run into a problem if I want to display it as a regular gallery. take a look:

    [admin deleted link]

    On examining the page source, it seems there is an issue with quotes maybe, I’m no html expert so I can’t see exactly what is happening here. Any help would be greatly appreciated.

    Reply
    1. Doug

      This is because you need the eStore template to manage the add to cart. If you remove the paypal code you’ll be able to display it as you want.

      Reply
  8. Martin

    I’m adding photos to my website to sell to event participants and I have the gallery with shopping cart working fine, however I can’t seem to find info on how the user would get the correct photo from me.

    In simple cart you can only link them to the one URL, so am I just supposed to send them the digital file after I get the paypal receipt?

    Just a little confused on this.

    Reply
  9. Mark Hannon

    I may be working with a client who wants to sell jewelry. In addition to the basic price, is there a way to add a line for shipping and, if necessary, sales tax?

    Reply
  10. Doug

    This set up is Great! Only 1 draw back…. It’s not playing well between browsers. I got it all set up and running and looking Great and then I hit my ‘IE’ rendering button on Chrome and well…you know, the formatting has gone to the dogs. I see it plays well for you in all the browsers. What did you do different? I’d throw you a link but I’m working on a local host.

    D

    Reply
  11. Mike

    Hello,
    I just followed the steps to integrate these two plugins, and it is working fine.

    I am trying to set up an album for each photoshoot, wedding, or event I photograph and allow anyone with the password to the page to be able to order prints of any of the pictures there. What I need to know is, is there a way to have a drop-down with different size options/prices to be added to the cart rather than a static “Price: $25″ and an “Add to Cart Button”?

    Reply
    1. Mike

      Ok, well, I’ve figured out part of it…

      Could someone help me get the correct Price to go to the cart?

      This is what I have put into the Description:
      5
      Size:
      8×10 ($8)
      5×7 ($4)

      [wp_cart:5:price:value:end]

      where the ‘*****’ is the missing piece. I am not sure what I should be putting there to get the button to grab the Price of the selected size.

      Reply
      1. Nicola Elvin

        Hey Mike, I need to have drop down options as well, can you tell me if you worked out how to do this?

        Reply
  12. Kiran

    plugin is working beautifully but is there any facility with the plugin to manage the products or images from the admin section? or can we manage it? How?

    Thanks In Advance…

    Reply
  13. Kiran

    And is it possible to show the thumbnails of selected products on the shoping cart ?
    i m using the plugin configured with the Nextgen Photogallery.

    Reply
  14. mark richardson

    hi, I followed the instructions for:

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

    but get an error just behind the ‘add to cart’ option – something like:
    ….”class=”shutterset set 8″
    - could this be related to my theme that I am using on the site (my lovely theme 0.6 by mythem.es)
    ?

    Reply
  15. mark richardson

    forget the last comment – i havejust noticed that the letter ‘S’ in “wp-eStore” is capitilized!

    maybe you should add this to the info above (seen as the instructions are in an image)?
    thanks,
    mark.

    Reply
  16. Damion

    Can I get the cart section to show on its own page rather than sidebar? I am not using the sidebar section on this site and would like the this section to have its own page.

    Reply
  17. Tracy

    Hi,

    This plugin is working fine on one of my client’s sites, so thanks for making it available.

    The one issue my client has with it, is that she’d like the description of the product to appear in the modal pop-up (we’re using the default Thickbox that comes with NextGen Gallery).

    All it says now is “Image 1 of 20 “.

    At the moment the description can only be seen when someone clicks the Add to Cart button and the details appear in the side widget. So for example ‘Oil on canvas, 11×14 inches’ is the description of the painting for sale, and this is used by the WP shopping cart plugin — we need this description to appear on the modal pop-up version of the larger image when someone clicks on the thumbnail.

    NextGen does show this information in the Thickbox modal window when WP shopping cart isn’t involved. So, how do I get it to display this description on the pop-up modal window when using WP shopping cart with NextGen and ThickBox.

    You can see what I mean here [admin deleted the link]

    If you click on the thumb you don’t get the description, but if you click the Add to Cart button the description appears in the Cart info in the side bar. Now go to one of the galleries not using the shopping cart plugin, click the thumbnail and you’ll see the description in the Thickbox window.

    Thanks for your help.

    Cheers,

    Tracy

    Reply
  18. Nicola Elvin

    Hi, I’d like to have the add to cart button in the image browser view so as my gallery page isn’t cluttered up with add to cart buttons. I have made it so that the gallery shows all the thumbnails, then instead of clicking the button and a modal window comes up, it shows up the image with next and previous buttons. That is where I want my add to cart button. However, the template code I add to the gallery page obviously wont work for here because it’s it’s own template. So I edited the nextgen imagebrowser.php page adding in , but this just repeats the image 10s of times with the shortcode just echoed out.

    Reply
  19. Vighpyr

    Okay quick question. I got the plug-in installed fine. Love it! Now, how do I go about changing the ‘design’ of the Add to Cart button? I just want to have a smaller, colored button (similar to the one in the example at the top of the page) instead of the big, default one.

    Thanks in advance!

    Reply
  20. Natalie

    Hello. I have installed the plugins and template and have followed your instructions. All is well except for one thing. When I put the code into the description field for that image:
    My T-shirt
    Price: $25.00
    [wp_cart:My T-shirt:price:25.00:end]

    and refresh my page, no text is visible and the “Add to Cart” button is positioned above and off center of the thumbnail image. I am using a purchased Mojo Theme template and am hoping that it’s not due to the template. Can you tell me what the problem might be?

    Reply
  21. Natalie

    One other thing, I just noticed that the lightbox function does not work once I place the code in the description! Instead, when you click on the thumb, it opens the enlarged image in the same window and the user is left to hit the back button to get to the store.

    Reply
  22. Damian S.

    For days, I have been figuring out on getting the right photo which I can use in my website. My gallery that has the shopping cart is working after I followed the step by step procedure. But yeah, this is not very friendly to all browsers. I also need more info on this one too.

    Reply
  23. David Cosgrove

    I have followed all of the instructions/directions and on the Gallery page I keep getting this error –
    ” class=”shutterset_set_1″ >
    I have no idea how to fix this – any ideas?
    Thanks!

    Reply
    1. Roberta

      I get this error too, but only if I use one of the Nextgen images, which I’ve added the shopping cart code to, in a blog post. If anyone can help me fix this error, or even point me to a post discussing how to fix it, I would be most grateful.

      I know there’s something about using the estore template – but I can’t do that for my blog posts. Or if I can I don’t know how. So I assume there’s some kind of code I need to add to my blog posts template.

      Reply
      1. A Walker

        I’m having this problem also. When I fiurst installed this module (early January 2013) it worked a treat. At some stage over the last few days it’s broken. I now get ” class=”shutterset_set_3″ > before each thumbnail

        Is there a fix for this?

        Other than this, it’s been a great plugin – fantastic for a breebie – and I was considering upgrading

        Reply
  24. Lyra

    Hello. I’m a little confused. Is the NextGen Gallery and WP Shopping Cart used for those who wish to package and sell their products to a physical location? Or is the delivery of the products done instantaneously by downloads after the customer makes a payment?

    I am a photographer/graphic designer and have been looking a shopping cart to sell my digital work instantaneously and have customers pay me via PayPal. Would the NextGen Gallery and WP Shopping Cart be the right tool for me?

    Reply
  25. Toshi Yoshida

    This is a great plugin but I’m having a small problem with it.

    My gallery works by navigating from a thumbnail grid view to a ‘description view’ page (i.e. a page with a mid-sized image, large description and comments section) to a full sized image view. Thats a little different to most NextGEN users who go directly from grid-view to a full sized image view.

    My ‘description view’ page is being slightly corrupted by the plugin as the Add to Cart button appears at both the Top and Bottom of the page and the Top part includes some extra visible html.

    Reply
  26. Barry

    @Luz

    Unzip the nextgen zip file, locate the view folder and then paste it in.
    Zip the file and upload.

    However even though i found the solution and tried to upload the zip file, an error occurs:
    The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

    Please help

    Reply
  27. Barry

    @Luz

    I solved the problem by tweaking the steps I mentioned.

    Unzip the nextgen zip file, locate the view folder and then paste it in.
    Zip the file and upload.

    Instead of doing this,

    open the zip file, browse to the view folder and add the php in this way.
    Voila!

    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>