title: Modify Woocommerce Flickity Slider from Horizontal to Vertical Layout
body: <p>I'm hoping that someone might be able to help me with this issue. I'm working within a premade Wordpress theme called Flatsome. It uses the Foundations framework.</p>
  
  <p>Within the default configuration the Woocommerce thumbnails appear in the standard location which is beneath the main product image. I would like to move the thumbnails from below the product image to the left of the product image.</p>
  
  <p>The theme is using the Flickity slider so in order to do this I need to modify the layout of the theme, which I can do myself, but also modify the slider so that it's a vertical slider rather than a horizontal slider.</p>
  
  <p>To see a real life example of this please visit</p>
  
  <p><a href="http://flatsome.uxthemes.com/product/wicked-ss-o-neck-selected-homme/" rel="nofollow">http://flatsome.uxthemes.com/product/wicked-ss-o-neck-selected-homme/</a></p>
  
  <p>The above site is the exact same code as the site that I'm working upon. Below is the code that is used for the product thumbnails.</p>
  
  <pre><code>&lt;ul class="product-thumbnails  thumbnails js-flickity slider-nav-small"
      data-flickity-options='{ 
              "cellAlign": "left",
              "wrapAround": false,
              "autoPlay": false,
              "prevNextButtons":true,
              "asNavFor": ".product-gallery-slider",
              "percentPosition": true,
              "imagesLoaded": true,
              "pageDots": false,
              "selectedAttraction" : 0.1,
              "friction": 0.6,
              "rightToLeft": false,
              "contain": true
          }'
      &gt;           
      &lt;li class="is-nav-selected first"&gt;&lt;a href=""&gt;
          &lt;img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Top-Main-Custom-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="Angel-Top-Main (Custom)" /&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a  href="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Top-Main-Custom.jpg" class="zoom" title="" data-rel="prettyPhoto[product-gallery]"&gt;&lt;img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Top-Main-Custom-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="Angel-Top-Main (Custom)" title="Angel-Top-Main (Custom)" /&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a  href="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Tops1.jpg" class="zoom" title="" data-rel="prettyPhoto[product-gallery]"&gt;&lt;img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Tops1-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="Angel-Tops1" title="Angel-Tops1" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a  href="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Tops2.jpg" class="zoom" title="" data-rel="prettyPhoto[product-gallery]"&gt;&lt;img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-Tops2-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="Angel-Tops2" title="Angel-Tops2" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a  href="http://gypsyofeden.com.au/wp-content/uploads/2016/08/ANGEL-TOP3.1-1.jpg" class="zoom" title="" data-rel="prettyPhoto[product-gallery]"&gt;&lt;img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/ANGEL-TOP3.1-1-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="ANGEL-TOP3.1" title="ANGEL-TOP3.1" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a  href="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-top4.1.jpg" class="zoom" title="" data-rel="prettyPhoto[product-gallery]"&gt;&lt;img width="114" height="130" src="http://gypsyofeden.com.au/wp-content/uploads/2016/08/Angel-top4.1-114x130.jpg" class="attachment-shop_thumbnail size-shop_thumbnail" alt="Angel-top4.1" title="Angel-top4.1" /&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>I found the following example on Codepen which looks like it's exactly what I want yet it's above my skill level to be able to implement it within my current website.</p>
  
  <p><a href="https://codepen.io/desandro/pen/dMjbjR" rel="nofollow">https://codepen.io/desandro/pen/dMjbjR</a></p>
  
  <p>Does anybody know how I might be able to achieve these? To be honest if someone can assist me with the css / flickity settings to modify the slider into a vertical slider then I can do the rest with the positioning and layout.</p>
  
  <p>Thanks so much</p>
  
  <p>Byron</p>