Actions and Filters - Live Preview add-on
The Live Preview add-on for WooCommerce Product Options comes with some filters which allow you to customize its behavior. These are described below, and we have a separate article containing filters for the main WooCommerce Product Options plugin.
Please note that code snippets are aimed at developers. If you feel comfortable using them, our article on how to use code snippets can serve as a helpful guide. However, if you don't feel comfortable using them, then you should ask your developer. If you don't have one, then you can use our plugin customization service.
Filters
wc_live_preview_custom_fonts
Filter to allow custom fonts to be added.
This filter allows developers to add custom fonts to the list of available fonts for the live preview feature. The custom fonts should be provided as an array of arrays, where each array contains the 'family' and 'files' keys. More info can be found at https://barn2.com/kb/wlp-how-to-add-custom-fonts/
Arguments
$custom_fonts(array): An array of custom fonts, each with 'family' and 'files' keys.
'family' is the font family name, and 'files' is an array
of file URLs for the font files.
Example
add_filter( 'wc_live_preview_custom_fonts', 'my_wc_live_preview_custom_fonts' );
function my_wc_live_preview_custom_fonts( $custom_fonts ) {
// your code to alter $custom_fonts here...
return $custom_fonts;
}
wc_live_preview_customize_button_text
Filter the text for the customize button.
This is the global setting for the text that will be displayed on the customize button. This can be overridden on a per-option basis in the WooCommerce Product Options editor.
Arguments
$customize_button_text(string): The text for the customize button.$product(\WC_Product): The product being displayed.
Example
add_filter( 'wc_live_preview_customize_button_text', 'my_wc_live_preview_customize_button_text', 10, 2 );
function my_wc_live_preview_customize_button_text( $customize_button_text, $product ) {
// your code to alter $customize_button_text here...
return $customize_button_text;
}
wc_live_preview_default_image_sizing
Filter the default sizing strategy of images added to a printable area.
The possible values are `contain` and `cover`: * `contain` will fit the image inside the printable area * `cover` will fill the printable area and parts of the image may be cropped The default value is 'contain'.
Arguments
$default_image_sizing(int): The default sizing strategy.$product(\WC_Product): The product being displayed.
Example
add_filter( 'wc_live_preview_default_image_sizing', 'my_wc_live_preview_default_image_sizing', 10, 2 );
function my_wc_live_preview_default_image_sizing( $default_image_sizing, $product ) {
// your code to alter $default_image_sizing here...
return $default_image_sizing;
}
wc_live_preview_file_format
Filter the file format of the preview image.
The possible values are `png` and `jpeg`. The default value is 'png'.
Arguments
$file_format(string): The file format of the preview image.$product(\WC_Product): The product being displayed.
Example
add_filter( 'wc_live_preview_file_format', 'my_wc_live_preview_file_format', 10, 2 );
function my_wc_live_preview_file_format( $file_format, $product ) {
// your code to alter $file_format here...
return $file_format;
}
wc_live_preview_file_quality
Filter the quality of the preview image.
The value should be a float between 0 and 1. The default value is 0.6.
Arguments
$file_quality(float): The quality of the preview image.$product(\WC_Product): The product being displayed.
Example
add_filter( 'wc_live_preview_file_quality', 'my_wc_live_preview_file_quality', 10, 2 );
function my_wc_live_preview_file_quality( $file_quality, $product ) {
// your code to alter $file_quality here...
return $file_quality;
}
wc_live_preview_gallery_image_selector
Filter the selector for the image gallery.
The default value is '.woocommerce-product-gallery__image'.
Arguments
$gallery_image_selector(string): The selector for the image gallery.$product(\WC_Product): The product being displayed.
Example
add_filter( 'wc_live_preview_gallery_image_selector', 'my_wc_live_preview_gallery_image_selector', 10, 2 );
function my_wc_live_preview_gallery_image_selector( $gallery_image_selector, $product ) {
// your code to alter $gallery_image_selector here...
return $gallery_image_selector;
}
wc_live_preview_gallery_viewport_selector
Filter the selector for the gallery viewport element.
The default value is '.flex-viewport'.
Arguments
$gallery_viewport_selector(string): The selector for the gallery viewport.$product(\WC_Product): The product being displayed.
Example
add_filter( 'wc_live_preview_gallery_viewport_selector', 'my_wc_live_preview_gallery_viewport_selector', 10, 2 );
function my_wc_live_preview_gallery_viewport_selector( $gallery_viewport_selector, $product ) {
// your code to alter $gallery_viewport_selector here...
return $gallery_viewport_selector;
}
wc_live_preview_google_fonts_limit
Filter the limit for the Google Fonts API.
Arguments
$limit(int): The limit for the Google Fonts API. Default: 0 (no limit).
Example
add_filter( 'wc_live_preview_google_fonts_limit', 'my_wc_live_preview_google_fonts_limit' );
function my_wc_live_preview_google_fonts_limit( $limit ) {
// your code to alter $limit here...
return $limit;
}
wc_live_preview_google_fonts_sort
Filter the sorting parameter for the Google Fonts API.
Arguments
$sort(string): The sorting parameter for the Google Fonts API. Default: 'popularity'.
Example
add_filter( 'wc_live_preview_google_fonts_sort', 'my_wc_live_preview_google_fonts_sort' );
function my_wc_live_preview_google_fonts_sort( $sort ) {
// your code to alter $sort here...
return $sort;
}
wc_live_preview_hide_document_fonts
Filter whether the document fonts should be hidden in the live preview.
Arguments
$show_document_fonts(bool): Whether to show document fonts.$product(\WC_Product): The product being displayed.
Example
add_filter( 'wc_live_preview_hide_document_fonts', 'my_wc_live_preview_hide_document_fonts', 10, 2 );
function my_wc_live_preview_hide_document_fonts( $show_document_fonts, $product ) {
// your code to alter $show_document_fonts here...
return $show_document_fonts;
}
wc_live_preview_is_preview_enabled
Filter whether the live preview functionality is in use.
Normally, the condition for the live preview to be available is that the user is on a product page. However, this filter allows other plugins to enable the live preview functionality on other pages, such as the shop page or other custom pages.
Arguments
$use_live_preview(bool): Whether the live preview functionality is in use.
Example
add_filter( 'wc_live_preview_is_preview_enabled', 'my_wc_live_preview_is_preview_enabled' );
function my_wc_live_preview_is_preview_enabled( $use_live_preview ) {
// your code to alter $use_live_preview here...
return $use_live_preview;
}
wc_live_preview_item_data_preview_label
Filter the label used for preview files on the cart and checkout pages.
Arguments
$preview_label(string):$item_data(array):$cart_item(array):
Example
add_filter( 'wc_live_preview_item_data_preview_label', 'my_wc_live_preview_item_data_preview_label', 10, 3 );
function my_wc_live_preview_item_data_preview_label( $preview_label, $item_data, $cart_item ) {
// your code to alter $preview_label here...
return $preview_label;
}
wc_live_preview_max_canvas_size
Filter the max size of the live preview canvas element.
The size is provided as a scalar value because the canvas will always maintain the aspect ratio of the image. The default value is 2400 for the larger side. For example, if the image is 800x600, the canvas will be 2400x1800 and the resulting upscale factor will be 3. If the image is 600x800, the canvas will be 1800x2400, with the same upscale factor. The resulting upscale factor will not exceed the value set in `max_upscale_factor`. For example, if the image is 400x300 and the upscale factor is 4, the canvas will be 1600x1200 regardless of the max_canvas_size.
Arguments
$max_canvas_size(int): The max size of the canvas.$product(\WC_Product): The product being displayed.
Example
add_filter( 'wc_live_preview_max_canvas_size', 'my_wc_live_preview_max_canvas_size', 10, 2 );
function my_wc_live_preview_max_canvas_size( $max_canvas_size, $product ) {
// your code to alter $max_canvas_size here...
return $max_canvas_size;
}
wc_live_preview_max_upscale_factor
Filters the default canvas upscaling.
The canvas of the live preview will be upscaled by this factor to improve the quality of the preview image. The default value is 4.
Arguments
$max_upscale_factor(int): The upscale factor.$product(\WC_Product): The product being displayed.
Example
add_filter( 'wc_live_preview_max_upscale_factor', 'my_wc_live_preview_max_upscale_factor', 10, 2 );
function my_wc_live_preview_max_upscale_factor( $max_upscale_factor, $product ) {
// your code to alter $max_upscale_factor here...
return $max_upscale_factor;
}