Looking to add a custom-designed section to your WooCommerce product pages? I recently came across this challenge while doing a project for DD Farms.
While there are plugins to help you redesign your product pages, if you’re looking for a simple tweak rather than having to design the whole thing, you can do so easily with the steps mentioned below.
Just to be clear, the purpose of this article is to show you how to add custom sections or blocks in your product pages before the “add to cart” button like in the image below:
Use Cases
You can use this process for:
Adding an offer or a topical message
Helping prospects make an informed decision
Showcasing the benefits of the product in a better, visual way
How to Add Custom Design Sections to WooCommerce Single Product Page
To add custom blocks to your WooCommerce single product page, follow these steps:
Create your custom design
–
Go to Elementor -> Templates -> Add New Template. Here you can create a design with the functionality that you want. Use your competitor data to find inspirations.
Get a Shortcode of The Custom Fold
–
If you’re using Elementor Pro, then you can see the shortcodes of the design along with it in the saved templates library.
If you’re using the free version of Elementor, you can install the “Shortcodes for Elementor” plugin which is free to use. After its installation, go to “Shortcode Elementor” from your sidebar and click on “Add New Shortcode” and then “Edit with Elementor”
Here you can copy and paste the design you created earlier. After you hit publish and go back to the “Shortcode Elementor” tab, you will get a shortcode. Keep this Shortcode with you.
Allowing ShortCodes in Product Excerpts 1: Install WPCode
–
WooComerce allows you to use shortcodes only after you’ve made changes to your “functions.php” file. You can do it easily without manually adding any code.
Install the WPCode plugin (free version). After installing, go to “Code Snippets” from your left sidebar of WordPress Backend.
Allowing ShortCodes in Product Excerpts 2: Add Custom Snippet in WPCode
–
In your WPCode plugin (which shows as Code Snippets in your sidebar), Go to All Snippets -> Add New -> Add your Custom Code (New Snippet) -> PHP Snippet.
In the code preview, give it a name, and add the following code the editor:
————
/**
Allow shortcodes in product excerpts
*/
if (!function_exists(‘woocommerce_template_single_excerpt’)) {
function woocommerce_template_single_excerpt( $post ) {
global $post;
if ($post->post_excerpt) echo ” . do_shortcode(wpautop(wptexturize($post->post_excerpt))) . ‘
‘;
}
}
————-
Allowing ShortCodes in Product Excerpts 3: Frontend Insertion for functions.php file
–
We only want to add this code to the functions.php file. So to do that you need to select “Frontend only” as the location in the insertion section. Leave all other fields as is. Selecting “Frontend only” adds your custom snippet to the functions.php file in WordPress.
After you’re done with this, click on update. Wait for the page to refresh. Now hit the toggle for turning the script on.
With this, we have enabled the shortcode usage in your product short descriptions.
Now you can either place the shortcode that you created earlier for a single product, or you can do it for all products in one go.
Adding Custom Section in All or Specific Product Pages 1: Use WP Code and WooCommerce Filter Hooks
–
To add the shortcode that you have created earlier in all or specific product pages, you can use WooCommerce Filter Hooks to programmatically add that shortcode based on the conditional logic you create.
Go to Code Snippets again and Go to All Snippets -> Add New -> Add your Custom Code (New Snippet) -> PHP Snippet.
In the code preview, give it a name, and add the following code the editor:
————add_filter('product_descr','ce_add_text_short_descr'); function ce_add_text_short_descr($description){ $text="[my-shortcode-goes-here]"; return $description.$text; }
————
Place your shortcode to replace “my-shortcode-goes-here” here.
In the Insertion tab, select “Frontend Conditional Logic” this time. We’ll define the logic in the next step.
Adding Custom Section in All or Specific Product Pages 2: Use WPCode Conditional Logic
–
Use the “Smart Conditional Logic” while creating your snippet for applying that shortcode in all products or specific ones based on criteria you define.
It is a good idea to keep logic even if you want to display the shortcode on all product pages. This would remove other incidental pages to show your custom design such as shop pages or the product table and everywhere else where you’re showing the product description.
For this, just use the logic I have used from the image.
And done.
Like what you see? Connect with me on Linkedin or add your opinion in the comments below.
Inquisitive?
The process follows these learnings:
- You can create custom sections and design them however you want using common page builders such as Elementor or WP Bakery.
- These custom sections can be used on any page of a WordPress website using Shortcodes.
- Elementor (free) version doesn’t show shortcodes for the designs you have created, so you need to either use Elementor Pro or this free plugin – Shortcodes for Elementor
- WooCommerce doesn’t allow shortcodes to be put on its product pages by default. But they do have a snippet that opens up this functionality. You can find this in their documentation -> code snippets -> general snippets -> Allow shortcodes in product excerpts
- The snippet from WooCommerce needs to be put in the “functions.php” file of your theme (preferably your WP child theme). You need the child theme because any changes to WordPress core files get rewritten after the theme is updated. All of this can be done using a file manager plugin, or theme file editor option in the WordPress backed (if it’s visible to you).
- I am a non-techie, and if you are too, then the easiest way to implement the code from WooCommerce is using WPCode (Free version). Rather than manually adding code to your theme files, you can use WPCode to add the snippet safely and select the location as “Frontend only”. This will put the snippet in the functions.php file.
- Once you have enabled the shortcodes functionality, you can place shortcodes of design or for whatever purpose you want, just in the product description box. Now, you can place shortcodes in your product description one by one in all products.
- But if you’re lazy like me, you’d want to programmatically place the same shortcode in all or specific product pages following a conditional logic. You can do it using WooCommerce filter hooks.
- WooCommerce Filter Hooks lets you modify existing code on the site. You can use this code to add the shortcode to the product description on the site. To do it for specific pages, you use WPCode again to add this code to the “functions.php” file, and only execute it for specific pages or categories of pages.
TL;DR
- Create a custom design that you want to put on your product page using Elementor or WP Bakery.
- Get a shortcode of that design.
- Enable the use of shortcodes in your product short description in your WooCommerce product pages using their given snippet.
- Add that shortcode to your custom design section or fold it to the product description on your WooCommerce product page.
- For all pages, use filter hooks and WPCode to insert that shortcode in all product pages or specific product pages.
