BigCommerce Product Variants in Table User Guide

BigCommerce Product Variants in Table App User Guide

App Version: 1.0.0
Our Support Email: bigcommerce@capacitywebsolutions.com

Thank you for purchasing Product Variants in Table BigCommerce App. If you have any difficulty with this App or you find an issue, please feel free to send us a message: bigcommerce@capacitywebsolutions.com

Below you will find the detailed documentation on how to use our App and we wish you have a great experience with our BigCommerce App.

How to Use it

Allow your customers to purchase multiple variations of a Product in different quantities from a single Product Page with the Product Variants in table. It displays your Product Options in a table format, so your customers can enter purchase quantities for each specific Option combination and add all Products to the Cart at once. For example, if you are selling a T-Shirt that has a Color Option (Red, Yellow, Blue) and a Size Option (Small, Medium, Large), the Product Variants in table will split the Color Option into rows, and Sizes into columns. A customer can order any number of each Option Combination all at once from the same Product Page, rather than needing to order each Option combination individually.

Note: Now, Product Variants in Table Application will work for products which have modifiers and variants both or only variants. Product Variants in Table Application provide on default "BigCommerce CORNERSTONE" Theme if you have different theme then file location will be different. If you don't underdtand that where to put the shortcode on your theme then please feel free to Contact us.

Check Live Demo Here

Get the Product Variants in Table App

Click here to visit our BigCommerce App >> Product Variants in Table

Please watch the video which explained the complete Product Variants in Table app installation, setup process and also how our app works.

Installation steps video of Product Variants in Table App:

Detailed Explanation of Product Variants in Table App Features:

Steps to Show App on Frontend

Go to Admin >> Apps >> Product Variants in Table >> How to Use. Watch Video Guide Here.

Step-1: Download necessary files
- Click on the Download button and download the zip file.
- Then Connect to your store WebDAV server. You can check it here. Now open Content folder in WebDAV.
- Copy and paste the downloaded zip file in the Content folder and extract it. You will see variantapp folder in your Content folder.
Step-2: Apply short Code
Now, Go to Admin >> Apps >> Product Variants in Table >> How to Use >> Step-2 >> I) and copy code.

Go to Edit Theme Files >> templates >> components >> products >> product-view.html and in theme editor, search "each product.options" and select that code till 1st "/each" and replace the copied code as shown in below :

Now, Go to Admin >> Apps >> Product Variants in Table >> How to Use >> Step-2 >> II) and copy code.

Go to Edit Theme Files >> templates >> components >> products >> product-view.html and in theme editor, search "{{> components/products/add-to-cart}}" and replace the copied code as shown in below:

Now, Go to Admin >> Apps >> Product Variants in Table >> How to Use >> Step-2 >> III) and copy code.

Go to Edit Theme Files >> templates >> components >> products >> product-view.html and put below code at the end of file.

General Settings

Go to Admin >> Apps >> Product Variants in Table >> General Settings. Watch Video Guide Here.

You can enable/disable application at frontend.
You can hide the variant table from displaying on specific products.
You can show/hide variant table for products having modifiers and variants both.
You can set Bulk Cart Button position.
You can show variant table after customer logged in. You can allow variant table only for selected customer groups.
You can sort variants by different options to display in variant table.
You can show/hide SKU, Out of Stock Variants, Instock Text and etc.
You can set quick view for variants to show more details of variant on click on variant image.
You can set pagination for your lot of variant combinations and also display Filters for variants and set search bar with variant table.
There is flyout image effect for attractive look.

General Settings

You can enable subcategories for category level discounts from here.
You can update subcategory option for every customer groups.

General Settings

You can customize variant table labels and other header and message texts.
You can customize variant table button colors.

General Settings

Customize Variant Table Template

Go to Admin >> Apps >> Product Variants in Table >> Variant Table Template. Watch Video Guide Here.

Here, you can set html for variant quick view and table form.
Any details you want to show in quick view like product dimensions, bulk pricing rules etc., you just need to set some tokens and save the template.
You can change variant table format, labels, row html whataever you want.

Note: Make sure not to edit class names or ids from default html elements that might references some scripts for variant table.

General Settings

Modify Product Variants in Table Shortcode

Step-1: Go to Admin >> Apps >> Product Variants in Table >> How to Use it and If your store url has been changed then you need to update it for Product Variants in Table app from here. Click on Update Button and check the updated details.
Step-2: Now, you need to follow Step-2 to update short code in theme files.

Product Variants in Table App in Your Store Front

Once you followed all the steps properly, Product Variants will look like below image:
You can also display Notify me button for subscription of back in stock notification for out of stock product variants within variant table, just like below. Please check here for how to display this button in your store.

Uninstall App

There are three things that have to be done manually in your store admin:

Uninstall the app from admin section.
1. Go to Apps > My Apps

2. Click Uninstall.

3. The app will be removed from the My Apps section of the App Marketplace and the Apps bar in your Control Panel.
Remove our application code and files from your store.
Step-1: Remove "variantapp" folder from your store's WebDAV section Content folder.

Step-2: Go to Edit Theme Files >> templates >> components >> products >> product-view.html and find the below code and remove it except these code "{{#each product.options}} {{{dynamicComponent 'components/products/options'}}} {{/each}}".

Step-3: Go to Edit Theme Files >> templates >> components >> products >> product-view.html and find the below code and remove it except these code " {{> components/products/add-to-cart}} ".

Step-4: Go to Edit Theme Files >> templates >> components >> products >> product-view.html and find the below code at the end of file and remove it.
If you Uninstall our Product Variants in Table App after Subscribing in PayPal then you must follow below steps:
Step-1:  Login to your PayPal Account.

Step-2:  Go to  Settings.

Step-3:  Click Payments.

Step-4:  Under "Preapproved payments", click Manage preapproved payments.

Step-5:  Select the merchant whose agreement you want to cancel and click Cancel.

Step-6:  Click Cancel Profile to confirm your request.

If you have any questions then Click Here to find more details on the PayPal site or feel free to Contact Us.