You can use your own version of the field templates by duplicating files from the plugins template/frontend folder and creating your own product-extras folder in your theme or child theme. The WooCommerce Product Add-Ons Ultimate plugin will look for any templates in theme folders before using its default templates.
Example templates
Here are some example templates.
Table layout for text field
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * A text field template | |
| * @since 2.0.0 | |
| * @package WooCommerce Product Add-Ons Ultimate | |
| * @see https://pluginrepublic.com/documentation/overriding-templates/ for more details | |
| */ | |
| // Exit if accessed directly | |
| if( ! defined( 'ABSPATH' ) ) { | |
| exit; | |
| } | |
| ?> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <td> | |
| <?php echo pewc_field_label( $item, $id ); ?> | |
| </td> | |
| <td> | |
| <?php $attributes = pewc_get_text_field_attributes( $item ); ?> | |
| <input type="text" class="pewc-form-field" id="<?php echo esc_attr( $id ); ?>" name="<?php echo esc_attr( $id ); ?>" <?php echo $attributes; ?> value="<?php echo esc_attr( $value ); ?>"> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> |
Table layout for products field
This example also pulls in additional child product data, like the SKU:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * A products field template | |
| * Ensure that the 'Products Quantities' field is set to 'One Only' | |
| * @since 2.2.0 | |
| * @package WooCommerce Product Add Ons Ultimate | |
| */ | |
| // Exit if accessed directly | |
| if( ! defined( 'ABSPATH' ) ) { | |
| exit; | |
| } | |
| echo pewc_field_label( $item, $id ); | |
| if( isset( $item['child_products'] ) ) { | |
| $layout = $item['products_layout']; | |
| $index = 0; | |
| // Set the allow_none parameter according to whether the field is required or not | |
| // allow_none means that child products can be deleted from the cart without deleting the parent product | |
| $allow_none = empty( $item['required'] ) ? true : false; | |
| // This is the custom layout | |
| $number_columns = ( isset( $item['number_columns'] ) ) ? $item['number_columns'] : 3; | |
| $checkboxes_wrapper_classes = array( | |
| 'pewc-checkboxes-images-wrapper', | |
| 'child-product-wrapper' | |
| ); | |
| $checkboxes_wrapper_classes[] = 'pewc-columns-' . intval( $number_columns ); | |
| if( ! empty( $item['hide_labels'] ) ) { | |
| $checkboxes_wrapper_classes[] = 'pewc-hide-labels'; | |
| } | |
| if( ! empty( $item['products_quantities'] ) ) { | |
| $products_quantities = ! empty( $item['products_quantities'] ) ? $item['products_quantities'] : ''; | |
| $checkboxes_wrapper_classes[] = 'products-quantities-' . $item['products_quantities']; | |
| } ?> | |
| <table class="<?php echo join( ' ', $checkboxes_wrapper_classes ); ?>" data-products-quantities="<?php echo esc_attr( $item['products_quantities'] ); ?>"> | |
| <?php foreach( $item['child_products'] as $child_product_id ) { | |
| $child_product = wc_get_product( $child_product_id ); | |
| $price = pewc_maybe_include_tax( $child_product, $child_product->get_price() ); | |
| $price = wc_price( $price ); | |
| // Check stock availability | |
| $disabled = ''; | |
| if( ! $child_product->is_purchasable() || ! $child_product->is_in_stock() ) { | |
| $disabled = 'disabled'; | |
| } | |
| // Check available stock if stock is managed | |
| $available_stock = ''; | |
| if( $child_product->managing_stock() ) { | |
| $available_stock = $child_product->get_stock_quantity(); | |
| } | |
| $name = get_the_title( $child_product_id ); | |
| $field_name = $id . '_child_product'; | |
| $checkbox_id = $id . '_' . $child_product_id; | |
| $wrapper_classes = array( | |
| 'pewc-checkbox-image-wrapper' | |
| ); | |
| if( $disabled ) { | |
| $wrapper_classes[] = 'pewc-checkbox-disabled'; | |
| } | |
| $checked = ( $value == $id ) ? 'checked="checked"' : ''; | |
| $quantity_field = ''; | |
| if( $products_quantities == 'independent' ) { | |
| // Add a quantity field for each child checkbox | |
| // The name format is {$id}_child_quantity_{$child_product_id} | |
| // Where $id is the field ID and $child_product_id is the child product ID | |
| $quantity_field = sprintf( | |
| '<input type="number" min="0" step="1" max="%s" class="pewc-form-field pewc-child-quantity-field" name="%s" value="0" %s>', | |
| $available_stock, | |
| esc_attr( $id ) . '_child_quantity_' . esc_attr( $child_product_id ), | |
| $disabled | |
| ); | |
| } | |
| $option_cost = pewc_maybe_include_tax( $child_product, $child_product->get_price() ); | |
| // Start the row | |
| $table_row = '<tr>'; | |
| // Add a thumbnail | |
| $image_url = ( get_post_thumbnail_id( $child_product_id ) ) ? wp_get_attachment_url( get_post_thumbnail_id( $child_product_id ) ) : wc_placeholder_img_src(); | |
| // Setting a width and height here | |
| $image = '<img style="max-width: 50px; height: auto;" src="' . esc_url( $image_url ) . '">'; | |
| $table_row .= sprintf( | |
| '<td>%s</td>', | |
| $image | |
| ); | |
| // Add a checkbox in the first column | |
| $table_row .= sprintf( | |
| '<td><input data-option-cost="%s" type="checkbox" name="%s[]" id="%s" class="pewc-checkbox-form-field" value="%s" %s %s></td>', | |
| esc_attr( $option_cost ), | |
| esc_attr( $field_name ), | |
| esc_attr( $checkbox_id ), | |
| esc_attr( $child_product_id ), | |
| esc_attr( $checked ), | |
| esc_attr( $disabled ) | |
| ); | |
| // Add the child product name | |
| $table_row .= sprintf( | |
| '<td class="%s"><label for="%s">%s</label></td>', | |
| join( ' ', $wrapper_classes ), | |
| esc_attr( $checkbox_id ), | |
| $name | |
| ); | |
| // Example column to get child product meta, e.g. SKU | |
| $sku = $child_product->get_sku(); | |
| $table_row .= sprintf( | |
| '<td>%s</td>', | |
| $sku | |
| ); | |
| // Price column | |
| $table_row .= sprintf( | |
| '<td>%s</td>', | |
| $price | |
| ); | |
| $table_row .= '</row>'; | |
| echo $table_row; | |
| } ?> | |
| </table><!-- .pewc-radio-images-wrapper --> | |
| <input type="hidden" name="<?php echo esc_attr( $id ); ?>_quantities" value="<?php echo esc_attr( $item['products_quantities'] ); ?>"> | |
| <?php $allow_none = ! empty( $item['allow_none'] ) ? 1 : 0; ?> | |
| <input type="hidden" name="<?php echo esc_attr( $id ); ?>_allow_none" value="<?php echo esc_attr( $allow_none ); ?>"> | |
| <?php } |
Table layout for checkbox group field
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * A checkbox field template | |
| * @see https://pluginrepublic.com/documentation/overriding-templates/ | |
| * @since 2.0.0 | |
| * @package WooCommerce Product Add-Ons Ultimate | |
| */ | |
| // Exit if accessed directly | |
| if( ! defined( 'ABSPATH' ) ) { | |
| exit; | |
| } | |
| // Labels are used with the inputs | |
| echo pewc_field_label( $item, $id ); | |
| if( isset( $item['field_options'] ) ) { | |
| $index = 0; ?> | |
| <table class="pewc-checkbox-group-wrapper"> | |
| <?php foreach( $item['field_options'] as $key=>$option_value ) { | |
| $classes = array( 'pewc-checkbox-form-field' ); | |
| $name = esc_html( $option_value['value'] ); | |
| $option_percentage = ''; | |
| // Set price differently if percentage is enabled | |
| if( pewc_is_pro() && isset( $item['field_percentage'] ) && ! empty( $option_value['price'] ) ) { | |
| // Set the option price as a percentage of the product price | |
| $product_price = $product->get_price(); | |
| $option_price = ( floatval( $option_value['price'] ) / 100 ) * $product_price; | |
| $option_price = pewc_maybe_include_tax( $product, $option_price ); | |
| $option_percentage = floatval( $option_value['price'] ); | |
| $classes[] = 'pewc-option-has-percentage'; | |
| } else { | |
| $option_price = ! empty( $option_value['price'] ) ? pewc_maybe_include_tax( $product, $option_value['price'] ) : 0; | |
| } | |
| if( ! empty( $option_price ) ) { | |
| $name .= ' - <span class="pewc-option-cost-label">' . pewc_get_semi_formatted_raw_price( $option_price ) . '</span>'; | |
| } | |
| $radio_id = $id . '_' . strtolower( str_replace( ' ', '_', $option_value['value'] ) ); | |
| $checked = ( is_array( $value ) && in_array( $option_value['value'], $value ) ) ? 'checked="checked"' : ''; | |
| $row = '<tr>'; | |
| // Checkbox first | |
| $row .= sprintf( | |
| '<td><input data-option-cost="%s" data-option-percentage="%s" type="checkbox" name="%s[]" id="%s" class="%s" value="%s" %s></td>', | |
| esc_attr( $option_price ), | |
| esc_attr( $option_percentage ), | |
| esc_attr( $id ), | |
| esc_attr( $radio_id ), | |
| join( ' ', $classes ), | |
| esc_attr( $option_value['value'] ), | |
| esc_attr( $checked ) | |
| ); | |
| $row .= sprintf( | |
| '<td><label class="pewc-checkbox-form-label" for="%s">%s</label></td>', | |
| esc_attr( $radio_id ), | |
| $name | |
| ); | |
| // echo apply_filters( 'pewc_filter_checkbox_group_field', $radio, $radio_id, $option_price, $id, $name, $option_value, $item ); | |
| } | |
| echo $row; ?> | |
| </table> | |
| <?php } |