WooCommerce Storefront Product Hero
WooCommerce Storefront Product Hero

WooCommerce Storefront Product Hero extension allows you to add a hero component to the homepage template of your Storefront powered web site, or anywhere else via shortcode. You can upload a background image (and set it to parallax scroll) and tweak other appearance settings using the WordPress Customizer.

Also, Get Stripe Payment Gateway

Installation for WooCommerce Storefront Product Hero

  • Unzip and upload the plugin’s folder to your /wp-content/plugins/ directory
  • Activate the extension through the ‘Plugins’ menu in WordPress
  • Enter the WordPress Customizer to begin using the plugin.

Usage for WooCommerce Storefront Product Hero

The Storefront Product Hero extension adds all of it’s settings to the WordPress Customizer making it very easy to use. Upon entering the Customizer you will notice a new top-level section titled Product Hero.

Inside of this section are several settings which we’ll overview in detail:

Featured product for WooCommerce Storefront Product Hero

Select a product to feature in the product hero. The list of selectable products is the products that are currently marked as featured at your store. This is to avoid loading your entire product list in the Customizer. Be sure that the product you want to display in your product hero is marked as featured or it won’t be selectable here. Likewise, if you don’t have any featured products then the setting won’t appear at all.

Content layout

Choose how to layout the content of your product hero. You can centrally align everything, or place content/image adjacently then flip them so that the content is on the left and the image on the right, and vice versa.

Hero width

Specify a fixed, or full-width layout for the hero component. Fixed width means it will match the rest of the content on the page in width, full width means it will span the full browser width.

Full height

When enabled the product hero will intelligently resize the fill the browser window on page load. This effect will only work if it appears quite high up in your content and is not generally recommended when using the product heroin post/page content unless it’s a full-width page.

Product image

Toggle the display of the product featured image.

Product price

Toggle the display of the product price.

Product rating

Toggle the display of the product rating. This will only display if the product has been reviewed.


Please enter your comment!
Please enter your name here