PhotoSwipe white skin

[akaleeroy]

Problem description

The default (dark) skin for Photoswipe doesn't fit the look of my store, but the white skin is excellent.

Solution

Let theme developers load another skin for Photoswipe instead of the default.

I don't know how modular it is, since de-queuing and de-registering default-skin.css seems to break the lightbox:

// functions.php
// Removes the style but breaks the lightbox altogether
function dequeue_photoswipe_default_skin() {
  wp_dequeue_style('photoswipe-default-skin');
  wp_deregister_style('photoswipe-default-skin');
}

add_action('wp_enqueue_scripts', 'dequeue_photoswipe_default_skin', 10);

[claudiosanches]

This is the correct way to dequeue photoswipe styles, also you could replace the current one by your new skin, no even there's reason to change the ID, so will keep working just fine.

[akaleeroy]

you could replace the current one by your new skin

The default skin is in the plugin folder, if I replace it with the white skin the changes will get wiped out on the next WooCommerce update.

[claudiosanches]

@akaleeroy why on your theme if you can just use wp_deregister_style and then wp_register_style to register the new skin? Makes no sense to change it in the WooCommerce files if WordPress and WooCommerce already provide a clean way of doing it.

[smartynko]

I would like to post this solution here just in case anyone needs it.
As @claudiosanches pointed out, you can use wordpress built-in system to remove default skin and use your own. The thing is, photoswipe is using more than one CSS. One is photoswipe.css the other one is default-skin.css.

You can find the whole asset folder for photoswipe in:
wp-content/plugins/woocommerce/assets/css/photoswipe/

What I did was that I copied the whole directory to my theme just in case I need to replace anything else.

Then I wrote a simple function to unregister and dequeue the css files mentioned above which looks like this

function replace_default_stylesheets() {

$version = '1.0.0';
    wp_dequeue_style( 'photoswipe' );
    wp_deregister_style( 'photoswipe' );
    wp_dequeue_style( 'photoswipe-default-skin' );
    wp_deregister_style( 'photoswipe-default-skin' );
   
    wp_register_style( 'photoswipe', get_stylesheet_directory_uri() . '/css/photoswipe/photoswipe.css', array(), $version );
    wp_enqueue_style( 'photoswipe' );
    wp_register_style( 'photoswipe-default-skin', get_stylesheet_directory_uri() . '/css/photoswipe/default-skin/default-skin.css', array( 'photoswipe' ), $version );
    wp_enqueue_style( 'photoswipe-default-skin' );

}
add_action( 'wp_enqueue_scripts', 'replace_default_photoswipe_stylesheets', 20 );

What we do here is this:

1. we dequeue styles and then deregister them (this should be done for both CSS files because you will need to change both in order to fully control the result
2. then we register and enqueue those files we just copied from woocommerce/assets/photoswipe. This basically forces Woocommerce to load CSS from our theme instead of the assets folder (as you can see there is an order to those two files, first you have to enqueue 'photoswipe' style and then 'photoswipe-default-skin' style with 'photoswipe' style as a dependency)
3. last step is to hook this whole function into wp_enqueue_scripts action in order for it to work

Now we actually forced woocommerce to load CSS (and all the files linked in these CSS files) from our theme.
Which basically means we can tune our CSS without loosing the changes when WooCommerce gets updated. You can also change the content of default-skin.png and default-skin.svg if you want to change the icons completely :)
I truly hope someone will find this useful :)
Have a nice day.

[momo-fr]

@smartynko, the snippet not work, PHP errors are displayed:
Uncaught TypeError: call_user_func_array(): Argument #1 ($callback) must be a valid callback, function "replace_default_photoswipe_stylesheets" not found or invalid function name in wp-includes/class-wp-hook.php:310
Stack trace:
#0 wp-includes/class-wp-hook.php(334): WP_Hook->apply_filters()
#1 wp-includes/plugin.php(517): WP_Hook->do_action()
#2 wp-includes/script-loader.php(2225): do_action()
#3 wp-includes/class-wp-hook.php(310): wp_enqueue_scripts()
#4 wp-includes/class-wp-hook.php(334): WP_Hook->apply_filters()
#5 wp-includes/plugin.php(517): WP_Hook->do_action()
#6 wp-includes/general-template.php(3053): do_action()
#7 wp-content/themes/blocksy/header.php(21): wp_head()
#8 wp-includes/template.php(785): require_once('...')
#9 wp-includes/template.php(720): load_template()
#10 wp-includes/general-template.php(48): locate_template()
#11 wp-content/plugins/elementor/modules/page-templates/templates/header-footer.php(9): get_header()
#12 wp-includes/template-loader.php(106): include('...')
#13 wp-blog-header.php(19): require_once('...')
#14 index.php(17): require('...')
#15 {main}
thrown