This is How You Can Showcase a Specific Product on Your WordPress WooCommerce Homepage
As an ecommerce store owner, one of your primary goals is to highlight your best-selling or featured products in a way that grabs your customers' attention and drives them to make a purchase. With WordPress WooCommerce, you have several options for displaying products on your homepage, including showcasing a specific product or featuring a selection of your top products.
In this article, we'll explore the step-by-step process of using the [product] and [featured_products] shortcodes to showcase products on your WordPress WooCommerce homepage. We'll also cover some additional tips and best practices for optimizing your product pages to improve conversion rates.
Using the [product] Shortcode to Display a Specific Product
The [product] shortcode allows you to display a specific product on your WordPress WooCommerce homepage. This is particularly useful if you have a particular item that you want to highlight, such as a new release, a best-seller, or a discounted product.
Here's how to use the [product] shortcode:
-
Identify the Product: Determine the product you want to showcase on your homepage. You can do this by noting the product's ID or SKU (stock-keeping unit).
-
Insert the Shortcode: In the page or post where you want to display the product, use the following shortcode:
- To display a product by ID:
[product id="99"]
- To display a product by SKU:
[product sku="FOO"]
Replace 99
with the ID of your product or FOO
with the SKU.
-
Customize the Shortcode (Optional): The [product] shortcode supports several additional attributes that you can use to customize the display of the product. Some of the most useful include:
image_size
: Sets the size of the product image (e.g., image_size="medium"
)
show_title
: Displays the product title (default is true
)
show_price
: Displays the product price (default is true
)
show_rating
: Displays the product rating (default is true
)
show_add_to_cart
: Displays the add-to-cart button (default is true
)
For example, to display a product with a medium-sized image, no title, and no rating, you would use the following shortcode:
[product id="99" image_size="medium" show_title="false" show_rating="false"]
-
Preview and Publish: Preview the page to ensure the product is displayed correctly, then publish the changes to your website.
Using the [featured_products] Shortcode to Display Multiple Featured Products
If you want to showcase multiple featured products on your WordPress WooCommerce homepage, you can use the [featured_products] shortcode. This shortcode will display a grid of your store's featured products, which are products that you have specifically marked as "featured" in the WooCommerce product settings.
Here's how to use the [featured_products] shortcode:
-
Mark Products as Featured: In your WooCommerce product settings, go to the "Products" section and edit the products you want to feature. Check the "Featured" box for each product you want to include in the featured products display.
-
Insert the Shortcode: In the page or post where you want to display the featured products, use the following shortcode:
[featured_products per_page="12" columns="4"]
This will display 12 featured products in a 4-column grid.
-
Customize the Shortcode (Optional): The [featured_products] shortcode supports several additional attributes that you can use to customize the display of the products. Some of the most useful include:
per_page
: Sets the number of products to display (default is 12)
columns
: Sets the number of columns to display the products in (default is 3)
orderby
: Sets the order in which the products are displayed (e.g., orderby="date"
for newest products)
order
: Sets the order direction (e.g., order="ASC"
for ascending order)
For example, to display 8 featured products in a 2-column grid, ordered by price in descending order, you would use the following shortcode:
[featured_products per_page="8" columns="2" orderby="price" order="DESC"]
-
Preview and Publish: Preview the page to ensure the featured products are displayed correctly, then publish the changes to your website.
Additional Tips for Optimizing Your Product Pages
While using the [product] and [featured_products] shortcodes can help you effectively showcase your products on your WordPress WooCommerce homepage, there are several other strategies you can implement to further optimize your product pages and improve conversion rates.
-
Optimize Product Descriptions: Ensure your product descriptions are detailed, engaging, and highlight the key features and benefits of each item. Use high-quality images, videos, and other multimedia to enhance the user experience.
-
Implement Effective CTAs: Make sure your calls-to-action (CTAs) are prominent and compelling, encouraging customers to add products to their cart or proceed to checkout.
-
Leverage Cross-Selling and Upselling: Use WooCommerce's built-in cross-selling and upselling features to suggest related or complementary products to customers, increasing the average order value.
-
Incorporate Testimonials and Reviews: Display customer reviews and testimonials on your product pages to build trust and social proof, which can positively influence purchasing decisions.
-
Optimize for Mobile: Ensure your product pages are mobile-friendly and provide a seamless user experience on all device types, as a significant portion of your customers may be accessing your store from their smartphones or tablets.
-
Analyze and Iterate: Regularly review your website analytics to identify top-performing products, popular search terms, and areas for improvement. Use this data to continuously refine and optimize your product pages.
By combining the use of the [product] and [featured_products] shortcodes with these additional optimization strategies, you can create a highly effective and engaging WooCommerce homepage that showcases your products in the best possible light and drives more conversions for your ecommerce business.
If you're looking to take your product page optimization to the next level, consider using a tool like Flowpoint.ai to help you identify and address technical, UX, and content-related issues that may be impacting your conversion rates. Flowpoint's AI-powered recommendations can provide you with actionable insights to improve your product pages and boost your overall ecommerce performance
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.