Hi, I’m having an issue with Add To Cart with Variable product.
I’ve followed literally the video tutorial, and everything works fine except that on the exported page, when i select the variation (and enables addtocart button) it’ doesn’t display anywhere informations about the selected variation.
Isn’t there a sample html structure that I can use for that?
Thanks, regards
Hello there,
I’m not sure if its relevant, but are you using the latest version of Pinegrow as I noted a bug fix on variables with the lates 6.6 release, that is
just in idea, in case that applies to you.
or, I may be wrong 
@akiccoo is the Template element set correctly? That’s the element that displays the selected variation.
Here is the source HTML code of the Add to Cart section for reference:
<form class="mb-3" wc-product-cart wc-product-cart-type="variable" wc-product-cart-variation-attribute="[data-pg-name="Repeated Attribute"]" wc-product-cart-variation-attribute-label="[data-pg-name="Attribute Label"]" wc-product-cart-variation-value="[data-pg-name="Attribute Selector"]" wc-product-cart-variation-clear="[data-pg-name="Attribute Clear"]" wc-product-cart-variation-single-wrapper="[data-pg-name="Selected Variation Wrapper"]" wc-product-cart-variation-add-to-cart="[data-pg-name="Quantity and Button Wrapper"]" wc-product-cart-quantity="[data-pg-name="Quantity Field"]" wc-product-cart-button="[data-pg-name="Add to Cart Button"]" wc-product-cart-variation-template="[data-pg-name="Variation Template"]" wc-product-cart-variation-template-desc="[data-pg-name="Template Description"]" wc-product-cart-variation-template-price="[data-pg-name="Template Price"]" wc-product-cart-variation-template-availability="[data-pg-name="Template Availability"]" wc-product-cart-variation-template-not-available="[data-pg-name="Template Not Available"]" wc-product-cart-variation-template-price-unformat="true">
<div class="mb-4 row" data-pg-name="Repeated Attribute">
<label for="inputSize" class="col-form-label col-lg-3 col-md-4 col-sm-3 col-xl-2 text-dark" data-pg-name="Attribute Label">Size</label>
<div class="col-sm-auto">
<select class="form-select rounded-0" id="inputSize" data-pg-name="Attribute Selector">
<option selected>Choose an option</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
</select><a href="#" class="d-inline-block link-primary mt-2" data-pg-name="Attribute Clear"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.25em" height="1.25em" fill="currentColor" class="me-2">
<path d="M5.463 4.433A9.961 9.961 0 0 1 12 2c5.523 0 10 4.477 10 10 0 2.136-.67 4.116-1.81 5.74L17 12h3A8 8 0 0 0 6.46 6.228l-.997-1.795zm13.074 15.134A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12c0-2.136.67-4.116 1.81-5.74L7 12H4a8 8 0 0 0 13.54 5.772l.997 1.795z"/>
</svg><span class="align-middle">Clear</span></a>
</div>
</div>
<div class="mb-4 row" cms-no-export>
<label for="inputColor" class="col-form-label col-lg-3 col-md-4 col-sm-3 col-xl-2 text-dark">Color</label>
<div class="col-sm-auto">
<select class="form-select rounded-0" id="inputColor">
<option selected>Choose an option</option>
<option>Red</option>
<option>Yellow</option>
<option>Green</option>
</select>
</div>
</div>
<div class="mb-5 row">
<div class="col-12" data-pg-name="Selected Variation Wrapper">
<div data-pg-name="Variation Template">
<div class="alert alert-info">
<p class="fw-bold">Your selected product:</p>
<p data-pg-name="Template Description">Description</p>
<p data-pg-name="Template Price">Price</p>
<p data-pg-name="Template Availability">Availability</p>
</div>
<div class="alert alert-danger" data-pg-name="Template Not Available">
<p>Description</p>
</div>
</div>
<div class="row" data-pg-name="Quantity and Button Wrapper">
<label for="inputQty" class="col-form-label col-lg-3 col-md-4 col-sm-3 col-xl-2 text-dark">Quantity</label>
<div class="col-lg-2 col-sm-3" data-pg-name="Quantity Field">
<input type="number" class="form-control rounded-0" id="inputQty" placeholder="1" required="true"/>
</div>
<div class="col-md-12 mt-5">
<button type="submit" class="btn btn-danger fw-bold pb-2 pe-5 ps-5 pt-2 rounded-0" data-pg-name="Add to Cart Button">Add To Cart</button>
</div>
</div>
</div>
</div>
</form>
Hi, pasted and double checked, but still the problem persists.
I also created a fresh new html to match with single product (freestyle mode) and pasted the code you provided.
On exported theme, once the product is selected, the blue div is revealed, but without any content about selected variation.
This is the rendered html, where p elements are empty:
<div class="alert alert-info">
<p class="fw-bold">Your selected product:</p>
<p class="woocommerce-variation-description"></p>
<p class="woocommerce-variation-price"></p>
<p class="woocommerce-variation-availability"></p>
</div>
Found it in case it’s needed by someone.
To make this work, product available variations must be at least 2.
@akiccoo thank you for the update!