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

Advanced Ads Review 2024: Powerful WordPress Ad Management

Advanced Ads Review 2024: Powerful WordPress Ad Management

Posted on March 17, 2024 in WordPress

If you want to monetize your WordPress site with ads, the Advanced Ads plugin is a great place to start. With its ability to generate quality ads, use different ad layouts, and add custom ad blocks to streamline your workflow, Advanced Ads can provide effective and creative opportunities to boost...

View Full Post
W3 Total Cache Review: Features, Guide, & More (2024)

W3 Total Cache Review: Features, Guide, & More (2024)

Posted on March 5, 2024 in WordPress

Building a website on WordPress can occasionally include the bump in the road of slow loading times. However, an efficient way of overcoming this hurdle is by employing caching plugins. One stand-out candidate for cache management and optimization of your WordPress site is W3 Total Cache. In this...

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