![]() When you open the list of all elements, you can filter the modules that can be used on the Single Product thanks to the WooCommerce Product tab, screenshot. Important Plugins support and compatiblity.Product Content Block with the Frontend Editor.How to set up a product template with Page Builder Description.How to set up a structured product template.How to set up a simple product template.With Uncode, you can design your dream Single Product Page with the new WooCommerce Builder, visually and without coding. This advanced functionality is made possible by the new WooCommerce Product Builder modules and the Content Block. Having the possibility of not being bound to pre-set layouts and independently deciding the perfect design to emphasize your product is a huge advantage.įrom Uncode 2.3.0, it's possible to create custom WooCommerce Single Product Page layouts, and to use these layouts as a design matrix for all or specific products. In fact, from the single product page (where a buyer has all the information about a product) are conveyed most of the purchases. Undoubtedly one of the essential pages of an eCommerce website is the single product page. The CSS code we insert in this Code Module will help us vertically stack woo gallery images on the left side of our column. Right below the Woo Images Module, we’re going to add a Code Module. Once you’ve added the Woo Images Module, make sure the dynamic content is set to ‘This Product’. That way, we’ll be able to turn the images into circles in the upcoming steps. This tutorial works best if you’re using a featured image and gallery images with a 1:1 ratio. Time to add modules! The first module we need in column 1 is a Woo Images Module. Top Padding: 30% (Desktop), 10% (Tablet & Phone)Īdd Woo Images Module to Column 1 Dynamic Content.Move on to the column’s design tab and change the custom padding values across different screen sizes. Once the general row settings are done, open the second column’s settings and apply a radial gradient background. We’ll bring back the display property on tablet and phone. To align column content on desktop, we’ll use two lines of CSS Code in the row’s main element. Bottom Padding: 100px (Tablet & Phone Only).Top Padding: 100px (Tablet & Phone Only).We’ll use some custom top and bottom padding on smaller screen sizes too. Without adding any modules yet, open the row settings, move on to the design tab and change the sizing settings accordingly: Move on to the design tab and remove all default top and bottom padding next.Ĭontinue by adding a new row using the following column structure: Open that section and add a white background color. Inside the template editor, you’ll notice a section. Start Building Category Page Template Body Modify Section #1 Background Color 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. We’ll use this template on all products, but feel free to modify the conditions however you like. Start by going to the Divi Theme Builder and click on ‘Add New Template’. 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 You will not be “resubscribed” or receive extra emails. 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. To gain access to the download you will need to subscribe to our newsletter by using the form below. To lay your hands on the free product page template, you will first need to download it using the button below. Desktopĭownload The Product Page Template for FREE 6.8 Add Woo Add to Cart Module to Column 2īefore we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.6.6 Add Woo Description Module to Column 2.6 Start Building Category Page Template Body.5.3 Enter Template’s Body Template Editor. ![]() 5.1 Go to Divi Theme Builder & Add New Template.5 Build Product Page Template Inside Divi Theme Builder.Please check your email address to confirm your subscription and get access to free weekly Divi layout packs! 2 Download The Product Page Template for FREE.
0 Comments
Leave a Reply. |