WP SITES

Log in

Show WooCommerce Variation Images in Slick Slider

—

by

Brad Dalton

This code enables you to automatically include variation featured images in a easy to customize slider, no plugins required. You can show your variation images in :

  • Any number of columns
  • With navigation arrows
  • With pagination dots below the slider
  • In any WooCommerce single product page hook position

The slider.js settings also enable you to change the number of columns at different screen widths so your slider is responsive when showing more than 1 column of variation images.

In this example, we remove the main product page image and replace it with the slider of variation images :

By default, the carousel is coded to display 3 variation images on desktops, 2 @ 768 px width and 1 @ 480 px screen width.

In this example above, we hook the carousel of variation images in below the main product image.

Demo Video

Shows the variation images hooked into the woocommerce_product_thumbnails hook as a 3 column carousel as well as a single column slider.

Installation

There’s 3 simple steps :

  1. Add the PHP code to the end of your child themes functions file.
  2. Upload the slider.js file to your child theme folder.
  3. Copy and paste the CSS to the end of your child themes style.css file and clear caching.

Once you’ve added variation images to your variations, they will display in a slider below your main product image.

Download Folder

Related Tutorials

Comments

34 responses to “Show WooCommerce Variation Images in Slick Slider”

  1. Swetha Gaddam Avatar
    Swetha Gaddam

    Hi,
    Have you given access to this code,

    https://wpsites.net/product/woocommerce-variation-thumbnails-in-slider/

    ?

    We are not getting as shown in demo video. Please help us to work it out.

    1. Brad Dalton Avatar
      Brad Dalton

      Please follow the installation instructions. Or Send WordPress and FTP access.

      1. Swetha Gaddam Avatar
        Swetha Gaddam

        Hi
        How to send you details.

  2. Swetha Gaddam Avatar
    Swetha Gaddam

    Hi,
    We just purchased your subscription. Please update the code as per the requirement and let us know.
    Thank you.

    1. Swetha Gaddam Avatar
      Swetha Gaddam

      Hi,
      Have you updated the code. Please let us know the status.
      Thank you.

      1. Brad Dalton Avatar
        Brad Dalton

        I’m working on this. Not sure how long it will take but maybe a few more days. I need to work out how to add a variation attribute option value to each thumbnail and then use jQuery to change the selected value in the drop down. Tried dozens of methods but none work at this stage.

        1. Swetha Avatar
          Swetha

          Hi,
          Do you think that you can work it out in 2 more working days? Also we posted some of our requirement regarding part payments, do you have any code for that?
          Please issue refund if you cant work it out in 2 more days as we will search any other source for this requirement.
          Thank you.

          1. Brad Dalton Avatar
            Brad Dalton

            This is what i have at the moment which shows the variation images and makes them clickable https://wpsites.net/wordpress-tutorials/add-variation-images-to-the-product-gallery-in-woocommerce/

            Update : I’m very close now and can produce this which changes the option value on variation thumbnail click :

          2. Brad Dalton Avatar
            Brad Dalton

            Here it is. 3 days work https://wpsites.net/?p=115275

            I can’t provide it under membership because of the time it took to complete unless its within 1 hour.

            Use coupon code 50%OFF and get a 50% discount.

          3. Swetha Gaddam Avatar
            Swetha Gaddam

            Hello,

            Please cancel our membership, we clearly asked you about our requirement and you said 75$. Now you are saying it is 150$. It is not the case that no one will use this code right? Many other who need this requirement will buy from you. We believed your word and took subscription. Now you are saying differently. Please cancel our subscription and refund the amount. We will try other source.
            Thank you.

          4. Brad Dalton Avatar
            Brad Dalton

            I can’t provide 3 days of work for $75. I promised free modification of existing code if it took 1 hour or less but it took far more than anticipated. You’re under no obligation to purchase however i did give you a voucher so you only need to pay another $75.

          5. Swetha Avatar
            Swetha

            Hi,
            Please cancel our membership subscription and issue refund.
            Thank you.

          6. Brad Dalton Avatar
            Brad Dalton

            No refunds after 3 days work. You can download the code and modify it yourself or find someone else to do the work for you but i am not working 3 days for free for anyone, nor should you expect anyone to do this after ordering custom work. $75 is not unreasonable for 3 days work. I only offered to modify the code for free if it took 1 hour or less.

            Any work for members which takes more than 1 hour is billable.

            You agreed to the terms and conditions which are clear at the time of signup.Membership does NOT provide unlimited consulting or unlimited custom coding work.

            More than 5000 members of the WordPress community have chosen WP SITES without complaint.

          7. Swetha Gaddam Avatar
            Swetha Gaddam

            Hi,
            You have not mentioned that in first day that you will charge more than 75$ for this. And your website policy is also 100% guarantee return if we wont access any of your code right? Then you are violating your policy and word. It is not our problem that it is 1 hr work or 3 days work, you took 3 days to achieve this as you cant complete in 1 hr, that’s not our fault. It is our mistake to trust your word and took subscription for no use and you taught us a lesson not to believe these type of websites and online service.

            If you and your website policy is genuine, please cancel our subscription and return and 75$. Otherwise keep it with you, and God is there to take action against wrong.

            Thank you.

          8. Swetha Gaddam Avatar
            Swetha Gaddam

            Hi,

            If you feel that 75$ is reasonable for this, we already paid that on your word. We are not asking unlimited consultations and custom works. We opted your service for only one small code and paid as you said. And after this code we no longer want your subscription or membership. Don’t feel that for 75$ we access all of your resources. We have not accessed any of your other codes yet and we don’t in future also, as we don’t need any of your other codes other than this. If you really feel 75$ is reasonable, you already took it from us and we paid. So please give us access to that code. Then you can cancel our subscription.

            If you informed us about this additional charge on the first day, we never subscribe to your website and wait until you provide us the code. It is clearly cheating. Think genuinely from your side, and give us access to that code and after we download it you cancel our subscription. So you already received
            75$ for your 3 days work and we get our code. Without this why we need your website subscription. Its waste for us.

            Hope you will understand and give us access to code.

            Thank you.

  3. Swetha Avatar
    Swetha

    We need only this code. 75$ for only this code?

    1. Brad Dalton Avatar
      Brad Dalton

      Yes

      1. Swetha Avatar
        Swetha

        Hi,
        Will this code works similar to this?
        https://www.washingtonvapeswholesale.co.uk/products/ske-crystal-original-disposable-vape-20mg-600-puffs-pack-of-10?variant=45293988544792

        Like if any one selects the variation images, that attribute will be selected automatically in the dropdown also.

        Please confirm, if it works in the similar way or not, we will subscribe now. If not we wont subscribe as the code is not useful for us.

        1. Swetha Avatar
          Swetha

          Hello,
          Can you please let me know, whether this code works similar to the functionality in below link
          https://www.washingtonvapeswholesale.co.uk/products/ske-crystal-original-disposable-vape-20mg-600-puffs-pack-of-10?variant=45293988544792

          1. Brad Dalton Avatar
            Brad Dalton

            The demo video shows what the code does. The variation images display below the main product image. The code can be modified to also display the selected variation attribute in the drop down however by default, it doesn’t, as seen in the demo video.

            Note : I may help you modify the code at no additional cost so it displays the attribute in the drop down but will consider this only after you have purchased. You will need to use a real name, in full when you purchase and an email address at your domain.

          2. Swetha Avatar
            Swetha

            Hi,
            Thanks for the reply. We will purchase as you said. Can you please let us know, how many hours will it take to customize the code as we require.

          3. Brad Dalton Avatar
            Brad Dalton

            After signup, don’t download the code and i’ll try and get it done within an hour sometime over the weekend then update the tutorial with the new code. If i can’t work it out, i’ll give you a refund as long as the code or any other code hasn’t been accessed.

          4. Swetha Avatar
            Swetha

            Hi,
            Now we are purchasing the subscription and don’t access any of your codes until you update this slider code. Please let us know, once you update this code.

            Also we have other requirement.
            We have a website built using woocommerce. We are a wholesale products seller. We have number of retailers who orders our products regularly and pay on part payments.

            For example Customer A orders order #1 with amount 100$ without paying anything. then orders order #4 with 150$. Then the customer due is 250$.
            The customer will pay on part payments to our agent and we need to enter them some where in admin backend as a payment by customer and update due and show payments in the customer my account page.

            The customers should order even when they wont pay anything.

            Do you have any code with this type of functionality accepting orders without payment and par payments entry from admin panel.

      2. Swetha Avatar
        Swetha

        Hi,
        Can you please give us code access once and cancel our subscription then, we dont need your subscription or refund or other codes access anymore other than this. Please give us access to

        https://wpsites.net/?p=115275

        code only.

        Thank you.

        1. Brad Dalton Avatar
          Brad Dalton

          You have had access since you signed up.

          1. Swetha Avatar
            Swetha

            Hi,
            We don’t have accessed any of your codes yet since our sign up. We need just one piece of code only what we requested you. Please provide that for the 75$ we already paid for subscription, after that you can cancel our subscription, as we don’t want subscription or other codes or refund. Please provide this code.
            Thank you.

          2. Brad Dalton Avatar
            Brad Dalton

            Use this link to download the code. It has always worked at the end of the tutorial. Depending on your browser, you might need to copy and paste the link into your browser.

            Use this link to cancel after download.

          3. Swetha Gaddam Avatar
            Swetha Gaddam

            Hi,
            Thank you so much for giving us access to the code. We downloaded and did these 3 steps

            1)Pasted slider.js file to your child themes custom.js file.
            2) Copy and paste the PHP code from the functions file to your child themes functions file.
            3) Copied and pasted the CSS from the style.css file to the end of your child themes stylesheet and clear caching.

            But the variations image is not displaying below product main image.
            Do we need to do anything more to work it out.

            Thank you.

          4. Brad Dalton Avatar
            Brad Dalton

            2. Upload the slider.js file to your child theme folder. NOT 1) Pasted slider.js file to your child themes custom.js file.

        2. Swetha Gaddam Avatar
          Swetha Gaddam

          Hi,
          Yes uploaded slider.js file in to child theme. But not working as shown in demo
          https://wpsites.net/product/woocommerce-variation-thumbnails-in-slider/

          Sent you login details of wordpress and FTP from your websites contact form, please help us to make this functionality live.

          Thank you.

          1. Swetha Gaddam Avatar
            Swetha Gaddam

            Hi,
            Please ignore details sent from your website contact form and consider email forwarded to your email directly. Please help us as soon as possible.
            Thank you.

          2. Brad Dalton Avatar
            Brad Dalton

            You have a plugin conflict, i deactivated the plugin and works perfectly.

            Make sure you clear all caching types including server, plugin and browser caching.

  4. Swetha Avatar
    Swetha

    Hi,
    We need only this slider code, how much it will be cost? can we get this for free?

    1. Brad Dalton Avatar
      Brad Dalton

      $75

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.