Custom Product Lists

Introduction

In this tutorial, you’ll learn how to create custom product lists for your WooCommerce site using Breakdance.

Custom WooCommerce Layout Overview

Instead of a typical WooCommerce shop page, we will be customizing it to have a unique look. This includes:

• A background slider showcasing the product gallery.
• Product details such as title, short description, price.
• Add to cart button with quantity chooser.
• A slide-in effect for product details.
• Displaying multiple products with a distinct layout for each.

Creating a Custom Product Layout

Setting up a Global Block

1. Go to your WordPress admin panel.
2. Navigate to Breakdance > Global blocks.
3. Add a new Global block named “Custom Product Layout”.
4. Edit this new block in Breakdance.

Designing the Layout

1. Add a section and set its background to a slideshow.
2. Use Dynamic data to link the slideshow to the product gallery.
3. Adjust the section’s height based on viewport height.
4. Insert a div with a white background, and set padding, border radius, and shadows.
5. Add a Product Builder element and delete any unwanted default items.
6. Include the product title and post excerpt (short description).
7. Add a div containing the product price and add-to-cart button.
8. Style and adjust the elements to your liking.
9. Select the Div that contains all of your product details and set its width to 600px.
10. Set the Div’s bottom margin under Design > Spacing to -128px.
11. Select the Section that contains all of the elements and set it to align everything to the center horizontally, and to the bottom vertically.

Applying Animations

1. Select the white background Div that contains your product details.
2. Visit the settings tab and select animations.
3. Enable scrolling animation.
4. Adjust animation triggers and values to get the desired effect.

Implementing the Custom Layout

Creating a Shop Archive Template

1. Go back to WordPress and navigate to Breakdance > Templates.
2. Add a new template and choose “Shop Page and All Product Archives”.
3. Edit this template in Breakdance.

Customizing the Shop Page Element

1. Add a Shop Page element.
2. Within the products list, disable all default elements.
3. Add a custom area linked to the “Custom Product Layout” global block.
4. Adjust the layout settings, such as products per row and spacing between products.

Additional Notes

This custom layout allows you to deviate from typical WooCommerce designs and offers a fresh and distinctive look to your shop page. The power of Breakdance allows for such customizations without any coding.