Stop variations from being preselected

By default, when loading a product with variations, Maropost Commerce Cloud will load the parent product first, then select a variation of the product as a default to load the values in the ajax templates. To turn off this functionality, follow the instructions in this article.

Preparation Checklist

Before you start this tweak, it's a good idea to run through our Preparation Checklist below:

• Read through the Introduction to Maropost Commerce Cloud Document to get a better sense of how the Control Panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Open the buying options template

The product buying options template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/buying_options.template.html.

Step 2: Add the code into the template

Paste the following code into the template replacing the existing [%IF [@store_quantity@] > 0 AND [@preorder@] %] section highlighted here.

[%if [@has_variation@]%]
    <a class="btn btn-success btn-block btn-lg btn-ajax-loads disabled" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Select Options</a>
[%else%]
    [%if [@available_preorder_quantity@] > 0 AND [@preorder@] AND [@config:WEBSTORE_USE_PREORDER_QUANTITY@]%]
        <button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-warning btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-clock icon-white" aria-hidden="true"></i> Pre-Order Now</button>
    [%elseif [@store_quantity@] > 0 AND [@preorder@] AND ![@config:WEBSTORE_USE_PREORDER_QUANTITY@]%]
        <button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-warning btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-clock icon-white" aria-hidden="true"></i> Pre-Order Now</button>
    [%elseif [@store_quantity@] > 0 AND ![@preorder@] %]
        <button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-success btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-shopping-cart icon-white" aria-hidden="true"></i> Add to Cart</button>
    [%elseif [@store_quantity@] < 1 AND [@config:ALLOW_NOSTOCK_CHECKOUT@] %]
        <button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-warning btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-clock icon-white" aria-hidden="true"></i> Backorder</button>
    [%else%]
        <a href title="Notify Me When [@model@] Is Back In Stock" class="btn btn-info btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" data-toggle="modal" data-target="#notifymodal"><i class="fa fa-envelope" aria-hidden="true"></i> Notify Me</a>
    [%/if%]
[%/if%]

Step 3: Open the child products template

The child products template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/child_products.template.html.

Step 4: Add the code into the template

Look for [%param *variation_header_select%] and add the following code below the select element highlighted here.

<option selected disabled>Select [@specific_name@]</option>

Step 5: Update Advanced Configuration

The final step is to update the advanced configuration PRESELECT_VARIATION to No.

This configuration can be found within your control panel: Settings & Tools > Advanced Configuration

Your variation products will no longer select a variation by default and will disable buying options until the customer has selected a variation to purchase.