Add FlexSlider in WooCommerce Without Plugins | ToolVerse

 

Are you looking to enhance your WooCommerce store with a sleek, modern image slider, but want to avoid the hassle of third-party plugins? Look no further! In this comprehensive guide, we’ll show you how to add a FlexSlider to your WooCommerce store using only custom code and the WP Code plugin. This method ensures a clean, organized approach while providing a stylish, functional carousel for your product images. Let’s dive in!

Why Use FlexSlider in WooCommerce?

A FlexSlider adds a touch of professionalism and interactivity to your WooCommerce product pages. It allows customers to easily navigate through product images, improving their shopping experience. By using FlexSlider, you can enhance your store’s visual appeal without relying on bulky, third-party plugins. Plus, it’s easy to implement with just a few lines of custom code!

Step-by-Step Guide to Adding FlexSlider to Your WooCommerce Store

1. Understand the Default Product Image Layout

Before we dive into customization, let’s take a look at the default layout of product images on a single WooCommerce product page.

• Navigate to a Single Product Page:

  • Go to your WooCommerce store and select any product to view its details.
  • Observe that the main product image might appear overly large, and the thumbnail images may span across multiple lines.

• Objective:

  • Our goal is to make the thumbnails smaller and align them in a single line to enhance the visual appeal of your product gallery.

---

2. Install the WP Code Plugin

The WP Code plugin helps us manage custom code snippets efficiently, ensuring your site remains organized and free from unnecessary plugins.

• Installation Steps:

  1. Access Your WordPress Dashboard:

     • Log in to your WordPress admin area.

  2. Install WP Code Plugin:

     • Go to Plugins > Add New.
     • Search for “WP Code” in the search bar.
     • Click Install Now and then Activate.

---

3. Add the FlexSlider Filter Hook

We’ll use a WooCommerce filter hook to add navigation arrows to your product image gallery. This step involves inserting PHP code to integrate FlexSlider functionality.

• Get the Code:

  • Visit our website (link in the description) to get the PHP code for the filter hook. Copy the code provided.

• Add the Code Using WP Code Plugin:

  1. Go to WP Code in your dashboard.
  2. Click Add New Snippet.
  3. Name your snippet “WooCommerce FlexSlider Filter Hook”.
  4. Choose PHP as the file type.
  5. Paste the copied PHP code into the code editor.
  6. Click Save and Activate the snippet.

  Example PHP Code:

  php

   

  //Filter WooCommerce Flexslider options - Add Navigation Arrows
  
  
  
  add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
  /**
  * Filer WooCommerce Flexslider options - Add Navigation Arrows
  */
  function sf_update_woo_flexslider_options( $options ) {
  
  
  
  $options['directionNav'] = true;
  
  
  
  return $options;
  }

  


• Check the Results:

  • Refresh your single product page to see if the next and previous buttons have been added.

---

4. Verify Button Functionality

Now that we’ve added the navigation arrows, it’s time to test their functionality.

• Test the Buttons:

  • Click on the next and previous buttons to ensure they navigate through the images correctly.

  By default, WooCommerce provides the FlexSlider functionality, so the buttons should work seamlessly. Our next task is to enhance the carousel’s appearance.

---

5. Customize the Carousel to Display Four Images

To achieve a modern look, we’ll customize the FlexSlider to display only four images in the carousel at a time.

• Get the CSS Code:

  • Visit our website (link in the description) to get the CSS code for styling the FlexSlider. Copy the provided CSS code.

• Add the CSS Code:

  • Option 1: Using WP Code Plugin:

    1. Go to WP Code in your dashboard.
    2. Click Add New Snippet.
    3. Name your snippet “WooCommerce FlexSlider CSS”.
    4. Choose CSS as the file type.
    5. Paste the copied CSS code into the editor.
    6. Click Save and Activate the snippet.

  • Option 2: Using WordPress Customizer:

    1. Go to Appearance > Customize.
    2. Scroll down to Additional CSS.
    3. Paste the copied CSS code into the editor.
    4. Click Publish.

  Example CSS Code:

  css

   

  /* Include Font Awesome from CDN */
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
  
  
  
  /* General Styles */
  body {
  font-family: 'Roboto', sans-serif;
  }
  
  
  
  /* Style the flex-direction-nav container */
  ul.flex-direction-nav {
  position: absolute;
  bottom: 2%;
  z-index: 99999;
  width: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  }
  
  
  
  li.flex-nav-prev {
  float: left;
  }
  
  
  
  li.flex-nav-next {
  float: right;
  }
  
  
  
  a.flex-next,
  a.flex-prev {
  visibility: hidden;
  display: block;
  font-size: 0; /* Hide any potential text */
  }
  
  
  
  a.flex-next::after,
  a.flex-prev::before {
  visibility: visible;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 40px;
  color: #333; /* Arrow color */
  transition: color 0.3s ease; /* Transition effect for color change */
  }
  
  
  
  a.flex-next::after {
  content: 'f105'; /* Font Awesome class for right arrow */
  margin-right: 10px;
  }
  
  
  
  a.flex-prev::before {
  content: 'f104'; /* Font Awesome class for left arrow */
  margin-left: 10px;
  }
  
  
  
  /* Optional: Change color on hover */
  a.flex-next:hover::after,
  a.flex-prev:hover::before {
  color: #1E90FF; /* Color on hover */
  }
  
  
  
  /* Style the gallery thumb images */
  .flex-control-nav.flex-control-thumbs li {
  margin: 0 5px; /* Margin between images */
  border: 2px solid #00AAE4; /* Border with button color */
  border-radius: 8px; /* Rounded corners */
  overflow: hidden; /* Hide overflow */
  background-color: #d3e9f5; /* Background color */
  }
  
  
  
  .flex-control-nav.flex-control-thumbs li img {
  width: 100%; /* Fill container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove default spacing */
  }
  
  
  
  /* Style the active image */
  .flex-control-nav.flex-control-thumbs li.flex-active {
  border-color: #333; /* Active image border color */
  }
  
  
  
  /* Optional: Add hover effect */
  .flex-control-nav.flex-control-thumbs li:hover {
  border-color: #FF6347; /* Border color on hover */
  }
  
  
  
  /* Adjusting Container */
  .woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
  max-width: 350px;
  height: auto;
  overflow: hidden;
  width: 100% !important; /* Override inline styles */
  margin-left: 13%;
  }
  
  
  
  /* Adjusting Image inside the Container */
  .woocommerce-product-gallery__image.flex-active-slide img.zoomImg {
  width: 100% !important; /* Override inline styles */
  height: auto !important; /* Override inline styles */
  object-fit: cover;
  position: relative;
  top: 0 !important; /* Override inline styles */
  left: 0 !important; /* Override inline styles */
  border-radius: 8px; /* Border radius */
  transition: transform 0.3s ease-in-out; /* Smooth zoom effect */
  }
  
  
  
  /* Adding Zoom Effect on Hover */
  .woocommerce-product-gallery__image.flex-active-slide:hover img.zoomImg {
  transform: scale(1.1); /* Zoom effect */
  border-radius: 0; /* Remove border radius on zoom */
  }
  
  
  
  /* Adding Radius to the Single Product Image */
  .woocommerce-product-gallery__wrapper .flex-active-slide img {
  border-radius: 10px; /* Border radius */
  }
  
  
  
  /* Set the Width of Each Thumbnail */
  .flex-control-nav li {
  flex: 0 0 25%; /* Adjust based on design */
  max-width: 25%; /* Adjust based on design */
  }
  
  
  
  /* Thumbnails Styling */
  .woocommerce-js div.product div.images .flex-control-thumbs {
  width: 70%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  }
  
  
  
  /* Ensure the Flex Container Doesn't Wrap */
  .flex-control-nav {
  flex-wrap: nowrap;
  overflow: hidden;
  }
  
  
  
  /* Hide Extra Thumbnails */
  .flex-control-nav li:nth-child(n+5) {
  display: none;
  }
  
  
  
  
  
  /* Hide Quantity Input */
  .woocommerce-js div.product form.cart div.quantity {
      display: none;
  }

•  
• Verify Your Changes:
  • Refresh your single product page to see the customized FlexSlider. You should now see only four images displayed in the carousel, giving it a sleek, modern appearance.

---

Conclusion

Congratulations! You’ve successfully added and customized a FlexSlider to your WooCommerce store without relying on third-party plugins. This method ensures a cleaner setup and a more professional look for your product image gallery.

If you enjoyed this tutorial, don’t forget to like, subscribe, and comment below! If you have any questions or run into issues, feel free to ask in the comments. I’m here to help!

Tags:
flexslider in woocommerce, flexslider wordpress, woocommerce gallery slider, wordpress product slider, woocommerce product slider elementor, product gallery slider for woocommerce, elementor product gallery slider, woocommerce product slider carousel, edit woocommerce pages with elementor, how to add a flexslider in woocommerce, how to add product slider in woocommerce, woocommerce product carousel slider elementor