How to Use the Featured Product WooCommerce Block

Last Updated on September 12, 2023 by 7 Comments

How to Use the Featured Product WooCommerce Block
Blog / WordPress / How to Use the Featured Product WooCommerce Block

Featuring a specific product in your online store can be an effective way to increase your sales. For instance, you may want to showcase your newest item on your home page, or promote it in a blog post. Fortunately, the Featured Product WooCommerce block enables you to easily highlight any product on your WordPress site.

In this article, we’ll take a closer look at the Featured Product block and show you how to add it to your site. We’ll also discuss some best practices for using this feature effectively.

Let’s get started!

How to Add the Featured Product WooCommerce Block to Your Post or Page

The Featured Product block enables you to showcase a particular item on a post or page. This can encourage customers to add that product to their shopping carts, which may result in higher profits for your WooCommerce store.

To use this block, open the page or post where you want to display your special item. Then, click on the plus sign (+) to add a new block, and use the search bar to look for the “Featured Product” option:

Adding the Featured Product block

Once you insert the block, you’ll be asked to select the product you want to display. You can choose an item from the available list, or look for it using the search bar:

Selecting a featured product in the block

Select your product once you’ve found it, and click on Done. The block will then display your selected item:

Featured Product WooCommerce Block

Note that this feature is only available if you’re using WooCommerce. If the plugin is activated on your site, you’ll also get access to all the other WooCommerce blocks in the Block Editor.

Featured Product WooCommerce Block Settings and Options

If you like, the Featured Products block can be customized so that it better fits your site’s functionality and style. If you click on the block, you’ll get a toolbar with six main settings:

Featured Product block toolbar settings

Here’s a quick overview of each option:

  1. Change block type or style: You can transform this element into a Group or Columns block.
  2. Change alignment: You can select a full width or wide width layout.
  3. Change text alignment: You can align the text within the block to the left, right, or center.
  4. Replace: You can change the image within the block.
  5. Edit: You can use this option to replace the featured product with a different item.
  6. Options: You can copy the block, group it, add it to your Reusable Blocks, or remove it.

CTA Button Settings

Furthermore, you can modify the Call To Action (CTA) button within the block. All you need to do is click on it, and a dedicated toolbar will appear:

The settings for the CTA button in the Featured Product block

For instance, you edit the text on the button, change its alignment, and format its style. You can also edit the link to the product page, and set it to open in a new tab.

You can also find more settings for the CTA button in the right-hand panel:

The settings for the CTA button in the Featured Product block

Here, you can change the text’s font and styling. You can also choose a different color for the text as well as the button.

Block Settings

Now, let’s return to the block. When you select it, you’ll also see some additional settings in the right-hand panel:

The settings panel for the Featured Product block

By default, the Featured Product block displays the description and price of your product. However, you have the option to hide this information. All you have to do is toggle the corresponding switch.

You can also change the overlay color of the block, and adjust its opacity:

Adjusting the overlay color for the Featured Product block

Meanwhile, the focal point picker enables you to shift the object around within the block. In our example, this is the t-shirt:

The Focal Point Picker for the Featured Product block

For instance, you may want to move the main image towards the top of the block, so that the text is more visible. You can do this by dragging the tiny circle across the Focal Point Picker field, or defining values in the Left and Right boxes.

Finally, there’s an Advanced settings option. This enables you to add new CSS classes to the block. However, we recommend that you only use this feature if you’re experienced with stylesheets.

Tips and Best Practices for Using the Featured Product WooCommerce Block Effectively

As we have seen, the Featured Product WooCommerce block enables you to highlight a product on a page or post. For instance, you can showcase your newest item, or try to revive interest in an older product. Whatever the case may be, there are some things to consider when using this feature.

Since the goal of the Featured Product block is to prompt customers to buy your item, you’ll want this element to be visually appealing and informative. For this reason, we recommend that you choose a lighter overlay color, to ensure that your product image is clear.

You’ll also want to make sure that the name, description, and price are easy to read. Unfortunately, the block doesn’t allow you to change the font and color of these elements. Therefore, you’ll need to adjust the overlay color and opacity so that both the image and text are visible enough to grab visitors’ attention:

The Featured Product block on the front end

Finally, you’ll want to ensure that the CTA button links to the relevant product page. That way, visitors who are interested in the item can visit its page to learn more about it. We’d advise checking the block out on the front end to make sure it’s working perfectly before hitting Publish.

Frequently Asked Questions about the Featured Product WooCommerce Block

As you can see, the Featured Product WooCommerce block is very easy to use. However, you might still have some questions about what this feature can and can’t do. Let’s cover a few key considerations.

Can I Update the Product Details From the Block?

You can upload a different image for your product, but you can’t modify any other product details from within this block. If you wish to update the information for your featured product, such as its name or price, you’ll need to make these changes from the Products page.

Can I Display More Than One Featured Product?

This block only lets you display one product at a time. However, you can add several Featured Product blocks, and choose a different item for each one.

Can I Add More Information About the Product?

By default, the Featured Product displays the most basic details about the item, mainly the name, description, and price. You have the option to hide some of this information, but you cannot add more elements to the block. If you want to include further details, you’ll need to add a paragraph (or other content) block.

Conclusion

The Featured Product WooCommerce block enables you to highlight a particular item on a page or blog post. This can be a powerful way to promote a new item and make more sales.

As we have seen, this block comes with a CTA button that encourages users to buy your featured product. It also enables you to use a unique image for the item, and adjust the overlay color and button styling to make the block more visually appealing.

Do you have any questions about how to use the Featured Product block in WooCommerce? Let us know in the comments section below!

Featured Image via FOTOSPLASH / shutterstock.com

Divi

Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

Get Started
Divi
Premade Layouts

Check Out These Related Posts

How To Streamline Your WordPress Site Management Tasks

How To Streamline Your WordPress Site Management Tasks

Updated on October 4, 2024 in WordPress

Managing WordPress sites can be quite a challenge. You might not know what tasks it may include and the best way to handle them. Luckily, there are simplified options available for managing your WordPress site management tasks. Whether you’re a website owner or designer, new to this, or have...

View Full Post
How Long Does it Take to Build a Website?

How Long Does it Take to Build a Website?

Posted on September 19, 2024 in WordPress

Want to build a website but worried about time and complexity? Whether you choose hardcoding, a website builder, or a flexible platform like Divi, choosing the right tool can save you weeks of work. Making a website is a big commitment, especially considering the time and effort involved. You want...

View Full Post
How Much Does It Cost To Maintain A WordPress Website?

How Much Does It Cost To Maintain A WordPress Website?

Updated on September 26, 2024 in WordPress

Creating a WordPress website can be very rewarding. It offers a way to share content, sell products, or promote yourself online. That said, it also comes with a lot of maintenance costs. To ensure that it is secure, performs well, and provides a great user experience, you’ll need to invest in...

View Full Post

7 Comments

  1. Theses Gutenberg integrated blocks are making life so much easier! Even more with the Jetpack unique blocks right inside the editor, cant recommend them enough!

    • I agree, David 🙂

  2. Thanks for this feature WooCommerce.. They have been adding many relevant features for web development

  3. Can I use the Woocommerce blocks with Divi? Because on all these posts you explain how to use them on the block editor, but is there a workaround to use them with Divi’s visual editor?

  4. This article is really useful, learned so many things about WooCommerce Block. Thank you

    • You’re welcome, Janet 🙂

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Get Started With Divi