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.
Table of Contents
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. 👇
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.
Site Header, Menu, and Mini Cart
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.
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:
Block Recipe
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.
Block Recipe
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.
Block Recipe
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">&</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.
Block Recipe
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 & 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.
Block Recipe
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: HTML, XML (xml)Site Footer
For our site footer, we’re just using the Frost theme’s: patterns/footer-three-column.php
Block Recipe
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.
