How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Jun 30, 2020 | Everything Divi for WordPress




By default, as soon as you add gallery images to your WooCommerce products, they’ll appear horizontally below your product’s featured image on the frontend of your product page design. In some specific designs, vertically stacking these woo gallery images might be more convenient, in fullscreen product page designs, for instance. If you’re looking for a quick way to vertically stack woo gallery images inside the product page template you create with Divi’s Theme Builder, you’ll love this tutorial. We’ll show you step by step how to get there. We’ll accompany this approach with and minimal product page template that you’ll be able to download for free as well! This tutorial works best on product pages that use images with a 1:1 ratio.

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Mobile

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-1 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Download The Product Page Template for FREE

To lay your hands on the free product page template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Build Product Page Template Inside Divi Theme Builder

Go to Divi Theme Builder & Add New Template

Start by going to the Divi Theme Builder and click on ‘Add New Template’.

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Use Template on All Products

We’ll use this template on all products, but feel free to modify the conditions however you like.

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-1 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Enter Template’s Body Template Editor

Once you’ve created the template, click on ‘Add Custom Body’ and continue by selecting ‘Build Custom Body’ to be redirected to the template editor.

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-2 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Start Building Category Page Template Body

Modify Section #1

Background Color

Inside the template editor, you’ll notice a section. Open that section and add a white background color.

  • Background Color: #ffffff

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-3 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Spacing

Move on to the design tab and remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-4 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-5 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Sizing

Without adding any modules yet, open the row settings, move on to the design tab and change the sizing settings accordingly:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 95%
  • Max Width: 2560px
  • Row Alignment: Center

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-6 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Spacing

We’ll use some custom top and bottom padding on smaller screen sizes too.

  • Top Padding: 100px (Tablet & Phone Only)
  • Bottom Padding: 100px (Tablet & Phone Only)

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-7 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Main Element CSS

To align column content on desktop, we’ll use two lines of CSS Code in the row’s main element. We’ll bring back the display property on tablet and phone.

Desktop:

display: flex; align-items: center;

Tablet & Phone:

display: block;

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-8 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Column 2 Gradient Background

Once the general row settings are done, open the second column’s settings and apply a radial gradient background.

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-9 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

  • Color 1: #f7f2ef
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 20%
  • End Position: 20%

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-10 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Column 2 Spacing

Move on to the column’s design tab and change the custom padding values across different screen sizes.

  • Top Padding: 30% (Desktop), 10% (Tablet & Phone)
  • Bottom Padding: 10%
  • Left Padding: 5%
  • Right Padding: 5%

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-11 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Add Woo Images Module to Column 1

Dynamic Content

Time to add modules! The first module we need in column 1 is a Woo Images Module. This tutorial works best if you’re using a featured image and gallery images with a 1:1 ratio. That way, we’ll be able to turn the images into circles in the upcoming steps. Once you’ve added the Woo Images Module, make sure the dynamic content is set to ‘This Product’.

  • Product: This Product

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-12 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Add Code Module to Column 1

Add CSS Code

Right below the Woo Images Module, we’re going to add a Code Module. The CSS code we insert in this Code Module will help us vertically stack woo gallery images on the left side of our column.

 <style> .single-product div.product .woocommerce-product-gallery .flex-viewport{ width: 80% !important; float: right; border-radius: 100vw; } .woocommerce-product-gallery__image.flex-active-slide { width: 12.5% !important; } .single-product div.product .woocommerce-product-gallery .flex-viewport img { width: 100%; } .et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav { width: 15% !important; float: left; } .et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li { width: 100%; float: none; } .et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img { border-radius: 100vw; } </style>

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-13 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Add Woo Title Module to Column 2

Dynamic Content

On to the next column. There, the first module we need is a Woo Title Module.

  • Product: This Product

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-14 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Title Text Settings

Move on to the module’s design tab and change the heading text settings as follows:

  • Title Font: PT Sans
  • Title Font Weight: Bold
  • Title Text Color: #000000
  • Title Text Size: 84px (Desktop), 60px (Tablet), 45px (Phone)

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-15 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Add Woo Description Module to Column 2

Dynamic Content

On to the next module, which is a Woo Description Module.

  • Product: This Product
  • Description Type: Short Description

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-16 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Text Settings

Modify the module’s text settings accordingly:

  • Text Font: Karla
  • Text Size: 17px (Desktop& Tablet), 15px (Phone)
  • Text Line Height: 1.9em

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-17 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Spacing

Complete the module settings by adding some top and bottom margin.

  • Top Margin: 5%
  • Bottom Margin: 5%

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-18 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Add Woo Price Module to Column 2

Dynamic Content

Add a Woo Price Module right below the Woo Description Module.

  • Product: This Product

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-19 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Price Text Settings

Move on to the module’s design tab and modify the price text settings as follows:

  • Price Font: PT Sans
  • Price Font Weight: Bold
  • Price Text Color: #ce8654
  • Price Text Size: 27px

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-20 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Add Woo Add to Cart Module to Column 2

Dynamic Content

The next and last module we need to complete this tutorial is a Woo Add to Cart Module.

  • Product: This Product

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-21 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Fields Settings

Move on to the design tab and change the fields settings as follows:

  • Fields Background Color: #ffffff
  • Fields Text Color: #000000
  • Fields Font: Open Sans

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-22 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

  • All Corners: 0px
  • Fields Bottom Border Width: 1px
  • Fields Bottom Border Color: #ce8654

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-23 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Button Settings

Then, style the button in the button settings.

  • Use Custom Styles For Button: Yes
  • Button Text Color: #ffffff
  • Button Background Color: #0a0201
  • Button Border Width: 0px
  • Button Border Radius: 100px

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-24 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

  • Button Font: PT Sans
  • Button Font Weight: Bold

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-25 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

  • Button Top Padding: 20px
  • Button Bottom Padding: 20px
  • Button Left Padding: 50px
  • Button Right Padding: 50px

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-26 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Spacing

And complete the module settings, and this tutorial, by adding some top margin to the Woo Add to Cart Module. Once you’re done modifying the product page template, make sure you save all Theme Builder changes before viewing the outcome on your product pages!

  • Top Margin: 5%

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-27 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Mobile

how-to-vertically-stack-woo-gallery-images-inside-your-divi-product-page-template-1 How to Vertically Stack Woo Gallery Images Inside Your Divi Product Page Template

Final Thoughts

In this post, we’ve shown you how to get creative with the product pages you build using Divi’s Theme Builder and the WooCommerce modules. More specifically, we’ve shown you how to vertically stack woo gallery images. This approach goes well with a fullscreen product page design, but it can come in handy for any kind of product page template you build. You were able to download the JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.


Source

WordPress Development

SEO NEWS

seo news

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.