How to Use the Featured Product WooCommerce Block

by | Nov 21, 2021 | Etcetera | 0 comments

That includes a particular product in your online store may also be a good way to extend your gross sales. For example, it’s possible you’ll wish to exhibit your latest merchandise on your house web page, or advertise in a weblog submit. Thankfully, the Featured Product WooCommerce block allows you to simply spotlight any product for your WordPress website online.

On this article, we’ll take a more in-depth have a look at the Featured Product block and display you learn how to upload it in your website online. We’ll additionally speak about some perfect practices for the use of this selection successfully.

Let’s get began!

Learn how to Upload the Featured Product WooCommerce Block to Your Publish or Web page

The Featured Product block allows you to exhibit a specific merchandise on a submit or web page. This will inspire shoppers so as to add that product to their buying groceries carts, which would possibly lead to upper earnings in your WooCommerce retailer.

To make use of this block, open the web page or submit the place you need to show your particular merchandise. Then, click on at the plus signal (+) so as to add a brand new block, and use the quest bar to search for the “Featured Product” possibility:

Adding the Featured Product block

While you insert the block, you’ll be requested to choose the product you need to show. You’ll make a choice an merchandise from the to be had record, or search for it the use of the quest bar:

Selecting a featured product in the block

Make a selection your product whenever you’ve discovered it, and click on on Completed. The block will then show your decided on merchandise:

Featured Product WooCommerce Block

Be aware that this selection is handiest to be had in case you’re using WooCommerce. If the plugin is activated for your website online, you’ll additionally get get entry to to all of the different WooCommerce blocks within the Block Editor.

Featured Product WooCommerce Block Settings and Choices

In the event you like, the Featured Merchandise block may also be custom designed in order that it higher suits your website online’s capability and magnificence. In the event you click on at the block, you’ll get a toolbar with six major settings:

See also  Tips on how to Promote on Twitter With Those 13 Guidelines

Featured Product block toolbar settings

Right here’s a snappy review of every possibility:

  1. Exchange block sort or taste: You’ll turn into this part right into a Group or Columns block.
  2. Exchange alignment: You’ll choose a complete width or extensive width structure.
  3. Exchange textual content alignment: You’ll align the textual content inside the block to the left, correct, or middle.
  4. Substitute: You’ll alternate the picture inside the block.
  5. Edit: You’ll use this way to substitute the featured product with a distinct merchandise.
  6. Choices: You’ll reproduction the block, crew it, upload it in your Reusable Blocks, or take away it.

CTA Button Settings

Moreover, you’ll be able to regulate the Call To Action (CTA) button inside the block. All you wish to have to do is click on on it, and a devoted toolbar will seem:

The settings for the CTA button in the Featured Product block

For example, you edit the textual content at the button, alternate its alignment, and layout its taste. You’ll additionally edit the hyperlink to the product web page, and set it to open in a brand new tab.

You’ll additionally to find extra settings for the CTA button within the right-hand panel:

The settings for the CTA button in the Featured Product block

Right here, you’ll be able to alternate the textual content’s font and styling. You’ll additionally make a choice a distinct colour for the textual content in addition to the button.

Block Settings

Now, let’s go back to the block. When you choose it, you’ll additionally see some further settings within the right-hand panel:

The settings panel for the Featured Product block

By means of default, the Featured Product block presentations the outline and worth of your product. Alternatively, you will have the way to cover this knowledge. All you need to do is toggle the corresponding transfer.

You’ll additionally alternate the overlay colour of the block, and alter its opacity:

Adjusting the overlay color for the Featured Product block

In the meantime, the point of interest picker allows you to shift the thing round inside the block. In our instance, that is the t-shirt:

The Focal Point Picker for the Featured Product block

For example, it’s possible you’ll wish to transfer the primary symbol in opposition to the highest of the block, in order that the textual content is extra visual. You’ll do that by means of dragging the tiny circle around the Focal Level Picker box, or defining values within the Left and Proper bins.

See also  The best way to Use the WordPress.television Embed Block

In the end, there’s an Complex settings possibility. This allows you to upload new CSS classes to the block. Alternatively, we propose that you just handiest use this selection in case you’re skilled with stylesheets.

Pointers and Perfect Practices for The usage of the Featured Product WooCommerce Block Successfully

As we’ve got noticed, the Featured Product WooCommerce block allows you to spotlight a product on a web page or submit. For example, you’ll be able to exhibit your latest merchandise, or attempt to revive pastime in an older product. Regardless of the case could also be, there are a few things to imagine when the use of this selection.

For the reason that function of the Featured Product block is to recommended shoppers to shop for your merchandise, you’ll need this part to be visually interesting and informative. Because of this, we propose that you select a lighter overlay colour, to be sure that your product symbol is apparent.

You’ll additionally wish to ensure that the identify, description, and worth are simple to learn. Sadly, the block doesn’t mean you can alternate the font and colour of those parts. Due to this fact, you’ll want to alter the overlay colour and opacity in order that each the picture and textual content are visual sufficient to grasp guests’ consideration:

The Featured Product block on the front end

In the end, you’ll wish to be sure that the CTA button hyperlinks to the related product page. That manner, guests who’re within the merchandise can seek advice from its web page to be informed extra about it. We’d advise checking the block out at the entrance finish to ensure it’s operating completely earlier than hitting Put up.

Regularly Requested Questions in regards to the Featured Product WooCommerce Block

As you’ll be able to see, the Featured Product WooCommerce block is so easy to make use of. Alternatively, you could nonetheless have some questions on what this selection can and will’t do. Let’s duvet a couple of key issues.

See also  25 Absolute best About Us & About Me Web page Examples + 5 Templates

Can I Replace the Product Main points From the Block?

You’ll add a distinct symbol in your product, however you’ll be able to’t regulate some other product main points from inside of this block. If you want to replace the guidelines in your featured product, reminiscent of its identify or worth, you’ll want to make those adjustments from the Merchandise web page.

Can I Show Extra Than One Featured Product?

This block handiest means that you can show one product at a time. Alternatively, you’ll be able to upload a number of Featured Product blocks, and make a choice a distinct merchandise for every one.

Can I Upload Extra Data Concerning the Product?

By means of default, the Featured Product presentations essentially the most elementary information about the article, principally the identify, description, and worth. You’ve gotten the way to cover a few of this knowledge, however you can not upload extra parts to the block. If you wish to come with additional main points, you’ll want to upload a paragraph (or different content material) block.


The Featured Product WooCommerce block allows you to spotlight a specific merchandise on a web page or weblog submit. This is a robust approach to advertise a brand new merchandise and make extra gross sales.

As we’ve got noticed, this block comes with a CTA button that encourages customers to shop for your featured product. It additionally allows you to use a singular symbol for the article, and alter the overlay colour and button styling to make the block extra visually interesting.

Do you will have any questions on learn how to use the Featured Product block in WooCommerce? Tell us within the feedback phase beneath!

Featured Symbol by means of FOTOSPLASH /

The submit How to Use the Featured Product WooCommerce Block seemed first on Elegant Themes Blog.


Submit a Comment