Reading list Switch to dark mode

    Opencart Product Variation Module

    Updated 11 October 2023

    The major benefit of the Opencart Product Variation Module is to provide multiple choices to the users for product variants like color, size, etc. The user will pay for the selected product variant on the product page.

    The module allows the admin to set multiple variations for a product.  Furthermore, the admin can allot a different price range for different product variants.

    It is always a good option to allow users to select from different combinations of choices. Users seek variety for any type of product. Therefore, keeping the user’s perspective in mind, Opencart’s Product Variation Module helps to generate more traffic moreover increases conversion rates for an online store.

    Watch the video to comprehend the extension’s workflow:

    Tutorial

    Features

    • Enable/Disable the variation option tab for the products.
    • Enable/Disable the visibility of the Product variations in the front end.
    • SKU for the product variation is created either automatically or manually.
    • Allocate the Reward points for each variation.
    • Admin may manage each product variation separately.
    • Admin may add many product variations and combinations for a single product.
    • Product variation with quantity set as ‘zero’ is disabled in the front end.
    • Customers can view and choose customized Product Variations on the product details page.
    • Customers can buy multiple variations of a single product at the same time.
    • “Product not available!” error shall display if a customer adds an out-of-stock variation to the cart.
    • The price range is tabulated as per the minimum and maximum price of the product variation.
    • The regenerate and edit feature is available for the variations.

    Installation

    The installation of the Opencart Product Variation Module is easy. Under the module zip, there are 3 folders available, admin, catalog, and ocmod. Upload the admin and catalog folders to the root directory of the website.installation

    After uploading the XML file go to Extensions > Modification and click on the refresh field.

    Searching for an experienced
    Opencart Company ?
    Find out More

    After this, navigate to -> Extension Installer and upload the file Opencart_Product_Variation.ocmod.xml it will allow finding inside the ocmod folder as shown in the image below.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routeextension_installertokenqe7C0YIXPf41GGxpKc5zt2t39tpbr6PSasd-1-1

    Now navigate to ->Extensions->Modifications and click refresh on the top right-hand side as shown below.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routeextension_modificationtokenqe7C0YIXPf41GGxpKc5zt2t39tpbr6PSasd-1

    In the Admin panel go to System -> Users -> Usergroup and edit ‘Administrator’ group. Select all for both, the Access Permission and Modify Permission, and save it.


    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routeuser_user_permission_edittokenqe7C0YIXPf41GGxpKc5zt2t39tpbr6PSuser_group_id1asd

    Under Extension > Modules, install the Opencart Product Variation module as shown below.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routeextension_extensiontokenqe7C0YIXPf41GGxpKc5zt2t39tpbr6PSasd

    Module Translation

    As the Opencart Product Variation Module supports multiple languages so this section will describe how to make the module work in different languages. Please check the following link for language translation

    Module Configuration (Admin Management)

    After installation, the admin can edit the module configuration.  Navigate to  Extensions > Modules > Webkul Product Variation > Edit. 

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routeextension_extensiontokenqe7C0YIXPf41GGxpKc5zt2t39tpbr6PSasd-1

    Admin can configure the following points:

    • Status: Admin may Enable or Disable Product Variation Module under the “Status” tab.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routeextension_module_wk_pd_variationtokenqe7C0YIXPf41GGxpKc5zt2t39tpbr6PSasd

    • Show Product Option: Admin may also Enable or Disable Option tab under “Show Product Option”. opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenHoR7Sf1CK0QFPebnGpAiMW0pCkHgDDdUproduct_id40asd

    Adding Product Variations

    The admin can create variations for a product so that the user may choose from a given set of variations. For example size, color, etc.

    To add variations for a product navigate to Catalog > Products >  Edit > Variation. 

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenWkg4vidf24JB2EPXPWLGlrS9cQZx5n0sproduct_id40asd

    Under the Variation tab, tap on the “Add Variation” button to add the variations for a product.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenHoR7Sf1CK0QFPebnGpAiMW0pCkHgDDdUproduct_id40asd-1

    Now admin will get an option from where he/she can enter the default quantity for the variation. Apart from that they can also enable or disable the visibility of the variants.

    Admin can configure variations for a product by clicking the “Add A Variation” tab, after that dropdown options list appears. Admin can select the needed option from the list. Check the given image for more details:

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenqe7C0YIXPf41GGxpKc5zt2t39tpbr6PSproduct_id40asd-1

    Furthermore, once the variations are created, the admin may set the quantity for the variation. Admin can set the quantity for the created variant. Also can enable/disable variant visibility at the storefront.

    Moreover, the admin can set a specific price for a particular variation and also can add reward points for the variation. Even the admin can set weight as well for better shipping calculation

    Setting the variant quantity is essential for admin. If zero quantity is set then the product variant will get disabled.

    Now, tap the Create Variation button to create the variations as required.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenx2XBzPE5p7rWKLvvXkefKBXKpGpyqLCyproduct_id42asd-1

    After that, you can configure the variation price, points, weight, product identifiers, and much more. Lastly, save the variations by tapping the save button at the top right-hand corner.

    After saving the variations, you can see a success message for the same.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_producttokenxdKuRrIJjykU3F6fvqO3No5OLcbFWaaqasd

    Regenerate Variations:

    The admin can also regenerate the variations, this will remove the previous variations added to the main product and then the admin can create new variations for the product.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenxdKuRrIJjykU3F6fvqO3No5OLcbFWaaqproduct_id40asd-1

    After tapping the Regenerate variation, the admin can see a prompt stating that the already added variations will be removed for the product.

    11-4

    After that, the admin can see that the variations have been removed and can add new variations as required.

    111

    The SKU, under the ‘Add Variation’ tab displays the variation name. The SKU is auto-generated and is a combination of variation (for instance, large-red ) and the model name of the product. The product variation name may also be updated manually in the SKU section.

    Apart from that, the admin can also make use of product identifiers like – UPC, EAN, JAN, ISBN, and MNP for product variations.

    Admin can save the created variants. Saved product variants automatically reflect in the product list.

    For more details check the added screenshot: how the change in SKU results in Product Name and Model change.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_producttokenkpZt1fNmy1YLJfSZoP0Z6vas7NKfgwpvasd

    Add Custom Option-

    Moreover, the admin needs to navigate to Catalog> Options to add reward points for the variation.

    add custom option

    So now here, the admin can add, edit, and delete the existing option.

    Options

    To add a new option the admin can click on the add button and enter the values to create a new option-

    edit-product

    • Option Name- Enter the name for the custom option.
    • Type- The admin can select the type of the option from the list.
    • Sort Order- The admin can enter the sorting order of the option to display on the front-end.
    • Option Value Name- Here, the admin can add/delete the values for the created option and add the image for the option value. Also, the admin can sort the order of the values.

    Note- Currently it supports only two options types – Radio and Select

    Now from the product section, the admin can select the product to add custom variation and then click on the edit button-

    edit-product

    Admin needs to click on the variants tap to add custom variation.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenPqB4TRhUJfOx95IPILdj7o0YmlJ5lGqgproduct_id40asd

    Admin needs to click on the Add Variant and select the created custom variant then click on the Create Variation button.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenPqB4TRhUJfOx95IPILdj7o0YmlJ5lGqgproduct_id40asd-1

    Now the variation will be added to that product and the admin can manage the variation according to need.

    The admin can enter the Quantity of the variant, enable or disable the variant from the front end, add the price for the particular variant, add the image of the variant and delete the variant and then click on the save button.

    Screenshot-from-2023-07-05-19-00-14

    Note –

    • The admin can add image for the particular product variant. These images will be shown to the customers according to the variant, when the product variant will be added to the cart.
    • Images of the product variant can also be shown to the customers when the visibility of the product variant is enabled by the admin. The customer can see the image of that product variant when the customer will search for that specific product variant using the product SKU.

    Multiple Image Addition

    However, the admin has the facility to add multiple images to the variation. For this the needs click on Add More Images. This will open a pop up wherein the admin can click on Add Row to add product images.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenMzeTJ7rdpHmTz6BQgTnSKzkTsj18xo3hproduct_id40asd

    Front End

    On the front end, the user may search for the required product in the search tab. The product searched by the user is visible on the front end along with its variations, created by the admin.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_index.php_routeproduct_searchsearchiphoneasd

    The user may visit the product page and choose the variations of his choice under “Available Options”.

    Here, the Price Range indicates the price under which the product may lie. It is tabulated as per the formula displayed below:-

    Price Range = (Product cost + Minimum Variation Cost) to (Product cost + Maximum Variation Cost)

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_index.php_routeproduct_productpath59product_id40asd-1

    The user may also search for a particular variation in the search tab. A page opens which shall display that particular variation’s product. The user may directly purchase it from there, without having to go through all product variations.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_index.php_routeproduct_searchsearchiphone20yelloasd

    Under “Available Options”, when the user selects the color, the extra charge laid upon that particular color by the admin at the backend is displayed along with the color.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_index.php_routeproduct_productpath59product_id40asd

    Editing Same Variation Options

    The admin can edit variations, even after already creating variations for a particular product. Editing variations for a product would not affect its existing variations.

    The admin can only edit the already added variations to the variable product.

    To do so, navigate through Catalog->Products->Edit->Edit Variation.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenWkg4vidf24JB2EPXPWLGlrS9cQZx5n0sproduct_id40asd-1

    These variations can be created by clicking on the Add Variation tab.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenAKm4pCUcdVNegJM0bEp85bB08E65AqEYproduct_id40asd

    The admin may set the quantity, price for the variation, reward points, weight which is required to tabulate the shipping charges after creating the new variations.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_product_edittokenAKm4pCUcdVNegJM0bEp85bB08E65AqEYproduct_id40asd-1

    Now, when a customer will select and add the product to the cart, the customer can view the image of the selected variant from the cart as shown in the image below –

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_index.php_routeproduct_productpath59product_id40asd-2

    Here, the customer can see multiple images of product as per variation selection.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_index.php_routeproduct_productpath59product_id40asd-3

    The variations, once created, may be displayed under Catalog>Products. If the admin wishes to edit any variation, he may do so by clicking on the Edit tab against it.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_admin_index.php_routecatalog_producttokenAKm4pCUcdVNegJM0bEp85bB08E65AqEYasd

    In the image below, one can see the variations added by the admin being displayed along with the main product and the existing variations.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_index.php_routeproduct_searchsearchiphoneasd-1

    The user, as per his choice may select the variation from the list of variations being displayed on the frontend. Once the variation is chosen by the user, he may add the product to the cart and proceed for checkout.

    Out-of-Stock Variations

    It is essential for the admin to define some quantity for each product variant at the time of creating it.

    If zero quantity for the product variation is set, then it is automatically disabled from the Front-end.

    Whenever a user tries to buy an out-of-stock Product variation, a warning message stating “Product not available!” is displayed.

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_index.php_routecheckout_cartasd

    Reward Points

    The admin can allocate different reward points to each product variation. The admin can set these points while creating the variations. The product reward points may be calculated as:

    Product Cost (Reward Point) = Actual Product Reward Points + Reward Point Overhead 

    opencartdemo.webkul.com_product-variation-103-80-65-178-demo_index.php_routecheckout_cartasd-1

    Checkout

    The user can fill in the billing and delivery details. The user can also select the delivery and payment method to process the order.

    Under Confirm Order tab, the user can view the order details for the product that is purchased by the user like product name, model, quantity, price and total amount as shown in the image.

    checkout-option

    After the order is confirmed, a success message would display and the user can also view the order history, under My Account as shown in the image below.

    order-information

    Support

    That’s all for Opencart Product Variation Module. If you have any issue, please create a support ticket at – https://webkul.uvdesk.com/en/customer/create-ticket/

    For further queries and customization discussions, please send an email to [email protected]

    Current Product Version - 3.9.0.0

    Supported Framework Version - 2.x.x.x, 3.x.x.x

    . . .

    Leave a Comment

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


    8 comments

  • İBRAHİM ÖZEN
    • Subhangi (Moderator)
  • mishaal
    • Goldy Bhargava (Moderator)
  • sadam hussain
    • abhishek oberoi (Moderator)
  • Bunch
    • abhishek oberoi (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content