Can I duplicate the price block on the Product Details page?

FAQ: Can I duplicate the price block on the Product Details page?

Duplicate the price block - Option 1




To display a copy of the whole price block like it is shown above, the following code should be added into the HTML page section placed in the center container of the Product Details page:

<script type="text/javascript"> 

<!--

$(document).ready(function(){

    $('#optForm').clone().prependTo($('div.productDetailsSection'));

});

// -->  

</script>


Important Note:
If a product has product options, they will be duplicated as well. And if an option has a non-zero price and is specified by a user, then the product price will be updated automatically only for the top price block:





If such solution doesn't meet your requirements, then you can use an alternative code which will duplicate the price block only for products without options:

<script type="text/javascript">
$(document).ready(function(){
   if ($(".productOptionsBlock").html() == null) {
      $("#optForm").clone().prependTo(".productDetailsSection");
   }
});
</script>



Duplicate the Buy button - Option 2

You may also want to duplicate the 'Buy' button only:



To achieve this, the following code should be added to the Product Details page instead of the code described previously:

<script type="text/javascript">
$(document).ready(function(){
        $("#optForm").wrap("<div class='old'></div>");
    var placeholder="<div class='new'></div>";
    $(placeholder).clone().prependTo(".productDetailsSection");
    $("#optForm").clone().prependTo(".new");
    $('.new .total').css('display','none');
    $('.new .productOptionsBlock').css('display','none');
    $('.new .qty strong').css('display','none');
    $('.new .qty .textInput').css('display','none');
});
$(document).ajaxStop(function() {
    if ($(".productOptionsBlock select").length != 0) {
       for(i=0;i<$(".productOptionsBlock select").length;i++){
        if ($($(".new .productOptionsBlock select option:selected")[i]).text() != $($(".old .productOptionsBlock select option:selected")[i]).text()){ 
            $('.new').css('display','none');
        }
       }
    }

});
</script>

Important Notes:
1. If a product has a choice list option, then the duplicated 'Buy' button will disappear once the option is specified
2. If a product option has a non-zero price and is specified by a user, then the product price won't be updated automatically to reflect the option price

If such solution doesn't meet your requirements, then you can use an alternative code which will duplicate the 'Buy' button only for products without options:

<script type="text/javascript">
$(document).ready(function(){
 if ($(".productOptionsBlock").html() == null) { 
        $("#optForm").wrap("<div class='old'></div>");
 var placeholder="<div class='new'></div>";
 $(placeholder).clone().prependTo(".productDetailsSection");
 $("#optForm").clone().prependTo(".new");
 $('.new .total').css('display','none');
 $('.new .productOptionsBlock').css('display','none');
 $('.new .qty strong').css('display','none');
 $('.new .qty .textInput').css('display','none');
 }
});
</script>

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.