13 - Using themes - WPC
Themes, which are only available in the WooPrice Calculator paid (PRO) version, allow 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.php: It's a more advanced custom theme, you can edit every field aspect
- example_uikit.php: How to use UIkit. Uikit 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:
<?php
/* THEME_NAME: Your Theme Name */
?> <h2>This is a template example</h2> <div class="wpc-product-form"> <div class="awspc-output-product"> <?php foreach($this->view['outputResults'] as $outputFieldId => $outputResult): ?> <div class="awspc-output-result-row <?php echo $outputResult['fieldName']; ?>" style="<?php echo (count($this->view['errors']) != 0)?"display:none":"" ?>"> <span class="awspc-output-result-label"><b><?php echo $outputResult['field']->label; ?></b>: </span> <span class="awspc-output-result-value"><?php echo $outputResult['value']; ?></span> </div> <?php endforeach; ?> </div> <table> <?php foreach($this->view['data'] as $key => $data): ?> <tr class="awspc-field-row" data-field-id="<?php echo $data['field']->id; ?>" style="<?php echo ($this->view['conditionalLogic'][$data['field']->id] == true)?"":"display:none"; ?>"> <td id="<?php echo $data['labelId']; ?>"> <?php echo $this->userTrans($data['field']->label); ?> </td> <td id="<?php echo $data['inputId']; ?>"> <?php echo $data['widget']; ?> </td> </tr> <?php endforeach; ?> </table> </div>
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:
<?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 }