- $USD
- English (United States)
- Hire an Expert
- Get Support
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:
- Navigate to Appearance > Customize > Additional CSS.
- Add the CSS Snippet
- 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
- Purchase and download the Product Gallery Slider for WooCommerce plugin from FME Addons
- You will receive a .zip file.
- Go to your WordPress admin panel.
- Navigate to Plugins > Add New.
- Click Upload Plugin and select the .zip file you downloaded.
- 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 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.
- The Ease and Comfort: Compared to a code snippet, using a plugin is preferable because of its ease of use. A plugin is convenient for adding any feature or functionality.
- Features Offered: A product gallery slider for WooCommerce plugin comes with ample advanced features compared to one you will add via coding. From advanced features like Lightbox integration, zoom-in and out functionality, video support, and more.
- Bug-Free: When coding, you will have to deal with several bugs that are not only energy-draining but time-consuming as well. On the contrary, a plugin is tested for all its flaws before making it available for your use. By using a product galley slider plugin, you do not have to worry about the mistakes that halt the website's operations.
- No Maintenance Required: A gallery slider plugin for WooCommerce does not require maintenance, as it is a requirement for custom coding. Over time, the source or the plugin owner updates the plugins to enhance their features. Coding involves manual updates and changes to enhance features.
- Compatibility: A product gallery slider WooCommerce plugin is compatible with your existing themes and plugins, creating no hurdles to smooth operation. Whereas, custom coding is unpredictable when it is incorporated into the source code. Some of your existing website features and plugins may contradict the new code added, thus affecting the website's smooth operation.
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!
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.
What Are The Benefits Of A Vertical Gallery Slider In Woocommerce?
As the users are more comfortable swiping up and down to explore your website, adding a vertical gallery slider to your WooCommerce product pages can offer great experiences.
Which Type Of Website Should Include A Vertical Slider?
There is no restriction on what type of website should include a vertical product slider because the plethora of benefits a single slider can bring is unimaginable.
Have more Questions? Don’t hesitate to Reach out to Us.