Shop Landing Page with WooCommerce Blocks

Damon Cook Avatar

·

Shop Landing Page with WooCommerce Blocks

Creating a landing page for your WooCommerce shop has become easier with full site editing features.

Let’s investigate how to engage and funnel users to key areas of your e-commerce shop with a modern layout with the Frost theme and blocks.

Watch a video walk-through for this tutorial.

Of course, we’ll need the WooCommerce plugin. We’ll be importing WooCommerce test data to populate our store for this tutorial (experimental_fashion_sample_9_products.csv). However, if you have real-world products, then all the better!

Let’s take a quick peek at what we’re going to build. 👇

Example landing page with WooCommerce and Frost theme
Example landing page with block hierarchy outlined

Store banner notice

The first thing that appears on this page is a site banner. This is easily accomplished by following Sam Munoz’s post: Create a Top Call-to-Action Bar with Blocks. Then, just follow her handy guide to create your own.

✅ Store banner notice

Creating a site header is crucial to enable your customers to navigate your shop easily. Fortunately, with the addition of the relaunched Mini Cart template part in WooCommerce 6.2, we can add quick access to the cart.

Site header with Mini Cart block

However, getting the navigation and Mini Cart to sit alongside one another can be tricky. But, fear not; the Row block can be of service.

Here is our block recipe for creating the site header for this landing page:

Group – Alignwide

Row – Justification = Space Between Items

Site Logo

Row – Justification = Justify Items Right

Navigation

Mini Cart

Site header block markup

<!-- wp:group {"align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-group alignwide"><!-- wp:site-title /--> <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} --> <div class="wp-block-group"><!-- wp:navigation {"ref":62,"layout":{"type":"flex","orientation":"horizontal"},"style":{"spacing":{"blockGap":"20px"}}} /--> <!-- wp:woocommerce/mini-cart {"addToCartBehaviour":"open_drawer","textColor":"primary","style":{"typography":{"fontSize":"14px"}}} /--></div> <!-- /wp:group --></div> <!-- /wp:group -->
Code language: HTML, XML (xml)

Hero Pattern with Cover and Buttons Block

Next, we’ll create a standard call-to-action area to highlight an essential store category or singular product. Depending on your store’s information architecture, this may vary, but it is a common thing to see these days.

Hero pattern with large image and call-to-action button

Group

Cover – Min-height = 726px, Overlay = 30%

Group

Paragraph – Font Size = Small, Aligned center

Heading – Aligned center

Buttons – Aligned center

Button

Hero pattern block markup

<!-- wp:group {"tagName":"section","align":"full","layout":{"inherit":false}} --> <section class="wp-block-group alignfull"><!-- wp:cover {"url":"https://images.unsplash.com/flagged/photo-1570733117311-d990c3816c47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80","id":43,"dimRatio":30,"focalPoint":{"x":"0.50","y":"0.29"},"minHeight":726,"minHeightUnit":"px","gradient":"black-tertiary","isDark":false} --> <div class="wp-block-cover is-light" style="min-height:726px" id="featured"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim wp-block-cover__gradient-background has-background-gradient has-black-tertiary-gradient-background"></span><img class="wp-block-cover__image-background wp-image-43" alt="" src="https://images.unsplash.com/flagged/photo-1570733117311-d990c3816c47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" style="object-position:50% 29%" data-object-fit="cover" data-object-position="50% 29%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"textColor":"base"} --> <div class="wp-block-group has-base-color has-text-color"><!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1"}},"textColor":"base","fontSize":"small"} --> <p class="has-text-align-center has-base-color has-text-color has-small-font-size" style="line-height:1">FALL COLLECTION</p> <!-- /wp:paragraph --> <!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"top":"0px","bottom":"1.5rem"}}},"textColor":"background","fontSize":"max-60"} --> <h2 class="has-text-align-center has-background-color has-text-color has-max-60-font-size" style="margin-top:0px;margin-bottom:1.5rem">Mega Lounge</h2> <!-- /wp:heading --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} --> <div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"0px"}},"className":"is-style-outline-base"} --> <div class="wp-block-button is-style-outline-base"><a class="wp-block-button__link wp-element-button" style="border-radius:0px">Show Now →</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div> <!-- /wp:group --></div></div> <!-- /wp:cover --></section> <!-- /wp:group -->
Code language: HTML, XML (xml)

Store Category Columns

Now that we’ve got our large call-to-action area to highlight our primary funnel, let’s start to expand to key categories in our store and allow visitors to understand further the context of our offering.

Three columns of categories with call-to-action

Group – Background Color = background, Padding = 5rem / 5rem / 6rem / 5rem, Margin = 5rem [top]

Heading

Columns

Column

Featured Category (WooCommerce block) – Image Fit = Cover, Overlay = 50%

Column [repeat for each column]

Category Columns block markup

<!-- wp:group {"tagName":"section","style":{"spacing":{"margin":{"top":"5rem"},"padding":{"top":"5rem","right":"5rem","bottom":"6rem","left":"5rem"}},"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"backgroundColor":"main","textColor":"base","layout":{"inherit":false},"fontSize":"large"} --> <section class="wp-block-group has-base-color has-main-background-color has-text-color has-background has-link-color has-large-font-size" style="margin-top:5rem;padding-top:5rem;padding-right:5rem;padding-bottom:6rem;padding-left:5rem"><!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"top":"0rem","bottom":"2rem"}}},"fontSize":"max-36"} --> <h2 class="has-text-align-center has-max-36-font-size" style="margin-top:0rem;margin-bottom:2rem">Latest Trends <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-tertiary-color">&amp;</mark> Outerwear</h2> <!-- /wp:heading --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column --> <div class="wp-block-column"><!-- wp:woocommerce/featured-category {"editMode":false,"imageFit":"cover","categoryId":19,"overlayGradient":"linear-gradient(135deg,rgba(0,0,0,1) 50%,var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dprimary) 100%)","style":{"color":{"text":"#ffffff"}}} --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} --> <div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline-base"} --> <div class="wp-block-button is-style-outline-base"><a class="wp-block-button__link wp-element-button" href="#">Shop now →</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --> <!-- /wp:woocommerce/featured-category --></div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"><!-- wp:woocommerce/featured-category {"editMode":false,"imageFit":"cover","categoryId":20,"overlayGradient":"linear-gradient(135deg,rgba(0,0,0,1) 50%,var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dsecondary) 100%)"} --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} --> <div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline-base"} --> <div class="wp-block-button is-style-outline-base"><a class="wp-block-button__link wp-element-button" href="#">Shop now →</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --> <!-- /wp:woocommerce/featured-category --></div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"><!-- wp:woocommerce/featured-category {"editMode":false,"imageFit":"cover","categoryId":18,"overlayGradient":"linear-gradient(135deg,rgba(0,0,0,1) 50%,var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dtertiary) 100%)"} --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} --> <div class="wp-block-buttons" style="margin-top:0px;margin-bottom:0px"><!-- wp:button {"className":"is-style-outline-base"} --> <div class="wp-block-button is-style-outline-base"><a class="wp-block-button__link wp-element-button" href="#">Shop now →</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --> <!-- /wp:woocommerce/featured-category --></div> <!-- /wp:column --></div> <!-- /wp:columns --></section> <!-- /wp:group -->
Code language: JavaScript (javascript)

Category Columns with Visual Differentiation

We can continue to break down the hierarchy of information on the page by creating a bit of visual differentiation for secondary categories and even a Sale call-to-action.

Three columns of categories with call-to-action continued

Columns – Margin = 5rem [top]

Column

Cover – Overlay = 40%, Min-height = 610px

Group

Paragraph – Aligned Center, Font Size = Small, Line Height: 1, Letter Spacing = 1px

Heading – Aligned Center

Buttons – Aligned Center

Button

Column [repeat for each column]

Columns (same as above) – Margin = 5rem [bottom]

Category Columns with Visual Differentiation block markup

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"5rem"}}}} --> <div class="wp-block-columns" style="margin-top:5rem"><!-- wp:column --> <div class="wp-block-column"><!-- wp:cover {"url":"https://images.unsplash.com/photo-1637663635104-eb589b40cb51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80","id":56,"dimRatio":40,"minHeight":610,"minHeightUnit":"px","gradient":"black-tertiary","isDark":false} --> <div class="wp-block-cover is-light" style="min-height:610px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim wp-block-cover__gradient-background has-background-gradient has-black-tertiary-gradient-background"></span><img class="wp-block-cover__image-background wp-image-56" alt="" src="https://images.unsplash.com/photo-1637663635104-eb589b40cb51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"textColor":"base"} --> <div class="wp-block-group has-base-color has-text-color"><!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1","letterSpacing":"1px"}},"textColor":"background","fontSize":"small"} --> <p class="has-text-align-center has-background-color has-text-color has-small-font-size" style="letter-spacing:1px;line-height:1">HATS &amp; ACCESSORIES</p> <!-- /wp:paragraph --> <!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"top":"0px","bottom":"1.5rem"}}},"textColor":"background","fontSize":"max-60"} --> <h2 class="has-text-align-center has-background-color has-text-color has-max-60-font-size" style="margin-top:0px;margin-bottom:1.5rem">Keep A Lid On It</h2> <!-- /wp:heading --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} --> <div class="wp-block-buttons"><!-- wp:button {"textColor":"background","style":{"border":{"radius":"0px"}},"className":"is-style-outline-base"} --> <div class="wp-block-button is-style-outline-base"><a class="wp-block-button__link has-background-color has-text-color wp-element-button" style="border-radius:0px">Shop Now →</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div> <!-- /wp:group --></div></div> <!-- /wp:cover --></div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"><!-- wp:cover {"url":"https://images.unsplash.com/photo-1594201638839-e36ddd34822d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80","id":58,"dimRatio":40,"minHeight":610,"minHeightUnit":"px","gradient":"black-tertiary","isDark":false} --> <div class="wp-block-cover is-light" style="min-height:610px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim wp-block-cover__gradient-background has-background-gradient has-black-tertiary-gradient-background"></span><img class="wp-block-cover__image-background wp-image-58" alt="" src="https://images.unsplash.com/photo-1594201638839-e36ddd34822d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"textColor":"base"} --> <div class="wp-block-group has-base-color has-text-color"><!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1","letterSpacing":"1px"}},"textColor":"background","fontSize":"small"} --> <p class="has-text-align-center has-background-color has-text-color has-small-font-size" style="letter-spacing:1px;line-height:1">CASUAL SHIRTS</p> <!-- /wp:paragraph --> <!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"top":"0px","bottom":"1.5rem"}}},"textColor":"background","fontSize":"max-60"} --> <h2 class="has-text-align-center has-background-color has-text-color has-max-60-font-size" style="margin-top:0px;margin-bottom:1.5rem">Up Top</h2> <!-- /wp:heading --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} --> <div class="wp-block-buttons"><!-- wp:button {"textColor":"background","style":{"border":{"radius":"0px"}},"className":"is-style-outline-base"} --> <div class="wp-block-button is-style-outline-base"><a class="wp-block-button__link has-background-color has-text-color wp-element-button" style="border-radius:0px">Shop Now →</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div> <!-- /wp:group --></div></div> <!-- /wp:cover --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"margin":{"bottom":"5rem"}}}} --> <div class="wp-block-columns are-vertically-aligned-center" style="margin-bottom:5rem"><!-- wp:column {"verticalAlignment":"center","width":"50%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:cover {"url":"https://images.unsplash.com/photo-1642607144294-35e98929c526?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80","id":29,"dimRatio":40,"focalPoint":{"x":"0.51","y":"0.69"},"minHeight":610,"gradient":"black-tertiary"} --> <div class="wp-block-cover" style="min-height:610px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim wp-block-cover__gradient-background has-background-gradient has-black-tertiary-gradient-background"></span><img class="wp-block-cover__image-background wp-image-29" alt="" src="https://images.unsplash.com/photo-1642607144294-35e98929c526?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80" style="object-position:51% 69%" data-object-fit="cover" data-object-position="51% 69%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"textColor":"base"} --> <div class="wp-block-group has-base-color has-text-color"><!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1","letterSpacing":"1px"}},"fontSize":"small"} --> <p class="has-text-align-center has-small-font-size" id="block-f0a5e3ee-82b2-4967-b035-f36a979ebc06" style="letter-spacing:1px;line-height:1">COMFY DENIM</p> <!-- /wp:paragraph --> <!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"top":"0rem","bottom":"1.5rem"}}},"fontSize":"max-60"} --> <h2 class="has-text-align-center has-max-60-font-size" id="block-76c5c824-4808-404a-9800-2d5c158f838a" style="margin-top:0rem;margin-bottom:1.5rem">Jeans for days</h2> <!-- /wp:heading --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} --> <div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"0px"}},"className":"is-style-outline-base"} --> <div class="wp-block-button is-style-outline-base"><a class="wp-block-button__link wp-element-button" style="border-radius:0px">Shop Now →</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div> <!-- /wp:group --></div></div> <!-- /wp:cover --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center","width":"50%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:cover {"url":"https://images.unsplash.com/photo-1584998316204-3b1e3b1895ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80","id":22,"dimRatio":60,"minHeight":610,"gradient":"black-tertiary","contentPosition":"center center"} --> <div class="wp-block-cover" style="min-height:610px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-60 has-background-dim wp-block-cover__gradient-background has-background-gradient has-black-tertiary-gradient-background"></span><img class="wp-block-cover__image-background wp-image-22" alt="" src="https://images.unsplash.com/photo-1584998316204-3b1e3b1895ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"padding":{"right":"2rem","left":"2rem"}}}} --> <div class="wp-block-group" style="padding-right:2rem;padding-left:2rem"><!-- wp:heading {"textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"800","letterSpacing":"2px"}},"textColor":"base","fontSize":"max-36","fontFamily":"primary"} --> <h2 class="has-text-align-center has-base-color has-text-color has-primary-font-family has-max-36-font-size" style="font-style:normal;font-weight:800;letter-spacing:2px">Save <mark style="background-color:#990099" class="has-inline-color has-base-color">15%</mark> on entire summer collection</h2> <!-- /wp:heading --> <!-- wp:paragraph {"align":"center","textColor":"base","fontSize":"small"} --> <p class="has-text-align-center has-base-color has-text-color has-small-font-size">Enter code <mark style="background-color:#990099" class="has-inline-color has-base-color"><strong>HEADINTHESAND</strong></mark> at checkout.</p> <!-- /wp:paragraph --></div> <!-- /wp:group --></div></div> <!-- /wp:cover --></div> <!-- /wp:column --></div> <!-- /wp:columns -->
Code language: HTML, XML (xml)

Testimonial

It can help build a user’s trust in your brand when you feature testimonials, and no site is complete without it.

Testimonial area

Group – Padding = 5rem / 5rem / 6rem / 5rem

Paragraph (testimonial copy) – Font Size = X-Large

Paragraph (testimonial rating)

Paragraph (testimonial name) – Font Size = Small

Testimonial block markup

<!-- wp:group {"style":{"spacing":{"padding":{"top":"5rem","bottom":"6rem","right":"4rem","left":"4rem"}}},"backgroundColor":"main","textColor":"base","className":"is-style-default","layout":{"inherit":true}} --> <div class="wp-block-group is-style-default has-base-color has-main-background-color has-text-color has-background" style="padding-top:5rem;padding-right:4rem;padding-bottom:6rem;padding-left:4rem"><!-- wp:paragraph {"align":"center","fontSize":"max-36"} --> <p class="has-text-align-center has-max-36-font-size"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-tertiary-color"></mark>Eu nisi est dolor non laborum sit amet lorem deserunt velit lorem ullamco incididunt esse.<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-tertiary-color"></mark></p> <!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1"}},"textColor":"tertiary"} --> <p class="has-text-align-center has-tertiary-color has-text-color" style="line-height:1">★★★★★</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1"}},"fontSize":"small"} --> <p class="has-text-align-center has-small-font-size" style="line-height:1">Fannie Reyes</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->
Code language: JavaScript (javascript)

For our site footer, we’re just using the Frost theme’s: patterns/footer-three-column.php

Site Footer from Frost theme

Group – Font Size = 18px

Columns – Padding = 100px [top/bottom], Block Spacing = 100px

Column

Heading

Paragraph

Buttons

Button

Column

Columns

Column – Width = 33%

Heading

List – Font Size = Small

Column [repeat for each column]

Footer block markup

<!-- wp:group {"align":"full","style":{"typography":{"fontSize":"18px"},"spacing":{"margin":{"top":"0px"}}},"layout":{"inherit":true}} --> <div class="wp-block-group alignfull" style="margin-top:0px;font-size:18px"><!-- wp:columns {"align":"wide","style":{"elements":{"link":{"color":[]}},"spacing":{"padding":{"top":"100px","bottom":"100px"},"blockGap":"100px"}}} --> <div class="wp-block-columns alignwide has-link-color" style="padding-top:100px;padding-bottom:100px"><!-- wp:column {"width":"50%"} --> <div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"level":4} --> <h4 id="our-company">Our Company</h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing lectus. Vestibulum mi justo, luctus eu pellentesque vitae gravida non.</p> <!-- /wp:paragraph --> <!-- wp:buttons --> <div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":0}},"className":"is-style-fill"} --> <div class="wp-block-button is-style-fill"><a class="wp-block-button__link no-border-radius wp-element-button" href="#">Learn More</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"><!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"width":"33%"} --> <div class="wp-block-column" style="flex-basis:33%"><!-- wp:heading {"level":4} --> <h4 id="about-us">About Us</h4> <!-- /wp:heading --> <!-- wp:list {"fontSize":"small"} --> <ul class="has-small-font-size"><li><a href="#">Start Here</a></li><li><a href="#">Our Mission</a></li><li><a href="#">Brand Guide</a></li><li><a href="#">Newsletter</a></li><li><a href="#">Accessibility</a></li></ul> <!-- /wp:list --></div> <!-- /wp:column --> <!-- wp:column {"width":"33%"} --> <div class="wp-block-column" style="flex-basis:33%"><!-- wp:heading {"level":4} --> <h4 id="services">Services</h4> <!-- /wp:heading --> <!-- wp:list {"fontSize":"small"} --> <ul class="has-small-font-size"><li><a href="#">Web Design</a></li><li><a href="#">Development</a></li><li><a href="#">Copywriting</a></li><li><a href="#">Marketing</a></li><li><a href="#">Social Media</a></li></ul> <!-- /wp:list --></div> <!-- /wp:column --> <!-- wp:column {"width":"33%"} --> <div class="wp-block-column" style="flex-basis:33%"><!-- wp:heading {"level":4} --> <h4 id="connect">Connect</h4> <!-- /wp:heading --> <!-- wp:list {"fontSize":"small"} --> <ul class="has-small-font-size"><li><a href="#">Facebook</a></li><li><a href="#">Instagram</a></li><li><a href="#">Twitter</a></li><li><a href="#">LinkedIn</a></li><li><a href="#">Dribbble</a></li></ul> <!-- /wp:list --></div> <!-- /wp:column --></div> <!-- /wp:columns --></div> <!-- /wp:column --></div> <!-- /wp:columns --></div> <!-- /wp:group -->
Code language: HTML, XML (xml)

Conclusion

As you can see, it can be empowering to be able to compose your store layouts with WordPress core and WooCommerce blocks.

Check out WooCommerce’s latest Store Editing Roadmap Update – Q3 2022 for an overview of upcoming and proposed features.

Please hit me up @dcook on Twitter if you are working with WooCommerce blocks and let me know your thoughts.