WC_Product_Variation Simplification

March 12, 2025 · AI Conversations

User
$variation = wc_get_product( $variation_id );

$product_variation = new WC_Product_Variation( $variation_id );
alternative

Assistant
Instead of using:

$variation = wc_get_product( $variation_id );
$product_variation = new WC_Product_Variation( $variation_id );

You can simplify it by directly retrieving the variation product:

### **Alternative:**

$product_variation = wc_get_product( $variation_id );

### **Why?**
– `wc_get_product( $variation_id )` already returns a `WC_Product` object.
– If `$variation_id` corresponds to a variation, it will return a `WC_Product_Variation` instance.
– There's no need to manually instantiate `WC_Product_Variation` again.

### **Check if it's a Variation:**
If you need to ensure that the retrieved product is a variation:

if ( $product_variation instanceof WC_Product_Variation ) {
    // It's a variation, proceed
}

This approach avoids unnecessary object creation and ensures better compatibility with WooCommerce's API. 🚀

User
foreach ($product->get_visible_children() as $variation_id) {
$variation = wc_get_product( $variation_id );

$product_variation = new WC_Product_Variation( $variation_id );
$image_tag = $product_variation->get_image();
$image_id = $variation->get_image_id();
}
above hangs when there are multiple

Assistant
The issue arises because of the redundant instantiation of `WC_Product_Variation`. You're already fetching the product variation using `wc_get_product()`, which returns a `WC_Product_Variation` instance if the ID is a variation. Instantiating `WC_Product_Variation` again for each iteration might be causing performance issues.

### **Optimized Code:**

foreach ($product->get_visible_children() as $variation_id) {   
    $variation = wc_get_product($variation_id);

    if ($variation instanceof WC_Product_Variation) {
        $image_tag = $variation->get_image(); // Directly get the image
        $image_id  = $variation->get_image_id();
        
        // Process as needed
    }
}

### **Why is this better?**
1. **Avoids Redundant Object Instantiation**
– `wc_get_product($variation_id)` already returns the `WC_Product_Variation` object, so there's no need to create `new WC_Product_Variation($variation_id)`.

2. **Prevents Performance Issues**
– If you have many variations, creating extra objects for each can be slow.

3. **Ensures Proper Type Checking**
– Using `instanceof WC_Product_Variation` ensures that `$variation` is actually a variation before using its methods.

Let me know if you need further optimizations! 🚀

User
<style>
#newproductlist span, #newproductlist h5{font-size: 13px!important;}
.pf_fields th, .pf_fields td, .pf_fields{border: none;}
.varfull{ margin-bottom:0px !important}
#newproductlistparent:before {
        content: "";
        position: absolute;
        background-color: #eee;
        right: 0;
        width: 50%;
        height: 100%;
        z-index: -1;
        top: 0;
}
.row{ margin:0 -15px;}
.pf_btn_cls{padding: 5px 20px 2px; font-size: 12px;}
.pf_fields{font-size: 14px; width: 100%; margin-bottom: 25px!important;}
.pf_fields input[type="text"]{padding: 0px 8px;font-size: 12px;}
.pf_fields select{padding: 3px 8px 2px;font-size: 12px;}
.pf_fields th, .pf_fields td{padding: 2px 2px 1px;font-size: 13px;}
#ck-button label input, #ck-button2 label input {
   margin-right:100px;
}

#ck-button, #ck-button2 {
    overflow:auto;
    float:left;
    width: 100%;
        margin-bottom: 25px;
}
.cip .uvc-sub-heading.ult-responsive{margin: 0px!important;}
input.filterCheckox {
    cursor: pointer;
}
.singlefilter input[type="checkbox"] {
    cursor: pointer;
}
#ck-button label, #ck-button2 label {
    float:left;
}

#ck-button label span, #ck-button2 label span {
    text-align:center;
    display: block;
    border: 2px solid #910029;
    border-radius: 5px;
    padding: 10px 20px;
    margin-right: 30px;
    cursor: pointer;
    color:  #910029;
}

#ck-button label input, #ck-button2 label input {
    position:absolute;
    top:-20px;
    opacity: 0;
}

#ck-button input:checked + span, #ck-button2 input:checked + span {
    background-color:#910029;
    color:#fff;
}
.pr_btn_cls{font-size: 14px; cursor: pointer; background: #791227; color: #fff!important; border-radius: 5px; padding: 5px 25px 2px;}
.edit_pro{padding: 9px 29px 5px;}
.edit_pro:hover {
  opacity: 0.8;
}
.summaryView p{font-size: 14px; margin-bottom:5px;}
.summaryView h4{margin-bottom:3px; margin-top: 20px;}
#newproductlist{ height:auto !important; margin-bottom:40px;margin-top:0px!important;}

#projectfield h4{ font-size:18px !important}
#projectfield h5{ font-size:14px !important}

#regForm label{font-size:13px !important}
</style>
<script>
/popup/jquery.fancybox.js">
</script>
<script>
/popup/jquery.fancybox-buttons.js">
</script>
<script>
/popup/jquery.fancybox-thumbs.js">
</script>
<script>
/popup/jquery.fancybox-media.js">
</script>
<script>
jQuery(".fancybox-pdf").fancybox({
          'width'  : 500,
          'height' : 400,
          'autoSize' : false
      });
</script>

Your Details:-
Your Name*

Please enter Your Name
Company*

Please enter Company Name
Contact No*

Please enter Contact No
Email*

Please enter Email ID

Project Details:
Project Name*

Please enter project name

Address

Click to enter Contractor Details

Contractor:
Company*

Contact No*

Email*

Click to enter Architect Details

Architect:
Company*

Contact No *

Email*

Click to enter Distributor Details

Distributor:
Company*

Contact No *

Email*

Email

Submitted Details
Your Name:
Company:
Contact No:
Email:

Project Details
Project Name:
Address:

Contractor Details
Company:
Contact No:
Email:

Architect Details
Company:
Contact No:
Email:

Distributor Details
Company:
Contact No:
Email:

<style>
.form-button-div{display:flex; justify-content:center; margin-top:30px}
.innerform h5{  margin-bottom: 0px!important;}
.container{ max-width:1200px; margin:auto}
.accordion-sb{ clear: both;}
.accordion-sb ul{ padding:0px; margin:0px;}
.accordion-sb ul li { list-style:none; margin-bottom: 13px !important;}
.accordion-sb ul li .heading{ border-bottom: 1px solid #00000021; padding: 14px 20px 10px; position:relative}
.accordion-sb ul li .heading:before {
        content: "";
        position: absolute;
        right: 30px;
        top: 16px;
        width: 8px;
        height: 8px;
        border-left: #910029 solid 2px;
        border-bottom: #910029 solid 2px;
        transform: rotate(-45deg);
}
.accordion-sb ul .child_list_pro {border: 1px solid #910029;
  border-radius: 10px;
  background-color: #f8f8f8;}
.accordion-sb ul li .heading h3{color: #910029 !important; padding-left: 0px;  font-size: 15px; line-height: 18px; }
.accordion-content{ padding:15px 15px; display:none}
.accordion-content .sub_heading{ margin-bottom:12px}
.accordion-content h4{font-size:15px !important; border-bottom: 1px solid #00000021;padding: 7px 0px; padding-left: 24.2px; margin: 0 0 21.73913043px 0; position:relative}
.accordion-content h4:before {
        content: "";
        position: absolute;
        left: 0px;
        top: 14px;
        width: 8px;
        height: 8px;
        border-left: #666 solid 2px;
        border-bottom: #666 solid 2px;
        transform: rotate(-135deg);
}
.accordion-content .sub_heading.active h4:before{transform: rotate(-45deg);}
.accordion-content .content{padding-left: 24.2px; padding-top:5px; font-size: 14px; display:none}
</style>

email alert

<script>
jQuery(document).ready(function() {
        //$("#emailalert").fancybox().trigger('click');
        jQuery('.emailalert').toggleClass('is-visible');
    });
</script>

X

Your project details have been successfully sent to your email. In case if you do not receive the email, please do check your junk/spam folders too. Depending on the number of products added, the attachment size may be bigger than that supported by your mailbox.

okay

<script>
jQuery(document).ready(function() {
    jQuery('input[type=radio][name=downloadbut]').change(function() {
    if (this.value == 'Download') {
      jQuery('#hidedd').val('Download');
    }
    else if (this.value == 'Email') {
        jQuery('#hidedd').val('Email');
    }
    else{
      jQuery('#hidedd').val('Download');
    }
  });
});
</script>
<style>
* {
  box-sizing: border-box;
}

.dmessage{
  color: #000;
    font-size: 18px;
    border: 2px solid #8a8a8a;
    padding: 10px 20px;
    text-align: center;
    width: 100%;
    float: left;
    margin-bottom: 20px;
    border-radius: 5px;
}
.emessage{
  color: #000;
    font-size: 18px;
    border: 2px solid #8a8a8a;
    padding: 10px 20px;
    text-align: center;
    width: 100%;
    float: left;
    margin-bottom: 20px;
    border-radius: 5px;
}
#regForm {
  padding: 0px 0px;
}
.formeachfielddiv{
  margin-bottom: 15px;
}
.error-form{
  color: red;
  margin-top: 5px;
}
button.btn.cancel {
    top: 0px;
    position: absolute;
    right: 0px;
    padding: 4px 10px;
}
form h1{
  font-size: 30px;
  margin-bottom: 10px;
}
.formsec{
  float: left;
  width: 100%;
}
h1 {
  text-align: center;  
}
form h5{
    font-size: 17px;
    margin-bottom: 5px;
    font-weight: 600;
}
form h4{
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 900; 
}
#regForm input[type="email"], #regForm input[type="text"] {
  padding: 10px;
  width: 100%;
  font-size: 13px;
  border: 1px solid #aaaaaa;
  height: 30px;
}


button {
  background-color: #910029;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 5px;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #910029;
}

.open-button {
  background-color: #910029;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  border: 1.5px solid #910029;
  border-radius: 5px;
  font-size: 15px;
  margin-right: 20px;
}
#ck-button {
    overflow: auto;
    /* float: left; */
    width: 100%;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    float: none!important;
}

div#newproductlistparent {
    background-color: #eee;
    padding: 0px 0px 30px 0px;
    margin-top: 0px!important;
}
.filtersection{
      float: none!important;
    width: 100%;
    margin-top: 40px;
    margin-left: auto!important;
    margin-right: auto!important;
    max-width: 1200px;
    /* display: table-column; */
    position: relative;
}
/* The popup form - hidden by default */
.form-popup1 {
  display: none;
  position: fixed;
  top: 20px;
  right: 15px;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
 .emailalert {
    position: absolute;
    z-index: 10000; /* 1 */
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
}
.emailalert.is-visible {
    visibility: visible;
}
.emailalert.is-visible .modal-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.emailalert.is-visible .modal-transition  {
  opacity: 1;
}
.emailalert .modal-content{
  border: none!important;
}
.container{ padding:0 15px}

#newproductlistparent h3 {
  font-size: 18px !important;
  color:#791227 !important;
  margin-bottom:0px !important;
}
.tab h4{    font-size: 18px !important; color:#791227 !important;}
.tab h5{    font-size: 14px !important;}


@media (max-width:  1023px){
	
	.col-sm-7.left-section {  width: 50%;}
	.col-sm-5.right-section {  width: 50%;}
	.btn-group{display:flex; flex-wrap:wrap; gap:10px 10px}	
		.btn-group button{height:40px}	
}


@media (max-width:  767px){
	.col-sm-7.left-section {  width: 100%;}
	.col-sm-5.right-section {  width: 100%;}	
.emailalert .modal-wrapper.modal-transition.new-modal-wrapper {
    width: 91%;
}

#newproductlistparent:before {
    display:none
}
div#newproductlistparent {
        background-color: #eee;
        padding: 20px 15px 30px 15px;
        margin-top: 0px !important;
        float: left;
        width: 100%;
}
.submitdiv  .container{ padding:0 15px 30px 0px;}
        .single .wpb_wrapper ul {
                margin-left: 15px;
                margin-right: 15px;
        }
	

	.accordion-content {
        padding: 15px 0px;
	}
}
@media (max-width:  480px){
	.accordion-content .content{ margin-left:0px;                 padding-left: 0;} 
	.product-list-child{         background: #f8f8f8;}
	.pf_fields th, .pf_fields td {
        padding: 2px 8px 1px;
        font-size: 13px;
        display: block;
}
.pf_fields input[type="text"], .product_code, select {
        padding: 4px 8px;
        font-size: 12px;
        width: 100%;
}
	
}

@media (max-width:  992px){

	.product-list-child{         background: #f8f8f8;}
	.pf_fields th, .pf_fields td {
        padding: 2px 8px 1px;
        font-size: 13px;
        display: block;
}
.pf_fields input[type="text"], .product_code, select {
        padding: 4px 8px;
        font-size: 12px;
        width: 100%;
}
	
}
</style>
<script>
function nextPrev() {
var yourname = jQuery('input[name="yourname"]').val();
var yourcompany = jQuery('input[name="yourcompany"]').val();
var yourcontactno = jQuery('input[name="yourcontactno"]').val();
var youremail = jQuery('input[name="youremail"]').val();
var projectname = jQuery('input[name="projectname"]').val();

if(yourcompany == ''){
 jQuery('.error-form-company').show();
  return false;
}
else if(yourname == ''){
 jQuery('.error-form-name').show();
  return false;
}
else if(yourcontactno == ''){
 jQuery('.error-form-contact').show();
  return false;
}
else if(youremail == ''){
 jQuery('.error-form-email').show();
  return false;
}
else if(projectname == ''){
 jQuery('.error-form-projectname').show();
  return false;
}

else{
  
}

    // ... the form gets submitted:
   // document.getElementById("regForm").submit();
   document.getElementById("nextBtn").innerHTML = "Please wait...";
   jQuery.when(
   jQuery.ajax({
        type: "POST",
        url: '<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php', 
        // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
        data: {
            'action':'submitbuilder_save', // This is our PHP function below
            'project_name': jQuery('input[name="projectname"]').val(),
            'address': jQuery('textarea[name="projectaddress"]').val(),
            'contractor_company': jQuery('input[name="contractcompany"]').val(),
            'contractor_contactno': jQuery('input[name="contractorcontactno"]').val(),
            'contractor_email': jQuery('input[name="contractoremail"]').val(),
            'architect_company': jQuery('input[name="architectcompany"]').val(),
            'architect_contactno': jQuery('input[name="architectcontactno"]').val(),
            'architect_email': jQuery('input[name="architectemail"]').val(),
            'distrubutor_company': jQuery('input[name="distributorcompany"]').val(),
            'distrubutor_contactno': jQuery('input[name="distributorcontactno"]').val(),
            'distrubutor_email': jQuery('input[name="distributoremail"]').val(),
            'your_name': jQuery('input[name="yourname"]').val(),
            'your_detail': jQuery('input[name="yourcompany"]').val(),
            'contact_no': jQuery('input[name="yourcontactno"]').val(),
            'email': jQuery('input[name="youremail"]').val(),
            'from_email_download': jQuery('input[name="download_or_email"]').val(),
            'product_ids': localStorage.getItem("prd_list"),
        },
        success:function(returnhtml){   
          result8 =   returnhtml;
          localStorage.setItem('pd_id', returnhtml);
        },
        error: function(errorThrown){
            //window.alert(errorThrown);
        }
    }),
  ).then(function() {
    //alert('Project Submitted successfully');
    document.getElementById("nextBtn").innerHTML = "submit"; 
    
    var res = result8;
    if(jQuery('input[name="download_or_email"]').val() == 'Download') {
      jQuery('input[name="download_or_email"]').val('');
      jQuery('input[name="projectname"]').val('');
      jQuery('textarea[name="projectaddress"]').val('');
      jQuery('input[name="contractcompany"]').val('');
      jQuery('input[name="contractorcontactno"]').val('');
      jQuery('input[name="contractoremail"]').val('');
      jQuery('input[name="architectcompany"]').val('');
      jQuery('input[name="architectcontactno"]').val('');
      jQuery('input[name="architectemail"]').val('');
      jQuery('input[name="distributorcompany"]').val('');
      jQuery('input[name="distributorcontactno"]').val('');
      jQuery('input[name="distributoremail"]').val('');
      jQuery('input[name="yourname"]').val('');
      jQuery('input[name="yourcompany"]').val('');
      jQuery('input[name="yourcontactno"]').val('');
      jQuery('input[name="youremail"]').val(''); 
      jQuery('#allDone').css('display', 'none');
      jQuery('#allDoneNew').html('<div class="dmessage">Thank you for using the Studco Submittal Builder. You may download or email your submission using the buttons below.</div><form style="float:left;display:inline;" action="https://studcosystems.com.au/submit-test/" method="POST"><div class="col-sm-12 variationbutton" style="padding:30px;"> <input type="hidden" value="'+ res +'" name="id"> <input type="hidden" value="download" name="mail_or_download"> <button type="submit" class="open-button" onclick="downloadPdf1('+ res +')">Download Project</button></button></div></form><form style="float:left;display:inline;" action="https://studcosystems.com.au/submit-test/" method="POST"><div class="col-sm-12 variationbutton"  style="padding:30px;"> <input type="hidden" value="'+ res +'" name="id">  <input type="hidden" value="mail" name="mail_or_download"> <button type="submit" class="open-button" onclick="sendEmail('+ res +')">Email Project</button></button></div></form>');
    } else {
      jQuery('input[name="download_or_email"]').val('');
      jQuery('input[name="projectname"]').val('');
      jQuery('textarea[name="projectaddress"]').val('');
      jQuery('input[name="contractcompany"]').val('');
      jQuery('input[name="contractorcontactno"]').val('');
      jQuery('input[name="contractoremail"]').val('');
      jQuery('input[name="architectcompany"]').val('');
      jQuery('input[name="architectcontactno"]').val('');
      jQuery('input[name="architectemail"]').val('');
      jQuery('input[name="distributorcompany"]').val('');
      jQuery('input[name="distributorcontactno"]').val('');
      jQuery('input[name="distributoremail"]').val('');
      jQuery('input[name="yourname"]').val('');
      jQuery('input[name="yourcompany"]').val('');
      jQuery('input[name="yourcontactno"]').val('');
      jQuery('input[name="youremail"]').val(''); 
      jQuery('#allDone').css('display', 'none');
      jQuery('#allDoneNew').html('<div class="emessage">Thank you for your submission. Please click send email button</div><form action="https://studcosystems.com.au/submit-test/" method="POST"><div class="col-sm-12 variationbutton"  style="padding:30px;"> <input type="hidden" value="'+ res +'" name="id">  <input type="hidden" value="mail" name="mail_or_download"> <button type="submit" class="open-button" onclick="sendEmail('+ res +')">Send Email</button></button></div></form>');
    }
  });

}

function downloadPdf1(id) {
jQuery.when(
   jQuery.ajax({
      url: '<?php echo site_url() ?>/wp-admin/admin-ajax.php',
      method: 'POST',
      data: {
        'action': 'submitbuilder_downloadPdf',
        'id': id
      },
      xhrFields: {
          responseType: 'blob',
          type: "application/pdf",

      },
      success: function (data) {
      }
    }),
  ).then(function() {
    //alert('Downloaded successfully');
    //jQuery('#allDone').css('display','none');  
    //startANewSubmission();
  });
}

function sendEmail(id) { 
  jQuery.when(
  jQuery.ajax({
            type: "POST",
            url: '<?php echo site_url() ?>/wp-admin/admin-ajax.php', 
            // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
            data: {
                'action':'submitbuilder_email', // This is our PHP function below
                'id': id,
            },
            dataType: 'text',                                   //solution code
            mimeType: 'text/plain; charset=x-user-defined',
            context: document.body,
            success:function(returnhtml){   
              result8 =   returnhtml;
            },
            error: function(errorThrown){
                //window.alert(errorThrown);
            }
        }),

  ).then(function() {
    //alert('Mail Send successfully');
    //jQuery('#allDone').css('display','none');  
    //startANewSubmission();
  });
}

function startANewSubmission() {
  if (localStorage.getItem("prd_list") != null && localStorage.getItem("prd_list") != undefined && localStorage.getItem("prd_list") != '') {
    var arr = localStorage.getItem("prd_list").split(',');
    for (i=0; i<arr.length; i++) {
      jQuery('#button_enanle_disable_'+ arr[i]).css('pointer-events','auto');
      jQuery('#button_enanle_disable_'+ arr[i]).text('Add to project');
    }
  }
  localStorage.removeItem("prd_list");
  jQuery('#newproductlist').html('');
  jQuery('#newproductlistparent').css('display', 'none');
  jQuery('input[name="download_or_email"]').val('');
  //document.getElementById("myForm").style.display = "block";
  closeForm();
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab > 4 ? 4 : currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab > 4 ? 4 : currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
</script>
<script>
jQuery(document).ready(function(){ 
  jQuery("#filtersearch").on("keyup", function() {
   if (jQuery(this).val().length >= 3) {
    
   
    var searchvalue = jQuery(this).val().toLowerCase();
   // alert(searchvalue);
//alert(parentid);
  jQuery('#productlist').html('');
  jQuery('#productlist').html('<div class="loader"></div>');
    //alert(value);
  jQuery.ajax({
            url: '<?php echo site_url() ?>/wp-admin/admin-ajax.php', 
            async: false,
            cache: false,
            data: {
                'action':'search1', // This is our PHP function below
                'search' : searchvalue
            },
            success:function(returnhtml){  
                result1 = returnhtml;   
              jQuery('#productlist').html(result1);
              //jQuery('#productlist').html(result2);
              disableButton();                
            },

            error: function(errorThrown){
                //window.alert(errorThrown);
            }
        });
   }

});
  });

function callsubcat(id) {
  jQuery('.filtervar').val('');
  jQuery('.leftfilters').hide();
  jQuery('#subcatlist').html('');
  jQuery('#productlist').html('');
  jQuery('#productlist').html('<div class="loader"></div>');
jQuery.when(
  jQuery.ajax({
            url: '<?php echo site_url() ?>/wp-admin/admin-ajax.php', 
            // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
            data: {
                'action':'submitbuilder1', // This is our PHP function below
                'id' : id // This is the variable we are sending via AJAX
            },
            success:function(returnhtml){     
                result1 = returnhtml;   
            },
            error: function(errorThrown){
                //window.alert(errorThrown);
            }
        }),

  jQuery.ajax({
            url: '<?php echo site_url() ?>/wp-admin/admin-ajax.php', 
            // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
            data: {
                'action':'submitbuilder2', // This is our PHP function below
                'id' : id // This is the variable we are sending via AJAX
            },
            success:function(returnhtml){                          
            result2 = returnhtml; 
            },
            error: function(errorThrown){
               // window.alert(errorThrown);
            }
        })

  ).then(function() {
      jQuery('#subcatlist').html(result1);
      jQuery('#productlist').html(result2);
      disableButton();
  });
};
</script>
<script>
function callfilter(id) {
var subcatid = jQuery("input[name='childcat']:checked").data('subcatid');
var newid = jQuery("input[name='childcat']:checked").val();
jQuery('#filterlist').html('');
jQuery('#productlist').html('');
jQuery('#productlist').html('<div class="loader"></div>');
jQuery.when(
  jQuery.ajax({
            url: '<?php echo site_url() ?>/wp-admin/admin-ajax.php', 
            // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
            data: {
                'action':'submitbuilder3', // This is our PHP function below
                'id' : subcatid // This is the variable we are sending via AJAX
            },
            success:function(returnhtml){     
                result3 = returnhtml;   
            },
            error: function(errorThrown){
                //window.alert(errorThrown);
            }
        }),

  jQuery.ajax({
            url: '<?php echo site_url() ?>/wp-admin/admin-ajax.php', 
            // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
            data: {
                'action':'submitbuilder4', // This is our PHP function below
                'ssid' : newid // This is the variable we are sending via AJAX
            },
            success:function(returnhtml){                          
            result4 = returnhtml; 
            },
            error: function(errorThrown){
                //window.alert(errorThrown);
            }
        })

  ).then(function() {
      jQuery('#filterlist').html(result3);
      jQuery('#productlist').html(result4);
      disableButton();
  });
};



function filtervar(id) {
var firstfiltername = jQuery( ".singlefilter input" ).first().attr('name');
var firstfiltervalue = jQuery( ".singlefilter input:checked" ).first().val();
var coatingname = jQuery("input[name='pa_coating']:checked").attr('name');
var widthname = jQuery("input[name='pa_width']:checked").attr('name');
var milsname = jQuery("input[name='pa_mils']:checked").attr('name');
var legheightname = jQuery("input[name='pa_leg-height-in']:checked").attr('name');
var subcatid = jQuery("input[name='childcat']:checked").val();
var subcatname = jQuery("input[name='childcat']:checked").data('subcatname');
var coatingid = jQuery("input[name='pa_coating']:checked").val();
var widthid = jQuery("input[name='pa_width']:checked").val();
var milsid = jQuery("input[name='pa_mils']:checked").val();
var legheightid = jQuery("input[name='pa_leg-height-in']:checked").val();



jQuery('#productlist').html('');
jQuery('#productlist').html('<div class="loader"></div>');

jQuery.when(
  jQuery.ajax({
            url: '<?php echo site_url() ?>/wp-admin/admin-ajax.php', 
            // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
            data: {
                'action':'submitbuilder5', // This is our PHP function below
                'id' : id, // This is the variable we are sending via AJAX
                'firstfiltername' : firstfiltername,
                'firstfiltervalue' : firstfiltervalue,
                'coatingname' : coatingname,
                'widthname' : widthname,
                'milsname' : milsname,
                'legheightname' : legheightname,
                'subcatid': subcatid,
                'subcatname': subcatname,
                'coatingvalue': coatingid,
                'widthvalue': widthid,
                'milsvalue': milsid,
                'legheightvalue': legheightid

            },
            success:function(returnhtml){     
                result5 = returnhtml;   
            },
            error: function(errorThrown){
                //window.alert(errorThrown);
            }
        }),

  jQuery.ajax({
            url: '', 
            // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
            data: {
                'action':'submitbuilder5', // This is our PHP function below
                'id' : id // This is the variable we are sending via AJAX
            },
            success:function(returnhtml){                          
            result6 = returnhtml; 
            },
            error: function(errorThrown){
                //window.alert(errorThrown);
            }
        })

  ).then(function() {
      jQuery('#productlist').html(result5);
      disableButton();
  });

};

function storeDataInLocalStorage(id) {
  var setItem = 0;
  if (localStorage.getItem("prd_list") != null && localStorage.getItem("prd_list") != undefined && localStorage.getItem("prd_list") != '') {  
    var arr = localStorage.getItem("prd_list").split(",");
    if(arr.includes(id.toString()))  
      {  
          //alert("Already added in product list")
      }   
      else  
      {  
            var prd_list = localStorage.getItem("prd_list") + ',' + id; 
        localStorage.setItem("prd_list", prd_list);
        setItem = 1;  
      } 
  } else {
    localStorage.setItem("prd_list", id);
    setItem = 1;
  }

  if (setItem == 1) {
    getSavedProduct(id, 'last');  
  }
  location.reload();
};

function getSavedProduct(id, firstOrLast) {
jQuery.when(
  jQuery.ajax({
            url: '<?php echo site_url() ?>/wp-admin/admin-ajax.php', 
            // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
            data: {
                'id' : id,
                'action': 'submitbuilder_prdlist',
                'firstOrLast': firstOrLast
            },
            success:function(returnhtml){     
                result7 = returnhtml;   
            },
            error: function(errorThrown){
                //window.alert(errorThrown);
            }
        }),
  ).then(function() {
    jQuery('#newproductlistparent').css('display', 'block');
    if (firstOrLast == 'first') {     
      jQuery('#newproductlist').html(result7);
    } else {
      jQuery('#newproductlist').append(result7);
      //alert("Product Added in list");
    }     
    disableButton();
  });
};

if (localStorage.getItem("prd_list") != null && localStorage.getItem("prd_list") != undefined && localStorage.getItem("prd_list") != '') {
  jQuery('#newproductlistparent').css('display', 'block');
  getSavedProduct(localStorage.getItem("prd_list"), 'first'); 
};

function deleteItem(id) {
  var arr = localStorage.getItem("prd_list").split(',');
  const index = arr.indexOf(id.toString());
  if (index > -1) {
    arr.splice(index, 1);
  } 
  if (arr.length > 0) {
    localStorage.setItem("prd_list", arr.toString());
    getSavedProduct(localStorage.getItem("prd_list"), 'first');
  } else {
    localStorage.setItem("prd_list", arr.toString());
    localStorage.removeItem("prd_list");
    jQuery('#newproductlist').html('');
    jQuery('#newproductlistparent').css('display', 'none');
  }
  jQuery('#button_enanle_disable_'+ id).css('pointer-events','auto');
  jQuery('#button_enanle_disable_'+ id).text('Add to project');
  disableButton();
}

function deleteallitem() {
    localStorage.removeItem("prd_list");
    localStorage.removeItem("pd_id");
    
    //jQuery('#newproductlist').html('');
    //jQuery('#newproductlistparent').css('display', 'none');
    window.location.href=window.location.href;
}

function disableButton() {
  if (localStorage.getItem("prd_list") != null && localStorage.getItem("prd_list") != undefined && localStorage.getItem("prd_list") != '') {
    var arr = localStorage.getItem("prd_list").split(',');
    for (i=0; i<arr.length; i++) {
      jQuery('#button_enanle_disable_'+ arr[i]).css({"pointer-events": "none", "color": "#000", "border": "1px solid #000"});
      jQuery('#button_enanle_disable_'+ arr[i]).text('Added');
    }
  }
}


jQuery(document).ready(function ($) {
    $(".heading").click(function () {
        $(this).next(".accordion-content").slideToggle();
        $(this).toggleClass("active");
    });

    $(".sub_heading").click(function () {
        $(this).next(".content").slideToggle();
        $(this).toggleClass("active");
    });
});
</script>
<style>
.d-flex{display:flex; gap:2px 5px; align-items:center}

  .submitdiv label{
    font-size: 15px;
  }
  div#projectfield {
    margin-top: 30px;
}
  input[type='radio'] {
    box-sizing: border-box;
    appearance: none;
    background: white;
    outline: 2px solid #333;
    border: 3px solid white;
    width: 14px;
    height: 14px;
    margin-left: 20px;
}
input[type='radio']:checked {
    background-color: red!important;
    outline: 2px solid #333;
}
.leftfilters{
  float: left;
  width: 100%;
  margin-bottom: 20px;
}
.leftfilters label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.labelsalg{
  margin-bottom:10px;
  font-size: 16px;
    font-weight: 900;
}
div#subcatlist {
    margin-top: 15px;
}
.panel{
  padding: 0px 10px!important;
}
.totalsfooter{
  margin-top: 0px!important;
}
ul.wooc_sclist {
    margin-left: 0px;
}
.rightside{
  float: right;
}
.filtercol{
  float: left;
  width: 100%;
}
.filtercol label {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-top: -3px;
}
input#pa_coating, input#pa_width, input#pa_coating, input#pa_mils, input#pa_leg-height-in {
    float: left;
    display: inline;
    margin-left: 0px;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #791227; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
<script>
jQuery(document).ready(function() {

  jQuery("#contractcompanycheck").click(function() {  
    if (jQuery(this).is(':checked')) {
      jQuery('#contractorfield').show();
      jQuery('#contractcompany').attr('required', '');
      jQuery('#contractorcontactno').attr('required');
      jQuery('#contractoremail').attr('required', '');
    } else {
      jQuery('#contractorfield').hide();
      jQuery('#contractcompany').removeAttr('required');
      jQuery('#contractorcontactno').removeAttr('required');
      jQuery('#contractoremail').removeAttr('required');   
      jQuery('#contractcompany').val('');
      jQuery('#contractorcontactno').val('');
      jQuery('#contractoremail').val('');    
    }
  });
  
  jQuery("#architectcompanycheck").click(function() { 
    if (jQuery(this).is(':checked')) {
      jQuery('#architectfield').show();
      jQuery('#architectcompany').attr('required', '');
      jQuery('#architectcontactno').attr('required', '');      
      jQuery('#architectemail').attr('required');
    } else {
      jQuery('#architectfield').hide();
      jQuery('#architectcompany').removeAttr('required');
      jQuery('#architectcontactno').removeAttr('required');      
      jQuery('#architectemail').removeAttr('required');
      jQuery('#architectcompany').val('');
      jQuery('#architectcontactno').val('');      
      jQuery('#architectemail').val('');   
    }
  });

  jQuery("#distributorcompanycheck").click(function() {
    if (jQuery(this).is(':checked')) {
      jQuery('#distributorfield').show();
      jQuery('#distributorname').attr('required', '');
      jQuery('#distributorcontactno').attr('required', '');
      jQuery('#distributoremail').attr('required');
    } else {
      jQuery('#distributorfield').hide();
      jQuery('#distributorname').removeAttr('required');
      jQuery('#distributorcontactno').removeAttr('required');      
      jQuery('#distributoremail').removeAttr('required');
      jQuery('#distributorname').val('');
      jQuery('#distributorcontactno').val('');   
      jQuery('#distributoremail').val('');

    }  
  });
  });
</script>

above is the complete code

Assistant
Your code appears to be a large and complex WordPress template with WooCommerce integration, category filtering, AJAX functionality, and a product selection system.

### **Issues and Optimization Suggestions**
Here are some improvements and fixes based on your code:

—

### **1. Remove Unnecessary `require_once` Calls**
You don't need to manually include WordPress core files like `wp-config.php` and `wp-load.php` at the top of your template. WordPress handles this automatically when loading templates.

**Remove:**

require_once dirname( dirname( dirname( dirname( __FILE__ ) ) ) ) . '/wp-config.php';
require_once dirname( dirname( dirname( dirname( __FILE__ ) ) ) ) . '/wp-load.php';
require_once dirname( dirname( dirname( dirname( __FILE__ ) ) ) ) . '/wp-includes/wp-db.php';
require_once dirname( dirname( dirname( dirname( __FILE__ ) ) ) ) . '/wp-blog-header.php';

—

### **2. Optimize Product Variations Retrieval**
Currently, you're using:

$variation = wc_get_product( $variation_id );
$product_variation = new WC_Product_Variation( $variation_id );
$image_tag  = $product_variation->get_image();
$image_id   = $variation->get_image_id();

Instead, just use:

$variation = wc_get_product( $variation_id );

if ($variation instanceof WC_Product_Variation) {
    $image_tag = $variation->get_image();
    $image_id  = $variation->get_image_id();
}

This avoids redundant object instantiation.

—

### **3. Optimize Product Query Performance**
Currently, you're fetching products using:

$args = array(
    'post_type'             => 'product',
    'post_status'           => 'publish',
    'ignore_sticky_posts'   => 1,
    'posts_per_page'        => '-1',
);
$args['tax_query']  = array(
    array(
        'taxonomy'      => 'product_cat',
        'field'         => 'term_id',
        'terms'         => $child_cat_obj->term_id,
        'operator'      => 'IN',
    ),
    'relation' => 'AND',
);
$all_products = wc_get_products($args);

### **Suggested Fix:**
– **Limit `posts_per_page`**: Setting `'-1'` loads all products, which is inefficient.
– **Use `get_posts()` Instead of `wc_get_products()`**: `wc_get_products()` loads all product objects, increasing memory usage.

**Optimized Query:**

$args = array(
    'post_type'      => 'product',
    'post_status'    => 'publish',
    'posts_per_page' => 20, // Adjust as needed
    'tax_query'      => array(
        array(
            'taxonomy' => 'product_cat',
            'field'    => 'term_id',
            'terms'    => $child_cat_obj->term_id,
        ),
    ),
);
$all_products = get_posts($args);

Use `get_posts()` to fetch only necessary data without excessive memory consumption.

—

### **4. Optimize AJAX Calls for Better Performance**
Your AJAX calls are executing multiple queries for product filtering and retrieval. Consider:
– **Caching Queries**: Store results in a transient (`set_transient()`) to avoid repeated database hits.
– **Using `wp_send_json()` Instead of `echo`**: This ensures proper JSON formatting.

**Example AJAX Optimization**

function submitbuilder_filter() {
    check_ajax_referer('ajax_nonce', 'security');

    $category_id = isset($_POST['id']) ? intval($_POST['id']) : 0;
    
    if ($category_id > 0) {
        $cache_key = 'filtered_products_' . $category_id;
        $products = get_transient($cache_key);

        if (!$products) {
            $args = array(
                'post_type'      => 'product',
                'post_status'    => 'publish',
                'posts_per_page' => 20,
                'tax_query'      => array(
                    array(
                        'taxonomy' => 'product_cat',
                        'field'    => 'term_id',
                        'terms'    => $category_id,
                    ),
                ),
            );
            $products = get_posts($args);
            set_transient($cache_key, $products, HOUR_IN_SECONDS);
        }

        wp_send_json_success($products);
    } else {
        wp_send_json_error('Invalid category ID');
    }
}
add_action('wp_ajax_submitbuilder_filter', 'submitbuilder_filter');
add_action('wp_ajax_nopriv_submitbuilder_filter', 'submitbuilder_filter');

—

### **5. Fix Long Page Load Time Due to `get_terms()`**
You're calling:

$parent_product_cats = get_terms($taxonomy, array(
    'parent' => 0, 
    'orderby' => 'menu_order', 
    'hide_empty' => true, 
    'exclude' => array(34, 31)
));

For better performance, add caching:

$cache_key = 'parent_product_cats';
$parent_product_cats = get_transient($cache_key);

if (!$parent_product_cats) {
    $parent_product_cats = get_terms($taxonomy, array(
        'parent' => 0, 
        'orderby' => 'menu_order', 
        'hide_empty' => true, 
        'exclude' => array(34, 31)
    ));
    set_transient($cache_key, $parent_product_cats, DAY_IN_SECONDS);
}

—

### **6. Fix `jQuery.when()` Chaining in AJAX Calls**
You're using:

jQuery.when(
    jQuery.ajax({ ... }),
    jQuery.ajax({ ... })
).then(function() {
    // Callback function
});

This makes multiple requests simultaneously, which can lead to race conditions.

**Solution:** Chain `.done()` instead of `.when()`

jQuery.ajax({
    url: ajaxurl,
    type: "POST",
    data: { action: "submitbuilder1", id: id },
}).done(function(result1) {
    jQuery("#subcatlist").html(result1);
    return jQuery.ajax({
        url: ajaxurl,
        type: "POST",
        data: { action: "submitbuilder2", id: id },
    });
}).done(function(result2) {
    jQuery("#productlist").html(result2);
});

—

### **7. Improve jQuery Event Handling**
Instead of:

jQuery("#contractcompanycheck").click(function() { ... });

Use `.on()` for better event delegation:

jQuery(document).on('change', '#contractcompanycheck', function() { ... });

—

### **Final Thoughts**
✅ **Main Fixes:**
1. **Remove unnecessary `require_once` calls.**
2. **Optimize WooCommerce product retrieval (`wc_get_products`).**
3. **Use `get_posts()` instead of `wc_get_products()` when possible.**
4. **Cache database queries (`get_transient()`).**
5. **Fix redundant `WC_Product_Variation` instantiation.**
6. **Improve AJAX request efficiency (`wp_send_json()`, `.done()`).**
7. **Optimize event handling with `on()` instead of `click()`.**

With these changes, your page will **load faster, reduce server load, and prevent unnecessary queries**. 🚀 Let me know if you need more refinements! 🎯

User
foreach ($product->get_visible_children() as $variation_id) {
$variation = wc_get_product( $variation_id );

$product_variation = new WC_Product_Variation( $variation_id );

$image_tag = $product_variation->get_image();
$image_id = $variation->get_image_id();

}
get sky without $variation = wc_get_product( $variation_id );

Assistant
You don’t need to create a new instance of `WC_Product_Variation` manually because `wc_get_product($variation_id)` already returns a `WC_Product_Variation` instance. However, if you want to get the SKU (`get_sku()`) **without using `wc_get_product()`**, you can directly instantiate `WC_Product_Variation` like this:

### **Optimized Code:**

foreach ($product->get_visible_children() as $variation_id) {
    $product_variation = new WC_Product_Variation($variation_id);
    
    $image_tag = $product_variation->get_image();
    $image_id  = $product_variation->get_image_id();
    $sku       = $product_variation->get_sku(); // Get SKU directly from variation object
}

### **Why is this better?**
1. **Removes redundant `wc_get_product()` call.**
2. **Directly creates a `WC_Product_Variation` instance using `$variation_id`.**
3. **Retrieves the SKU using `$product_variation->get_sku()`.**

This approach ensures **better performance** while keeping the code clean. 🚀

User
get varaiation sky by get_post meta
Assistant
If you want to get the variation SKU using `get_post_meta()` instead of `wc_get_product()` or `WC_Product_Variation`, you can do it like this:

### **Get SKU Using `get_post_meta()`**

foreach ($product->get_visible_children() as $variation_id) {
    $sku = get_post_meta($variation_id, '_sku', true); // Get variation SKU
    $image_id = get_post_meta($variation_id, '_thumbnail_id', true); // Get variation image ID

    // If you need the image URL
    $image_url = wp_get_attachment_url($image_id);

    echo "SKU: " . esc_html($sku) . "<br>";
    echo "Image URL: " . esc_url($image_url) . "<br>";
}

### **Why Use `get_post_meta()`?**
– **More efficient** for retrieving a single meta value.
– **Avoids object instantiation**, making it faster when dealing with multiple variations.
– Works directly with **post meta fields in the `wp_postmeta` table**.

This method ensures **better performance** if you just need the SKU and not other product details. 🚀

User
Assistant
By default, “ does not display a dropdown arrow like a “ element. However, you can use a **combination of `input[list]` and CSS tricks** to always show a dropdown indicator.

### **Solution:**
1. Add a down-arrow icon using CSS.
2. Use an “ element linked to the “.

#### **Updated Code:**
“`html

/* Custom styling to always show the dropdown arrow */
.input-with-datalist {
appearance: none; /* Remove default styles */
-webkit-appearance: none;
-moz-appearance: none;
background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 10

User
show by default

Leave a Comment

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