About this:

Adding this function to the functions.php will make the slider on the product page fade to the next slide instead of slide. It’s a minor but aesthetically pleasing change.

Requirements

There are multiple ways to make these edits. Most of them are good but for a small change like this the theme editor under admin menu “Appearance” will do just fine.

Explaining the child theme

Why a Child Theme?

A Child Theme is a fundamental part of editing templates and functions which is often overlooked. Why is it important? The Flatsome main theme is updated regularly which essentially replaces and overwrites files. The child theme is separate and will not receive these updates so all files within will not be edited/overwritten/replaced. This way you don’t have to edit the template or functions every time there is an update.

Installing the child theme will automatically provide a functions.php for you.

Step 1: finding the functions.php

  1. In the admin dashboard find the “Appearance” menu item in the left sidebar and choose “Theme Editor”
  2. Make sure you have selected your child theme in the dropdown on the top right above the right sidebar.
  3. If the child-theme is selected, select the functions.php in the right sidebar.

Step 2: Adding to the functions.php

Add the following code somewhere in your functions.php after the first 2 lines.

add_filter( 'woocommerce_single_product_image_gallery_classes', function ( $classes ) {
    $classes[] = 'slider-type-fade';
    return $classes;
} );

Step 3: save the functions.php

Don’t forget to save the changes made by clicking the save button below the text editor.

Stay Connected

Get in touch

Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.