How to add custom content or shortcode to single product page

In this guide, you will learn how to add a custom section to the single product page with the Astra Site Builder module.

This guide is useful for the following approaches:

1. To add a shortcode to a single product.
2. To show any custom content on the single product page.
3. To show any additional information on the single product page.

The above requirement can be fulfilled by Hooks in the Site Builder module of Astra Pro. Using the hooks, you can control the placement of the custom shortcode or section on the single product.

Note: Site Builder is a premium add-on for the Astra theme. If you have not purchased it already, we recommend getting Astra Pro to use the Site Builder.

Please follow the instructions below to add such to your single product:

1. Enable Site Builder module of Astra Pro: In the Astra Dashboard, scroll down to available Astra Pro modules and toggle the button in front of Site Builder to enable it.

2. Next, navigate to Site Builder and select Hooks to create a Hooks layout.

3. The editor will be loaded. By default, the Block Editor is loaded, and you can switch to Elementor or any other page builder from there.

If you wish to add any code, you can also switch to the code editor.

Note: If you have Elementor already installed but still do not see the option to edit the Hooks layout with Elementor, please ensure Elementor is enabled for Site Builder post types in Elementor >> Settings.

4. In the editor, you can use the shortcode block or design your custom content that you want on your single product page. You may add images, text, shortcodes, blocks or any other content supported in the editor you’re using.

5. Once the content is finalised, click on the Astra icon on the top right corner to load the Astra Settings.

6. Hooks layout is already selected, if not, please select the layout as Hooks.

7. In the placement, you can select the action/placement where you want it to appear on the single product page.

For example, if you select after-add-to-cart-button, the custom content will display below the Add to Cart button.

You can also add a custom hook.

8. Once the placement is selected, click on display conditions and select “All Products” to make this display on all the single product pages.

You can also choose to display it on products from a particular category archive, or you can choose to display it only on a specific product.

9. After selecting the correct display conditions, publish the Site Builder layout and check the single product page on the front.

The created content or shortcode should appear on the selected placement.

If you use a shortcode, then the content using the shortcode will be displayed. We have provided some example screenshots showing how this can be useful in different approaches:

Custom Form

You can display a custom form on the single product page.

Special Product Specific Discounts

Aware the users about product specific discounts with a marketing banner at the top of the product page.

Size Chart

Size chart guides for the users before they can make a selection.

Additional Buying Options

Increase the order value by offering extra buying options for the product or membership.

Custom Banner

Show one or multiple banners on the single product page during the sale period, all without using any external third-party plugin.

FAQs and Testimonials

Show Frequently Asked Questions and users’ testimonials to increase sales.

This way, you can not only add custom content on the single product page but also on other WooCommerce pages. All you need to do is select the correct Hooks placement and apply the display conditions accordingly.

I hope the above information has helped you add a shortcode or custom content to a single product page using the Astra Pro Site Builder module.