How to Add SlideIn Product Info to Your Divi Product Page

How to Add Slide-In Product Info to Your Divi Product Page

The way you design your product pages says a lot about your shop in general. Your product page’s design is an important part of the purchase experience, so going the extra mile is often worth it. If you’re looking to create a product page that is a bit more interactive, you’ll love this post. In this tutorial, we’ll show you how to add slide-in product info inside a beautifully-built product page layout. We’ll also turn this layout into a product page template and you’ll be able to download the JSON file for free!

Let’s get to it.


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



product info

Download Slide-In Product Page Template for FREE

To lay your hands on the slide-in 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!

1. Add/Open WooCommerce Product

Product Details

Start by creating a new product or opening an existing one. To achieve the exact same outcome in design, you’ll need to add the following details to your product:

  • Name
  • Description
  • Product image with transparent background
  • Price
  • Category

product info

Enable Divi Builder & Modify Product Page Settings

Enable the Divi Builder and change the page layout in the top right corner.

product info



This article was written by Donjete Vuniqi and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top