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
- Go to your WordPress admin panel.
- Navigate to Breakdance > Global blocks.
- Add a new Global block named “Custom Product Layout”.
- Edit this new block in Breakdance.
Designing the Layout
- Add a section and set its background to a slideshow.
- Use Dynamic data to link the slideshow to the product gallery.
- Adjust the section’s height based on viewport height.
- Insert a div with a white background, and set padding, border radius, and shadows.
- Add a Product Builder element and delete any unwanted default items.
- Include the product title and post excerpt (short description).
- Add a div containing the product price and add-to-cart button.
- Style and adjust the elements to your liking.
- Select the Div that contains all of your product details and set its width to 600px.
- Set the Div’s bottom margin under Design > Spacing to -128px.
- Select the Section that contains all of the elements and set it to align everything to the center horizontally, and to the bottom vertically.
- Select the white background Div that contains your product details.
- Visit the settings tab and select animations.
- Enable scrolling animation.
- Adjust animation triggers and values to get the desired effect.
Implementing the Custom Layout
Creating a Shop Archive Template
- Go back to WordPress and navigate to Breakdance > Templates.
- Add a new template and choose “Shop Page and All Product Archives”.
- Edit this template in Breakdance.
Customizing the Shop Page Element
- Add a Shop Page element.
- Within the products list, disable all default elements.
- Add a custom area linked to the “Custom Product Layout” global block.
- Adjust the layout settings, such as products per row and spacing between products.
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.