Create an Amazon-Style Slider for WooCommerce Without Plugins

Tutorial-style graphic showing a WooCommerce product page with an Amazon-style vertical slider on the left, featuring t-shirt thumbnails and coding labels CSS, JavaScript, PHP."

Welcome to Loom Vision!

In today’s tutorial, we'll show you how to customize your WooCommerce product page by adding a fully responsive vertical slider for thumbnail images—similar to the modern, sleek style seen on Amazon. This guide is 100% plugin-free and uses only custom code.

What You'll Achieve:

Left-Side Vertical Slider: A clean, vertical thumbnail slider on the left side of the main product image.
Right-Side Vertical Slider: An optional slider positioned on the right side of the main product image.
Full Responsiveness: Ensure the slider adapts to all screen sizes without the need for third-party plugins.

The best part? You’ll achieve this entirely with CSS, PHP, and JavaScript. Follow this step-by-step guide to give your WooCommerce product page a sleek, professional look.

Step-by-Step Guide to Creating a Vertical WooCommerce Product Slider

1. Overview

In a previous tutorial, we covered creating a horizontal slider for WooCommerce. Now, we’re focusing on converting that horizontal slider into a vertical one for better UX on both desktop and mobile.

Let’s start by accessing your WordPress Dashboard.

2. Install the WPCode Plugin to Organize Custom Code

Navigate to your WordPress Dashboard.
Go to Plugins > Add New.
Search for "WPCode" (this plugin helps organize custom code snippets).
Install and activate the plugin.

3. The Problem with Default WooCommerce Product Pages

The default WooCommerce product page often has a large main product image with scattered thumbnail images below it. We need a more modern design with a vertical thumbnail slider.

4. Creating the Left-Side Vertical Slider

Step 1: Add Custom CSS for the Left Slider

Apply custom CSS to move the thumbnails to the left of the main product image and improve their appearance.

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
/* Make the thumnail image container take around 20% of total width and customize its design */
.flex-control-thumbs {
	flex-basis: 18%;
	z-index: 2;
	height: 390px !important;
	padding: 10px !important;
	margin: auto 0 !important;
}
/* Customize the gallery image */
.woocommerce-product-gallery__image img {
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid #e1e1e1; /* Light border around main image */
}
/* Adjust the width and spaces of individual thumbnail image containers and add transition for sliding effect */
.flex-control-thumbs li {
	min-width: 100%;
	margin-bottom: 10px !important;
	transition: margin-top 0.4s linear;
}
/* Make the thumbnail images' corners a bit rounded to match brand design */
.flex-control-thumbs li img {
    border-radius: 4px; /* Slightly rounded corners for thumbnails */
    border: 1px solid #ff9900; /* Border for thumbnails */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth hover effect */
}
/* Active Thumbnail Image */
.flex-active img {
    border: 2px solid orange; /* Amazon orange for active thumbnail */
}
/* set the position of thumbnail images*/
.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
  display:flex;
column-gap: 14px;
    margin-bottom: 0; 
}
div.product div.images.woocommerce-product-gallery .flex-viewport {
   flex-basis: 82%;
height:50px;
}
.woocommerce-js div.product div.images .flex-control-thumbs {
     flex-basis: 18%;
 
width:300px;
}
/* Move the images on the Left side*/
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    flex-direction: row-reverse;
}

Go to WPCode > Add New Snippet.

Select CSS as the snippet type, paste the above code, and name it "Left-Side Slider".
Save and activate the snippet.

Visit your product page to see the left-side vertical thumbnail slider in action!

5. Adding Navigation Arrows for the Slider

Step 2: Add PHP Code for Navigation Arrows

To mimic the Amazon-style slider, we'll add navigation arrows with PHP.

php

 // Add navigation arrows to the Flexslider
add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
function sf_update_woo_flexslider_options( $options ) {
    $options['directionNav'] = true;
    return $options;

Add a new snippet in WPCode, name it "Flexslider Filter Hook", and choose PHP as the file type.
Save and activate the code.

Step 3: Style the Left Side Navigation Arrows

/* Set the direction of arrows*/

ul.flex-direction-nav { position: absolute; z-index: 99999; width: 100%; left: 0; margin: 0; padding: 0px; list-style: none; display:flex; flex-direction:column; justify-content: space-between; } /* set position of previous arrow*/ li.flex-nav-prev { margin-top:20px !important; left:45px !important;} /* set position of next arrow*/ li.flex-nav-next{ margin-top:400px; right:130px; !important;} a.flex-next {visibility:hidden;} a.flex-prev {visibility:hidden;} /* next arrow appear */ a.flex-next::after { visibility:visible;content: 'f107'; font-family: 'Font Awesome 5 Free'; margin-top: 0px; font-size: 20px; font-weight: bold; } /* previous arrow appear*/ a.flex-prev::before { visibility:visible; content: 'f106'; font-family: 'Font Awesome 5 Free'; margin-top: 0px; margin-left: 45px; font-size: 20px; font-weight: bold; } ul.flex-direction-nav li a { color: #ff9900; ; } ul.flex-direction-nav li a:hover { text-decoration: none; } ul.flex-direction-nav li a:hover { text-decoration: none; } .flex-control-nav{ top:0px; }

6. Left-Side Flexslider Media Query for Small Devices

Copy the following media query code for handling responsiveness on small devices:

css


/* Small Tablets & Large Phones */
@media (min-width: 576px) and (max-width: 767px) {
    .flex-control-thumbs { height: 450px !important; }
    li.flex-nav-prev { margin-top: 30px !important; }
    li.flex-nav-next { margin-top: 450px !important; }
}

/* Small Mobile Devices */
@media (max-width: 575px) {
    .flex-control-thumbs { height: 160px !important; }
    li.flex-nav-prev { margin-top: 0px !important; }
    li.flex-nav-next { margin-top: 134px; }
    a.flex-prev::before { margin-left: 20px; }
    a.flex-next::after { margin-left: -20px; }
}

7. Adding JavaScript for Smooth Sliding Effects

For smooth transitions, we need to add JavaScript to handle the slider's functionality.

javascript

/* Flexslider JavaScript */
const updateCarousel = (selectedImgIndex, lastImgIndex) => {
    let indexOfImgToScroll = selectedImgIndex - 3;
    if (selectedImgIndex < 3 || lastImgIndex <= 3) indexOfImgToScroll = -1;
    else if (selectedImgIndex === lastImgIndex) indexOfImgToScroll = indexOfImgToScroll - 1;

    document.querySelectorAll(".flex-control-thumbs li").forEach((li, i) => {
        li.style.marginTop = (i <= indexOfImgToScroll) ? '-150px' : '0';
        li.style.transition = 'all 0.4s linear';
    });
};

document.addEventListener("DOMContentLoaded", (event) => {
    setTimeout(() => {
        let observer = new MutationObserver((mutations) => {
            mutations.forEach((mutationRecord) => {
                if (mutationRecord.target.className === "flex-active") {
                    const allElements = mutationRecord.target.parentNode.parentNode.children;
                    const targetedElement = mutationRecord.target.parentNode;
                    const indexOfTargetedElement = Array.from(allElements).indexOf(targetedElement);
                    const lastElementIndex = document.querySelectorAll(".flex-control-thumbs li").length - 1;
                    
                    updateCarousel(indexOfTargetedElement, lastElementIndex);
                }
            });
        });

        document.querySelectorAll(".flex-control-thumbs li img").forEach((img, i) => {
            observer.observe(img, {
                attributes: true,
                attributeFilter: ['style', 'class'],
            });
        });
    }, 0);
});

8. Creating the Right-Side Vertical Slider (Optional)

If you'd prefer the thumbnails on the right side of the main image, follow the same steps but with this CSS for right-side alignment:

css

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'); /* Add borders to the active thumbnail image for clear indication */ .flex-active { border: 2px solid #4338ca; } /* Make the thumnail image container take around 20% of total width and customize its design */ .flex-control-thumbs { flex-basis: 18%; z-index: 2; height: 380px !important; padding: 10px !important; margin: auto 0 !important; } /* Customize the gallery image */ .woocommerce-product-gallery__image img { border-radius: 8px; object-fit: cover; } /* Adjust position of the full-size image trigger button */ .woocommerce-product-gallery__trigger { right: 4.5em !important; } /* Adjust the width and spaces of individual thumbnail image containers and add transition for sliding effect */ .flex-control-thumbs li { min-width: 100%; margin-bottom: 10px !important; transition: margin-top 0.4s linear; } /* Make the thumbnail images' corners a bit rounded to match brand design */ .flex-control-thumbs li img { border-radius: 6px; } /* Add borders to the active thumbnail image for clear indication */ .flex-active { border: 2px solid red;} /* set the position of thumbnail images*/ .woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images { display:flex; column-gap: 14px; margin-bottom: 0; } div.product div.images.woocommerce-product-gallery .flex-viewport { flex-basis: 82%; height:50px; } .woocommerce-js div.product div.images .flex-control-thumbs { flex-basis: 18%; width:300px; } /* Move the images on the Left side*/ .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { flex-direction: reverse; }

Step 3: Style the Right-Side Navigation Arrows

Now, we’ll style the navigation arrows to make them sleek and modern, specifically for the right-side Flexslider. These arrows will be placed appropriately for the right-aligned vertical slider.

Right-Side Arrow Styling CSS

Copy and paste the following CSS into the Right-Side Slider CSS snippet you created earlier in WPCode:

/* Set the direction of arrows */
ul.flex-direction-nav {
    position: absolute;
    z-index: 99999;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

a.flex-next::after {
    margin-left: 500px;
}

a.flex-prev::before {
    margin-left: 535px !important;
}

/* Set position of previous arrow */
li.flex-nav-prev { 
    margin-top: 20px !important;
    left: 45px !important;
}

/* Set position of next arrow */
li.flex-nav-next { 
    margin-top: 400px;
    right: 130px !important;
}

/* Hide default arrows */
a.flex-next, a.flex-prev {
    visibility: hidden;
}

/* Display next arrow */
a.flex-next::after {
    visibility: visible;
    content: 'f107'; /* Font Awesome down arrow */
    font-family: 'Font Awesome 5 Free';
    margin-top: 0;
    font-size: 20px;
    font-weight: bold;
}

/* Display previous arrow */
a.flex-prev::before {
    visibility: visible;
    content: 'f106'; /* Font Awesome up arrow */
    font-family: 'Font Awesome 5 Free';
    margin-top: 0;
    margin-left: 45px;
    font-size: 20px;
    font-weight: bold;
}

/* Style the arrows */
ul.flex-direction-nav li a {
    color: #ccc;
}

ul.flex-direction-nav li a:hover {
    text-decoration: none;
}

/* Adjust bullet pagination control */
.flex-control-nav {
    top: 0;
}

Step 4: Make the Right-Side Slider Fully Responsive

We need to ensure that the slider and its arrows function well on different devices like tablets and mobile phones. To do that, we’ll add media queries for responsiveness.

Right-Side Flexslider Media Query for Small Devices