prettyPhoto product slider - How to center an image

Question

I am trying to set up a WooCommerce site (https://storetest.rigwald.com/?cmp_bypass=test), which uses a product slider based on prettyPhoto.js. The problem is that the images are not centered in the middle of the slider, they are displayed to the left slide of the slider canvas/window. Is there a way to force the images to be centered in the slider? The theme creators appear to have no concept of their own product, simply telling me to change the image size for any products shown in the slider to 800x512, even though product photos are supposed to be 600x600 or 800x800. They are just attempting to have me fill the slider "canvas", so the off-center images aren't noticable.

I am not a coder. I can poke around Chrome developer tools and the theme editor in Woocommerce/Wordpress, which is how I found out the slider is using prettyPhoto.

Thank you for your help with this!

Answer 1

Looking at your theme it seems that all you need is some css to fix the problem.

I have created an action that inserts some inline style that should help with that issue.

add_action('wp_head', 'bt_custom_inline_style');
function bt_custom_inline_style () {
?>
<style>
    .big-slider .home-slider li {
        display: flex;
        justify-content: center;
    }
</style>
<?php
}

You can copy paste this code to your functions.php file