Show Stock Status in Themer Product Archive Layout

Do you want to show the woocommerce product’s stock status information in themer product archive layout with Post Grid module? By default stock information feature is missing in the Beaver Builder Post Grid module. In this article I shall show you how you will add the stock status into Beaver Themer product archive grid layout.

Stock Status

Adding Stock Notification Field in Settings Form

At first adding the “Stock Notification” field into Beaver builder’s Post Grid module’s settings form. Beaver Builder plugin have a filter fl_builder_register_settings_form. Using this hook you can add the extra fields into existing module’s settings form without editing the core plugin’s file.

I’m adding the Stock Notification field with following PHP snippets.

Stock Notification Field

Creating New Connection Field

Now creating a new connection field Product Stock Notice with add_post_property() method of FLPageData class.

Getting the Product Stock Notice field value with callback function get_product_stock_notice. This function will display the “In Stock” or “Out of Stock” message at front end. Here is the code of this function

Integrating Field with Post Grid Module

Later I am displaying the stock status above the Add to Cart or Select Options or Read More button in Product grid layout. Post Grid Module is using the fl_builder_post_grid_before_content hook for product name, rating, price etc. Here I used the same hook for stock status message.

You will open the functions.php file of your theme and add the all PHP codes there. Here is the complete codes which I added into my theme’s file

Now you will create the woocommerce product archive layout with Beaver Themer add-on and select “Show” from Stock Notification drop down in Post Grid module (see the above screenshot). Publish the layout. That’s it.

If you have any query, you can ask via comment form.

8 Comments

  1. Ian on January 28, 2019 at 11:31 am

    Hi – tried adding your php code into a customer’s Woo site and its not showing the dropdown option in the Post settings. Using Beaver 2.2.0.6 & Themer 1.2.1.1 – any ideas?

  2. Williiam gardner on May 9, 2018 at 1:12 pm

    This also works for when using a ‘Custom Post Layout’, but there is no control over where it appears in the layout, and it gets added to the top of the product.

    Is there a way to edit the code to change this?

    • WP Beaver World on May 9, 2018 at 1:30 pm

      Are you wanting to add it above the product title or image?

      • William Gardner on July 5, 2018 at 12:10 pm

        Hi, sorry didn’t see you reply.

        I would want it adding below the product title if possible?

        • WP Beaver World on July 5, 2018 at 3:17 pm

          Replace this line

          add_action( 'fl_builder_post_grid_before_content', 'probb_post_grid_before_content' );

          WITH

          add_action( 'fl_builder_post_grid_before_meta', 'probb_post_grid_before_content', 3 );

  3. Sid on February 16, 2018 at 10:21 pm

    Is there a way to show the stock count ie. 700 in stock?

  4. Athlone on July 20, 2017 at 7:52 am

    Very useful and much appreciated, thank you.

Leave a Comment





Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares