Let’s make a Woocommerce shop with Breakdance

Let’s make a Woocommerce shop with Breakdance

Here’s a free course on how to make a Woocommerce shop with Breakdance.

If you need to get Breakdance, please use this (affiliate) link to help fund this venture.

Why Breakdance?

  • Super clean code output
  • Surprisingly developer friendly
  • Element builder is awesome
  • Easy to use your own design library
  • Easy woocommerce implementation

So yeah, I’ve been playing with it for a while, and it’s really good.

The Playlist

The video below is a playlist, you can see the little list icon:

So please bookmark this page and revisit so you can keep up, or subscribe on YouTube.

Or check it out directly on YT

Extras

Download the Assets

I might add more stuff as I progress, but I think I got most of the stuff you need.

Links

//www.mamp.info/en/mac/

//www.cupcakeipsum.com/

//www.theleagueofmoveabletype.com/league-gothic

The snippet from Lesson 04

Lesson 04 is scheduled to go live on Sept 23rd, 2022

html {
    font-size: var(--bde-body-font-size);
}

This snippet will be useful depending on your approach to responsive typography.

The snippet from Lesson 10

.breakdance .bde-rich-text-8216-107 div.ee-post {
  padding: 0;
}

The snippet from Lesson 11, 12

.breakdance .bde-rich-text-8216-107 * {
	height: 100%;
}
.breakdance .bde-rich-text-8216-107 img {
	object-fit: cover;
	object-position: center;
}
.breakdance .bde-rich-text-8216-107 .section-container {
	height: 100vw;
	max-height: calc(100vh - 120px);
}

The snippet from Lesson 14

.breakdance .bde-rich-text-8216-107 {
	overflow-x: hidden;
}
.breakdance .bde-rich-text-8216-107:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 50%;
	background-color: #000;
	transform: translate(-50%,0);
}

Please remember that the first snippet goes in the section, and the second goes in the loop module.

The snippet from Lesson 18

This goes in the custom plugin that we added in the beginning of this course.

function new_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'new_excerpt_length');

Source: //www.a2hosting.com/kb/installable-applications/optimization-and-configuration/wordpress2/changing-the-excerpt-length-in-wordpress

and the CSS for .image-ratio-11

.breakdance .bde-rich-text-8216-107 .bde-image, 
.breakdance .bde-rich-text-8216-107 .breakdance-image, 
.breakdance .bde-rich-text-8216-107 .breakdance-image-container, 
.breakdance .bde-rich-text-8216-107 .breakdance-image-clip {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	position: relative;
}
.breakdance .bde-rich-text-8216-107 .breakdance-image-object {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

There probably will be more snippets.

More content will be added here as more videos go live.

I have a lot of other (paid and free) courses covering lots of topics at different price points so come have a look.

Why no ads?

Hi, my name is PK, and welcome to my website, almost inevitable design. I maintain and publish on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.
  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to product better content.

Any bit of interest helps. Even sharing with your feidns, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

The Web Design Space

TWDS is my web design agency. If you're looking for premium quality, reliable, web design and development, come see what we're about!
Learn More
Choose "Paythen" at checkout for an interest free 10 week payment plan.
Leave a Reply

Your email address will not be published. Required fields are marked *

    New tutorials