How to use themes

How to use themes

Themes, which are only available in the WooPrice Calculator paid (PRO) version, allowes you to customize the graphics look of the calculator, using HTML/CSS coding. Available themes are either made by using Bootstrap and Uikit or without using any frameworks.  Example themes are located in: “/wp-content/plugins/woo-price-calculator/admin/resources/themes”  Available themes are: 
  • example.php: It’s a simple example, just iterate through all fields and print them 
  • example_bootstrap.php: How to use Bootstrap. Bootstrap is autoloaded with WPC 
  • example_custom.phpIt’s a more advanced custom theme, you can edit every aspect of the field 
  • example_uikit.php: How to use UIkitUikit is autoloaded with WPC 
If you want to use an example just copy the file you want through FTP from the folder: “/wp-content/plugins/woo-price-calculator/admin/resources/themes” to “/wp-content/uploads/woo-price-calculator/themes”  If you want a new theme from scratch, create a new file in: “/wp-content/uploads/woo-price-calculator/themes”  like “your_theme.php”. A theme is set up like this:    /* THEME_NAME: Your Theme Name */     ?>     

This is a template example

     
wpc-product-form”>       
awspc-output-product”>  “>  awspc-output-result-label”>“>                      labelId‘]; ?>”>                          <?php echo $this->userTrans($data[‘field’]->label); ?>                                              inputId‘]; ?>”>                          <?php echo $data[‘widget’]; ?>                                                        <?php endforeach; ?>             
    In “Your Theme Name” type a name because this will be used to identify the theme in the backend of WordPress (Themes field in your calculator settings). You can iterate through the calculator fields as follow:  <?php foreach($this->view[‘data’] as $key => $data): ?>  //Your code here  <?php endforeach; ?>  If you want to print the field label:  <?php echo $data[‘field’]->label; ?>  To translate the field labels or other things as described in the “Translations” chapter by clicking here -> https://altoswebsolutions.com/manual/woo-price-calculator/translations:  <?php echo $this->userTrans(“language_key“); ?>  You can draw the whole field using:  <?php echo $data[‘widget’]; ?>  You can draw the default autogenerated calculator view. This is useful if you don’t want to redraw it:  <?php echo $this->view[‘defaultView‘]; ?>  You can check if the field should be displayed by the conditional logic:  if($this->view[‘conditionalLogic‘][$data[‘field’]->id] == true){  //Display the field  }else{  //Hide the field  }