Tips and Tricks WP eCommerce

eCommerce Solution for WordPress Blog

NextGen Gallery – Stacking More Product Boxes Side by Side

In the sell-photos-from-wordpress-site tutorial you learned how to sell your photos using NextGen Gallery and Simple PayPal Shopping Cart. In this tutorial I will show you how you can stack more product boxes side by side.

The following screenshot displays the products with the Add to Cart button in a NextGen gallery. In this example it created a two columns layout. But you may want to have three or more columns (depending on your design needs).

gallery-product-boxes-default

Setup Steps

Step 1: Create Your Custom Code

The plugin has the following class “ngg-gallery-thumbnail-box” that allows you to customize the displayed thumbnail box. In the following example 30% was added to the width tag so 3 product boxes can stack side by side.

Note: You may have to adjust this value to fit your width.

Custom Style Code:

.ngg-gallery-thumbnail-box {
float: left;
margin-right: 5px;
width: 30%;
}

Step 2: Add Your Custom Code

NextGen plugin has an area that allows you to add custom CSS code.

Go to Gallery -> Other Options -> Styles click on (Show Customize Options) link.

Make sure you save your changes.

adding-custom-css-code

The following screenshot displays three images aligned next to each other in the gallery.

gallery-product-boxes-with-more-columns

In the above example only three columns were created. You can have more columns if you want, just change the width percentage to a smaller number.

 

WP eStore and NextGen Gallery Integration to Create Digital Photo Store (Method 1)

WordPress eStore and WordPress Paypal Shopping Cart Plugins can be integrated with the NextGen Gallery Plugin to create a Digital photo store similar to the screenshot shown below (please see the integration steps below to find out the full details):

WP eStore and NextGen Gallery Integration

WP eStore and NextGen Gallery Integration

The images were resized to 800×600 resolution using the NextGen Gallery resize utility. An watermark was also applied to the image using the NextGen Gallery ‘Effect’ option to prevent stealing. Once the purchase is complete the encrypted download link for the original image stored in a separate location (1920×1200 resolution and no watermark) is emailed to the buyer.

Just to clarify… You don’t necessarily have to sell digital photos to use the gallery. You could be selling anything and still use the Gallery as a means of displaying the products where each thumbnail is the icon of the product you are selling.

How to Integrate NextGen Gallery and WordPress eStore Plugins

There are two ways to integrate NextGen Gallery with the WP eStore plugin:

Method 1: Create/Configure every product separately
Method 2: Configure one product then use that as a template

This page explains the first integration method. Please see the following link for the 2nd integration method:

What Plugins do You Need for This Integration?

You will need the following 3 plugins for this:

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.

The Integration Steps

Step1. Install the eStore NextGen Gallery Addon

How to download and install the Free eStore NextGen Gallery Addon is explained here.

Step 2. Displaying the Gallery

Use the following shortcode to display the NextGen Gallery in a post or page:

[nggallery id=1 template=wp-eStore]

Given the nextgen gallery id is 1. You will need to change “1” to whatever your NextGen Gallery ID is.

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.

Note: The “S” in “wp-eStore” is capitalized.

Step 3. Adding the ‘Add to Cart’ Buttons below the Image Thumbnails

1) First make an eStore product for the NextGen Gallery image in question (if you haven’t done so already). You will need to make a product for each of your gallery images.

2) Go to ‘Manage Gallery‘ from the NextGen Gallery settings menu and choose the Gallery that you want to turn into a shop.

3) Now in the ‘Alt & Title Text / Description‘ field of every image, enter the Image details (name, price etc) and the shortcode for the Add to Cart button of that image.

[wp_eStore_add_to_cart id=4]

It should look similar to the following example:

In the above example the eStore Product id of the Photo is 4 (the product ID can be found in the “Manage Products” menu of eStore). I have configured this product in WP eStore already. "<br />" is an HTML code to insert a line break so the name, price and the buy button doesn’t appear all on the same line.

4) Do the same for all the images in the gallery.

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

Frequently Asked Questions:

Question 1: Can I use an eStore fancy display inside a NextGen gallery display?

No, the NextGen gallery itself is a way of displaying your products. So you cannot insert a pre-configured eStore’s fancy display inside a NextGen gallery display (they are two different display methods).

The WordPress eStore Plugin can be found in the WordPress eStore Plugin Page. All WP eStore related documentation can be found on the WP eStore Documentation Site.

NextGen Gallery Alternate Integration Method (Method 2)

There are two ways to integration WP eStore with the NextGen Gallery plugin. Each of these two methods have pros and cons. Depending on what you want, one might work out better than the other.

So make sure to check the details of both these integration methods so you can decide which one works best for you.

The method 1 of NextGen Gallery integration is explained on the following page:

Method 1 is slightly better for the security of the digital photo/image since you can configure to deliver a separate copy of the image than the one on display. The following link has more details on this :

The only issue with method 1 is that you manually have to configure every product separately which is not ideal for some users. So for people who are not really that concerned about the security of the digital image (example, if you are selling prints of wedding photos) the method 2 (alternate way of integrating NextGen Gallery) works out better as you don’t have to manually configure every product.

What to Expect From Integration Method 2 (the objective)

The aim of this integration is that you will configure one product with the price, variation, shipping etc options that you prefer and then use that product’s information as a template to create a “Buy Now” button for every image in your gallery. The name of the product will be dynamically changed to the “alt text” of the image on a per image basis and upon purchase the “image url” for that image from the NextGen gallery will be given as a download.

Important Note: One thing people miss when using this method is that the image that you are using in the NextGen gallery will be delivered to your customer after purchase (not the one you configure in the “Digital Product URL” field of eStore).

If you want to deliver the image from the “Digital Product URL” field then you need to use method 1 of NextGen gallery integration.

The Integration Steps

Step1. Install the eStore NextGen Gallery Addon

How to download and install the Free eStore NextGen Gallery Addon is explained here.

Step 2. Configuring a product to be Used as  Template

Add a product from the “Add/Edit Products” menu of the eStore plugin. Specify the price, variation, shipping etc options that you prefer for your images appropriately (the product name doesn’t matter as it will be dynamically changed to the alt text of the image).

Step 3. Specify the Template Product ID in the Settings Menu

Browse to the “3rd Party Integration” tab of eStore’s settings menu and specify the product ID configured in step 2 as the template product.

NextGen Gallery Settings Screenshot

Step 4. Displaying the Gallery with Buy Buttons

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

[nggallery id=1 template=wp-eStore-auto]

The gallery id is 1 in this example. You will need to change “1” to whatever your NextGen Gallery ID is.

Using the “template=wp-eStore-auto” option will show/display a “Buy Now” button below every image in this gallery that the visitors can use to make a purchase.

Important Notes and F.A.Q:

Question 1: Can I Use “Add to Cart” Buttons Instead of “Buy Now” Buttons When Using This Integration?

Yes, There is another template in eStore so you can use “add to cart” type buttons. The template is stored in the “view” directory of the eStore plugin and is called “gallery-wp-eStore-auto-addtocart.php”. Copy this template file to the “view” directory of the NextGen gallery plugin. Now, you can follow the 2nd and 3rd step of the above instruction and use the following shortcode to use this template:

[nggallery id=1 template=wp-eStore-auto-addtocart]

1 is the ID of the nextgen gallery.

Question 2: Can I use an eStore fancy display inside a NextGen gallery display?

No, the NextGen gallery itself is a way of displaying your products. So you cannot insert a pre-configured eStore’s fancy display inside a NextGen gallery display (they are two different display methods).