Building a WooCommerce Store with Breakdance in 15 Minutes
This WooCommerce Quick Start tutorial demonstrates how to create a fully functional and beautiful WooCommerce store in just 15 minutes. The site will include a shop page with sidebar filters, product pages, a sidebar cart, a two-column cart page, a checkout page, and an account dashboard.
Initial Setup
Activating Breakdance
- Ensure WooCommerce is installed.
- Activate Breakdance in the WordPress admin panel.
- Refresh the front end to see the default modern styles applied by Breakdance.
Customizing Global Styles
Setting Text Colors and Brand Color
- Go to Settings > Global Settings > Colors in Breakdance.
- Set the text color and heading colors to your desired colors.
- Change the brand color to your brand’s color. The brand color will affect elements like sale accents and add-to-cart buttons.
Customizing Button Styles
- Under Settings > Global Settings > Buttons, modify the primary button style as desired.
- Adjust the secondary button style as desired.
Setting Up Typography
- In Settings > Global Settings > Typography, choose fonts for headings and body (e.g., Marcellus for headings and Work Sans for body).
- Adjust the base size and ratio for responsive typography.
Customizing Form Fields
- Navigate to Settings > Global Settings > Forms.
- Set the form fields to have desired styles (e.g., 2-pixel borders with no radius and add a shadow effect).
Customizing WooCommerce Settings
- Under Settings > Global Settings > WooCommerce you can set specific styles for colors, buttons, typography, and forms for WooCommerce only without impacting the rest of the site.
- You may also go to Settings > Global Settings > WooCommerce > Other to set styles for wrappers, tables, notices, ratings, product boxes, and other settings specific to WooCommerce.
Ensuring Mobile Responsiveness
Adjust typography settings for different device sizes to ensure a responsive and visually appealing layout across all devices.
Customizing Individual WooCommerce Pages
Adding a Mini Cart to the Header
- Open a Header in Breakdance.
- Add the Mini Cart element and customize its appearance and behavior.
Customizing the Shop Page
- Create a new Template for the shop page with a two-column layout.
- Add the Shop Filters element to the left column and the Shop Page element to the right column.
- Adjust the column width and products per row for an optimal layout.
Finalizing and Reviewing the Store
Save all changes and review the store on the front end to ensure all customizations are correctly applied.
Additional Notes
This tutorial provides a quick and efficient way to build a stylish and functional WooCommerce store using Breakdance.
