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.
Preview
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.
Desktop
Mobile
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
Enable Divi Builder & Modify Product Page Settings
Enable the Divi Builder and change the page layout in the top right corner.
[…]
This article was written by Donjete Vuniqi and originally published on Elegant Themes Blog.