разрыв формы woocommerce_template_single_add_to_cart()
Возникла проблема с вёрсткой, а точнее воплощением её в жизнь. По задумке верстальщика все вариации товара должны быть вверху, но кнопка вывода конечной стоимости вариативного товара и кнопка добавления должны находиться в нижней части экрана, в отдельном row. Вопрос в том как реализовывать данную задумку без вреда для не вариативных товаров и вообще реализовывать. Чувствуется нехватка мат-части, но мне хотя бы знать куда копать.
Ссыль на демку:
http://chef-html.erpshop.ru/margarita.html
Вёрстка:
<div class="product-info">
<div class="row">
<div class="col-md-4 popup-gallery">
<div class="image">
<a href="img/data-pizza-margarita-640x640.jpg" title="Margarita" class="imagebox">
<img src="img/data-pizza-margarita-350x350.jpg" title="Margarita" alt="Margarita" id="image">
</a>
</div>
<div class="share" style="margin-top: 30px">
<!-- Share Button BEGIN 'share.pluso.ru' -->
<script type="text/javascript">(function() {
if (window.pluso)if (typeof window.pluso.start == "function") return;
if (window.ifpluso==undefined) { window.ifpluso = 1;
var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})();
</script>
<div class="pluso" data-background="transparent" data-options="small,square,line,horizontal,nocounter,theme=04" data-services="vkontakte,facebook,twitter,google,odnoklassniki,pinterest,tumblr"><div class="pluso-010011000101-04"><span class="pluso-wrap" style="background:transparent"><a href="file:///C:/Users/vladi/OneDrive/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/%D1%81%D0%B0%D0%B9%D1%82%D1%8B/%D0%B2%D0%B5%D1%80%D1%81%D0%BA%D0%B0/Pizza-shop/margarita.html" title="ВКонтакте" class="pluso-vkontakte"></a><a href="file:///C:/Users/vladi/OneDrive/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/%D1%81%D0%B0%D0%B9%D1%82%D1%8B/%D0%B2%D0%B5%D1%80%D1%81%D0%BA%D0%B0/Pizza-shop/margarita.html" title="Facebook" class="pluso-facebook"></a><a href="file:///C:/Users/vladi/OneDrive/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/%D1%81%D0%B0%D0%B9%D1%82%D1%8B/%D0%B2%D0%B5%D1%80%D1%81%D0%BA%D0%B0/Pizza-shop/margarita.html" title="Twitter" class="pluso-twitter"></a><a href="file:///C:/Users/vladi/OneDrive/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/%D1%81%D0%B0%D0%B9%D1%82%D1%8B/%D0%B2%D0%B5%D1%80%D1%81%D0%BA%D0%B0/Pizza-shop/margarita.html" title="Google+" class="pluso-google"></a><a href="file:///C:/Users/vladi/OneDrive/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/%D1%81%D0%B0%D0%B9%D1%82%D1%8B/%D0%B2%D0%B5%D1%80%D1%81%D0%BA%D0%B0/Pizza-shop/margarita.html" title="Одноклассники" class="pluso-odnoklassniki"></a><a href="file:///C:/Users/vladi/OneDrive/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/%D1%81%D0%B0%D0%B9%D1%82%D1%8B/%D0%B2%D0%B5%D1%80%D1%81%D0%BA%D0%B0/Pizza-shop/margarita.html" title="Pinterest" class="pluso-pinterest"></a><a href="file:///C:/Users/vladi/OneDrive/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/%D1%81%D0%B0%D0%B9%D1%82%D1%8B/%D0%B2%D0%B5%D1%80%D1%81%D0%BA%D0%B0/Pizza-shop/margarita.html" title="Tumblr" class="pluso-tumblr"></a><a href="http://pluso.ru/" class="pluso-more"></a></span></div></div>
<!-- Share Button END -->
</div>
</div>
<div class="col-md-8 product-center clearfix">
<h1>Margarita</h1>
<div class="description">
<strong>Product Code:</strong> Маргарита<br>
<strong>Availability:</strong> 996
</div>
<div class="options">
<h4>Available Options</h4>
<div id="option-237" class="option form-group">
<label>
<span class="required">*</span>Pizza weight:
</label><br>
<label for="option-value-17" class="radio-inline">
<img src="img/data-options-400g-50x50.png" alt="400 grs"><br>
<input type="radio" name="option[237]" value="17" id="option-value-17">
400 grs
</label>
<label for="option-value-18" class="radio-inline">
<img src="img/data-options-800g-50x50.png" alt="800 grs +60.00 $"><br>
<input type="radio" name="option[237]" value="18" id="option-value-18">
800 grs
<small>(+60.00 $)</small>
</label>
<label for="option-value-19" class="radio-inline">
<img src="img/data-options-1000g-50x50.png" alt="1200 grs +180.00 $"><br>
<input type="radio" name="option[237]" value="19" id="option-value-19">
1200 grs
<small>(+180.00 $)</small>
</label>
</div>
<div id="option-238" class="option form-group">
<label>
Free sauce:
</label><br>
<select name="option[238]">
<option value="0"> --- Please Select --- </option>
<option value="20">cheese</option>
<option value="21">garlic</option>
</select>
</div>
</div>
</div>
</div>
<div class="cart-area">
<div class="row">
<div class="col-md-4">
<div class="review">
<div class="stars" title="3 reviews">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="add-review">
<a class="btn btn-link btn-sm" onclick="$('a[href=\'#tab-review\']').trigger('click');">
<i class="fa fa-pencil-square-o"></i> Write a review
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="price">
<div>
<span class="price-fixed">270.00 $</span>
</div>
</div>
<div class="text-center" style="font-size: 12px"></div>
</div>
<div class="col-md-4">
<div class="cart">
<div class="add-to-cart clearfix" style="margin-top: 20px">
<!--span class="help-block">Qty:</span-->
<div class="input-group input-group-lg">
<input type="text" name="quantity" class="form-control" size="2" value="1">
<span class="input-group-btn">
<button type="button" id="button-cart" class="btn btn-success">
<i class="fa fa-shopping-cart"></i>
Add to Cart
</button>
</span>
</div>
<input type="hidden" name="product_id" size="2" value="44">
</div>
<div class="links">
<a class="btn btn-danger tooltip-right" title="" onclick="addToWishList('44');" data-original-title="Add to Wish List">
<i class="fa fa-heart-o"></i>
</a>
<a class="btn btn-link" onclick="addToCompare('44');">
<i class="fa fa-files-o"></i> Add to Compare
</a>
</div>
</div>
</div>
</div>
</div>
</div>