How to Add WooCommerce Featured Products to Your Website

[ad_1]

It may surprise you that adding a product on WooCommerce 🛒 doesn’t actually feature the item on your homepage. Instead, you must actually add WooCommerce featured products manually; otherwise, those product thumbnails and pages remain (somewhat hidden) on your Shop page.

The goal is to feature products 🛍️ so that customers see popular or notable products once they land on your website.

👉 Featured products come in many forms:

  • Product galleries
  • Curated, rule-driven lists of popular, recently purchased, or discounted items
  • Hero images and promo banners
  • Widget galleries
  • Product collections within menus

And featured WooCommerce products don’t necessarily have to be on the homepage; you can insert featured inventory in blog posts, sidebars, footers, landing pages, and more.

Overall, the goal of learning how to add WooCommerce featured products is to produce a result like this:

This featured WooCommerce category highlights several products in a promotional/hero banner, with pictures of the items, explanatory text, and a call-to-action button.

Or, like this:

banner with WooCommerce featured products
It’s possible to show multiple featured products in a gallery.

The good news is that it’s rather simple to learn 🧑‍💻 how to add WooCommerce featured products to your online store’s homepage, or anywhere else on the site. All you need is a plugin to make it happen! Follow the steps below:

How to add WooCommerce featured products

In this guide, we’ll use the default block editor in WordPress and the Otter Blocks plugin to add featured products to an online store. With WooCommerce installed, you receive some default WooCommerce blocks for featuring products. Adding the Otter Blocks plugin opens up many other ways to feature products, like with promo banners, featured product rules, and visibility conditions.

✋ Before you do anything else:
🔌 Install WooCommerce, Otter Blocks, and a Viable WooCommerce theme

Begin by installing WooCommerce. This way, your WordPress site turns into an online store with support for products and payment processing.

Next, add a WordPress theme with WooCommerce support. There are plenty to choose from, but we recommend Neve as a starting point due to its fast speeds and large library of starter templates.

Neve

Finally, install and activate the Otter Blocks plugin.

These three elements are what you need when learning how to add WooCommerce featured products.

Note: We’re also assuming that you’ve already added products to your online store. Learn how to import multiple products at once.

How to create a promo banner with WooCommerce featured products

In this tutorial, we’ll make a promo banner that shows product images, details, and buttons for customers to learn more/buy.

Go to Pages on WordPress. Open the Home – Front Page option (you can also add the featured products to any other page if you’d like; we’re just using the homepage as an example):

going to the homepage

This opens the Gutenberg editor. Click the Add Block or Toggle Block Inserter button. Both display the library of content blocks available.

adding a block

Locate the Otter logo. Under the Otter section of blocks, find and insert the Section block.

the otter block section for WooCommerce featured products

Make two columns of equal or varying size:

setting two equal columns

You’ll see two side-by-side columns with “+” signs to add blocks. Click one to start inserting content blocks.

add a block on the right column

For one of the columns, you’ll want a product block. Search “products” to reveal all the available options from WooCommerce, Gutenberg, and Otter Blocks.

You might consider these blocks:

  • Products by category
  • Products by attribute
  • Products by tag
  • Hand-picked Products
  • Best-selling Products

Each of these options shows one – or multiple – products in a gallery, with product details, images, pricing, and purchase buttons.

selecting the block for products by category

For this guide, we’ll add the Products By Category block. For that, you choose a product category to feature. Click Done once you have the category you want.

including the clothing category for WooCommerce featured products

As a result, every product from that category appears in the column. Select the block, and go to the Block tab on the right to adjust settings for that particular block.

For instance, you can change the layout to only show three columns and one row. You also might decide to show or remove content elements like product images or titles.

changing the layout for the WooCommerce featured products

Now that you have the desired gallery of products (or even just one product to feature), click on the Add Block button in the other section column:

adding a block to the left

Although you can add any content block you want, we recommend starting with the Heading (native) or Advanced Heading (Otter Blocks) options. These allow you to create a call-to-action or banner text to grab attention. Insert the block into the column.

giving it a heading

Type in whatever heading you’d like, then click the Enter/Return key to start a new line of standard paragraph text. Here, you’re able to expand upon the heading with details about the featured WooCommerce products.

inserting text

Here’s an example of the heading combined with description text in one column, followed by a product category block in the other column:

the banner with some text

At any point, you can select the entire section to adjust its styling. With the section highlighted, go to Block > Style. One way to make a featured product banner stand out is to incorporate a background. Under Style, use the Background & Content section to select images, colors, or gradients for the background:

giving the WooCommerce featured products a background

It’s also wise to select each section column to configure column-specific settings. Under Style, we recommend adding a few pixels to the Padding setting to give the content in each column some space away from the edges.

adding some padding

When you’re all done customizing the featured product banner, click the Publish or Update button to make the changes live on your website. That’s how to add WooCommerce featured products using columns, category blocks, headings, and a custom background!

the final results of WooCommerce featured products in a banner

Adding visibility conditions to WooCommerce featured products

With WooCommerce featured products, you may want to only show those products in certain situations, like if a user is logged in, logged out, or has products in their cart.

To only reveal featured products on specific occasions, utilize the visibility conditions in Otter Blocks.

To get started, you must already have a featured products section added on a page. You can achieve this using the previous method, and with various blocks like Products By Category, Best Selling Products, and Hand-picked Products.

Select the block to which you’d like to add visibility settings. For this instance, you’d click on whichever WooCommerce featured product gallery you recently created.

Select the Block tab on the right:

adjusting the block settings

Scroll down in the Block settings to find the Visibility Conditions tab. Click to open the tab and reveal its settings.

setting visibility conditions for WooCommerce featured products

Here, you can add conditions for the featured products block, choosing when you’d like the products to appear.

Click Add Rule Group, then Select a Condition:

selecting a condition for WooCommerce featured products

This provides a dropdown list of all conditions available through Otter Blocks. Here are some free and premium conditions to only display the block if:

  • The user is logged in
  • The user is logged out
  • The post type (on which you published the block) is set to a specific post type, or category
  • It’s a certain date
  • There are products in the cart
  • The customer has reached a total spend value

For how to add WooCommerce featured products conditionally, simply select one of the conditions. In this tutorial, we’ll opt for the Logged Out Users option. This way, we’re only targeting non-logged-in users with the products, so perhaps they’re not meant for loyal customers who’re logged into the site.

picking logged out users only

Click the Update or Publish button on the post/page to make the condition active.

To use multiple rules at the same time, click the Add A New Condition button (while keeping the previously created condition).

An additional condition states that the block will appear for users if this and that happens. As an example, we might display the WooCommerce featured products only if a user is logged out, and if the post category is listed as “Fashion.”

adding a new condition

It’s also possible to run an “or” condition, where the block is displayed if this or that happens.

To add an “or” condition, you must click on the Add Rule Group button, which creates a separate grouping of rules (each group lets you include multiple “and” conditions).

adding a rule group for WooCommerce featured products

Featuring products in the sidebar (with animations!)

Learning how to add WooCommerce featured products opens up a wide range of possibilities. You’ll think of creative ways to display your products, like with conditions or in the sidebar.

To feature WooCommerce products in the sidebar, go to Appearance > Widgets on WordPress. As long as your theme supports widgets in the sidebar (or other places like the footer or header), you can add featured products. In the Widgets panel, find the Sidebar section (or whichever widget area you’d like to edit). Click the Add Block button:

add a block in the widget to add WooCommerce featured products

Choose one of the many WooCommerce blocks that features products in a gallery or list format. In this case, we’ll use the Hand-picked Products block and mark three items. Click Done.

adding products to the block

You’ll see a preview of the block in action. Select the block to edit its settings. You are welcome to adjust everything from content displays to the product order, and visibility conditions to animations.

bringing up the block's settings

Speaking of animations, they offer simple ways to add excitement to featured products, grabbing attention as visitors come to your site. To make this happen, open the Animations tab under the Block section. There are loading animations, counting animations, and typing animations. Keep in mind that some blocks don’t allow for animations.

clicking the animations button

Each animation has its own settings, like for specifying the type of animation, speed, and delay.

adding a loading animation

Once you have your widget and sidebar ready, click the Update or Publish button to make it live. Go to the frontend of your site (an area that has a sidebar) to see the new WooCommerce featured products in action (and with animations if you used them).

looking at the sidebar in action

And that’s how to add WooCommerce featured products! 🎯

Creativity pays off when adding WooCommerce featured products. You can combine blocks from WooCommerce, Otter Blocks, other plugins, the ones available natively in the block editor, and add the featured products to places like the homepage, sidebars, your online store, and blog posts.

If you need any clarification about how to add WooCommerce featured products to your site, please let us know in the comments!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

[ad_2]

Source link

Leave a Comment

Your email address will not be published. Required fields are marked *