How to embed a product on homepage of WooComerce?

To embed a product on the homepage in WooCommerce, you can use various methods depending on your preferences and requirements.

Here are 4 common methods to achieve this:

Method 1: Shortcode

The shortcodes and Gutenberg block methods are more user-friendly and require minimal technical knowledge.

1. In the WordPress admin dashboard, navigate to “Products” > “All Products” and find the product you want to embed.
2. Click on the product to open its editing page.
3. Look for the “Product Short Description” section and copy the shortcode provided (e.g., [product id=”123″]).
4. Go to the homepage editing area, where you want to display the product, and paste the shortcode in the desired location.
5. Update or publish the homepage to display the embedded product.

Method 2: Gutenberg Block

1. In the WordPress admin dashboard, go to the homepage editing area using the Gutenberg editor.
2. Add a new block and search for “WooCommerce Product” block.
3. Select the desired product from the list provided or enter the product’s name to search and select it.
4. Customize the product display settings as per your preferences.
5. Update or publish the homepage to display the embedded product.

Method 3: Custom HTML

The custom HTML method provides more control over the product’s appearance and placement.

• In the WordPress admin dashboard, go to the homepage editing area.

• Switch to the “Text” or “HTML” editor mode.

• Use the following shortcode to display the product:

[product id="123"]

Replace “123” with the actual product ID you want to display.

• Update or publish the homepage to display the embedded product.

Method 4: Elementor

• Ensure you have the Elementor plugin installed and activated on your WordPress website. If you haven’t installed it, go to “Plugins” > “Add New” and search for “Elementor” to install and activate it.

• Go to “Pages” in the WordPress admin dashboard and create a new page or edit your existing homepage using Elementor.

• In Elementor, click on the “Edit with Elementor” button to access the page builder. Add a new section by clicking the “+ Add New Section” button.

• Within the new section, click on the “+ Add New Widget” button and search for the “Products” widget. Drag and drop the “Products” widget into the section.

• In the “Products” widget settings, you can choose to display a specific product or a selection of products. You can filter products by categories, tags, or featured products. Customize the appearance, layout, and number of products displayed according to your preference.

• Once you have configured the “Products” widget to your liking, click the “Update” button in Elementor to save your changes. Then, click “Publish” to make the changes live on your homepage.

• Visit your website’s homepage to see the embedded product(s) displayed as per your settings in Elementor.

Choose the method that suits your requirements and proficiency.

With these methods, you can easily showcase products on your homepage and attract customers’ attention to featured items or promotions, enhancing your WooCommerce store’s visibility and sales potential.