How to Display Product Gallery Vertically in WooCommerce?

WooCommerce
July 10, 2024,
How to Display Product Gallery Vertically in WooCommerce?

Is your WooCommerce store's product gallery stuck in a horizontal rut? Does scrolling left and right leave your customers feeling frustrated?

Ready to boost sales and impress your customers? This blog post reveals how to create captivating product displays. We're exploring vertical galleries, a powerful tool to increase engagement and showcase your products in a fresh way.

Improving your WooCommerce store's product gallery can greatly enhance the user experience, making it easier for customers to browse and enjoy your products. This post will guide you through two methods to display your product gallery vertically.

Get ready to elevate your store's presentation with these two simple methods to make your product galleries stand out!

Method 1: CSS Snippet

Edit the WooCommerce Product Gallery CSS

It's a super simple way to change your gallery layout, but it does require some basic CSS knowledge and the ability to add a smidge of code to your WordPress theme. Think of it like giving your product gallery a makeover with simple coding! 

Here's how it works:

  1. Navigate to Appearance > Customize > Additional CSS.
  2. Add the CSS Snippet
  3. Insert the following CSS code into the Additional CSS section

/* Vertically align WooCommerce product gallery */

.woocommerce-product-gallery {

    display: flex;

    flex-direction: column;

}

.woocommerce-product-gallery__wrapper {

    order: 2;

}

.woocommerce-product-gallery__image {

    order: 1;

}


Publish Your Changes

Click Publish to save the changes.

This CSS snippet rearranges the product gallery images to display vertically. It utilizes flexbox properties to adjust the layout, making the main product image and the gallery thumbnails stack vertically.

Method 2: Using WooCommerce Product Gallery Slider Plugin

The WooCommerce Product Gallery Slider plugin lets you go vertical, of course, but it also unlocks a whole toolbox of cool features. We're talking swanky sliders, automatic image transitions (autoplay), and even the ability to show videos alongside your product shots. Here is the step-by-step method to use this plugin


Steps Overview

Step 1: Installation and Activation

Step 2: Configurations

Step 3: General Settings’

Step 4: Thumbnail Settings

Step 5: Bullets Settings

Step 6: Arrows Settings

Step 7:Lightbox Settings

Step 8: Zoom Settings

Step 9: Rule Based Settings

Lets discuss these steps in details

Step 1: Installation and Activation

  1. Purchase and download the Product Gallery Slider for WooCommerce plugin from FME Addons
  2. You will receive a .zip file.
  3. Go to your WordPress admin panel.
  4. Navigate to Plugins > Add New.
  5. Click Upload Plugin and select the .zip file you downloaded.
  6. Click Install Now, and after installation, click Activate.

Step 2: Configurations

Go to WooCommerce > Settings > and then Click on the Gallery Slider tab to configure the WooCommerce Gallery Slider Plugin.

Step 3: General Settings

In general settings, you can configure basic settings like enabling the slider, setting autoplay, and choosing font colors.

  • Enable: Check this to activate the gallery slider on your WooCommerce Store.
  • Product/Category Restriction: Select the Products and Categories you want to apply the gallery slider
  • Autoplay Slider: Enable or disable the autoplay feature for the slider.
  • Enable Numbering on Gallery: Enable numbering on the slider images.
  • Number Font Color: Select the font color for the slider numbers.
  • Autoplay Timeout: Set the duration for the autoplay timer. 

Step 4: Thumbnail Settings

In Thumbnail settings, you can manage thumbnail display, layout, and border colors.

  • Hide Thumbnails: Choose to hide gallery thumbnails on the product page.
  • Thumbnails to Show: Set the number of thumbnails to display.
  • Thumbnail Slider Layout: Choose between horizontal, vertical left, or right layout.
  • Selected Image Border Color: Set the border color for the selected image in the gallery.

Step 5: Bullets Settings

In bullet settings, you can control the appearance and placement of bullets in the gallery slider.

  • Show Bullets: Enable bullets for the image gallery slider.
  • Bullet Shape: Choose the shape of the bullets (circle, square, or lines).
  • Counter Bullets Font Color: Select the font color for bullet hover.
  • Bullets Placement: Set the placement of bullets (inside or below the image).
  • Bullets Position: Set the position of bullets when placed inside the image.
  • Show Bullets Thumbnail: Show thumbnails on hover bullets if placed below the image.
  • Bullets Background Color: Set the background color of bullets.
  • Bullets Hover Color: Select the hover color for bullets. 

Step 6: Arrows Settings

In arrows settings, you can set options for navigation icons, including their shape, color, and behavior.

  • Show Navigation Icons: Enable arrow buttons to navigate images in the slider.
  • Show Navigation On: Choose to show navigation on hover or as fixed.
  • Navigation Button Shape: Select the shape of the navigation buttons (circle or square).
  • Navigation Button Background Color: Set the background color of the navigation buttons.
  • Navigation Button Hover Color: Choose the hover color for navigation buttons.
  • Navigation Icon Color: Select the color of the icon shown in the navigation buttons.
  • Select Navigation Icon: Choose the icon to display in the navigation buttons. 

Step 7: Lightbox Settings

In Lightbox settings, you can enable and customize the lightbox feature for product images.

  • Light Box: Enable the lightbox feature.
  • Lightbox Icon BG Color: Set the background color for the lightbox icon.
  • Lightbox BG Hover Color: Select the background hover color for the lightbox icon.
  • Lightbox Icon Color: Choose the color for the lightbox icon.
  • Lightbox Position: Set the position for the lightbox icon.
  • Select Lightbox Icon: Choose an icon for the lightbox button.
  • Lightbox Frame Width (px): Set the width of the lightbox frame.
  • Lightbox Slide Effect: Select the slide effect for the lightbox.

Step 8: Zoom Settings

In Zoom settings, you can configure zoom options, including frame dimensions and radius.

  • Zoom: Enable the zoom box on hover.
  • Zoom Box Frame Width (px): Set the zoom box frame width in pixels.
  • Zoom Box Frame Height (px): Set the zoom box frame height in pixels.
  • Zoom Box Radius (%): Choose the zoom box frame radius. 

Step 9: Rule Based Settings

Add new rules or delete existing ones to configure settings for specific products or categories.

Why Use Vertical Gallery Slider for WooCommerce Plugin?

  • Mobile Magic: Think about it - how do you browse your phone? Up and down, right? Vertical galleries make it a breeze for your customers to explore your products on their smartphones, no awkward swiping required!
  • Product in the Spotlight: Vertical layouts give each of your products a starring role. Customers get a clear, close-up view of all the details, especially important for those intricate designs or products with lots of variations.
  • Stop, Scroll, and Stare: Let's face it, horizontal galleries can be a snooze. Vertical galleries break the mold, grabbing attention and making customers want to spend more time checking out your awesome products.
  • Space Saving Superhero: Cramped product page? No problem! Vertical galleries work wonders in tight spaces, letting you showcase more products without overwhelming your customers.
  • Modern Makeover: Want your store to feel fresh and up-to-date? Vertical galleries do just that! They create a modern, contemporary vibe that younger shoppers, used to scrolling through social media stories, will dig.

Pros and Cons: CSS Snippet vs. WooCommerce Product Gallery Slider Plugin

Method 1: CSS Snippet

Pros

  • Simple and Free: This method requires no plugin installation and only basic CSS knowledge.
  • Lightweight: Doesn't add extra bloatware to your website.
  • Customization: Offers some control over the layout with CSS code.

Cons

  • Limited Functionality: Only allows for basic vertical layout change.
  • Technical Knowledge Required: Needs some understanding of CSS to implement.
  • Potential for Errors: Incorrect code can break your product gallery display.
  • Difficult to Update: Changes require manual code editing for future adjustments.

Method 2: WooCommerce Product Gallery Slider Plugin

Pros

  • Wider Functionality: Provides various features like sliders, autoplay, lightbox, video support, and more.
  • User-Friendly: Easy to install and configure through the WordPress dashboard.
  • Mobile-Responsive: Ensures smooth product browsing on smartphones with vertical layouts.
  • Multiple Customization Options: Offers extensive control over layout, colors, animations, and more.
  • Easier Updates: Plugin updates provide new features and bug fixes without manual coding.

Cons

  • Cost: Requires purchasing a plugin, though some free versions with limited features might be available.
  • Potential Plugin Conflict: This may conflict with other plugins on your site.
  • Reliance on Plugin Updates: Plugin functionality depends on continued developer support.

Overall, vertical product galleries can enhance the user experience, improve product visibility, and potentially lead to increased sales.

Why Choose WooCommerce Gallery Slider Plugin over Code Snippet?

The WooCommerce Product Gallery Slider Plugin goes beyond a simple vertical layout, offering a powerful suite of features like swanky sliders, autoplay, lightbox functionality, and even video support. 

This user-friendly plugin lets you create a more engaging and mobile-friendly shopping experience for your customers, ultimately leading to happy shoppers and happy you! Explore the plugin's features and see how it can transform your product presentation!

To Conclude

These were the two awesome ways to take your product galleries from horizontal to vertical sliders. Whether you're a code pro who wants to use custom CSS, or you prefer a plugin that does everything for you, there's an option that fits perfectly. The end result? A more engaging and user-friendly shopping experience for your customers, which means happy shoppers and happy you!

FAQs

How can I create a vertical product gallery in WooCommerce?

There are two primary methods:

  • Using a CSS Snippet to modify the WooCommerce Product Gallery.
  • Using the WooCommerce Product Gallery Slider Plugin which offers advanced features and customization options.

Can I configure the gallery slider for specific products or categories?

Yes, WooCommerce Product Slider allows you to apply the gallery slider to specific products or categories through its settings. You can enable or restrict the slider based on your preferences.

Have more Questions? Don’t hesitate to Reach out to Us.