Skip to content


Extensive Documentation for PowerPack & WooPack to help you with common questions and issues.


  1. Home
  2. Docs
  3. PowerPack
  4. Modules
  5. Devices
  6. How to change the device skin?

How to change the device skin?

You can change the device skin/frame by using the following filter hook pp_devices_skin_path that was introduced in PowerPack 2.30. Please check the usage example below:

add_filter( 'pp_devices_skin_path', 'my_device_custom_skin', 10, 2 );
function my_device_custom_skin( $path, $settings ) {
   if ( 'phone' == $settings->device_type ) {
      $path = get_stylesheet_directory() . '/phone.svg';
   return $path;

1. Add the SVG code in a file and save the file in SVG format. For example, phone.svg

2. Upload this SVG file to your current child theme’s root

3. Add the above code to the theme’s functions.php file

This code will return the path of SVG file located in the child theme’s root for the “phone” as device type.

Available device type to check: phone, tablet, laptop, desktop, window

You can also change the path to the SVG file where it is placed. (Please note that this is a file path, not URL)

You might need to add some CSS to adjust the custom skin as per the displayed content.