1st Jun '22

Out of Stock Ribbon for WooCommerce Products in Bricks

This Pro tutorial provides the steps to show a "OUT OF STOCK" ribbon for WooCommerce products that are output via the Bricks' Products element on listing pages like the Shop page and product category/tag archives.

Step 1

Let's register a custom function for our ribbon.

Add the following in your child theme's functions.php or a code snippets plugin like WPCodeBox:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:

Bricks

Pro

WooCommerce

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Image Sizes in Bricks

An overview of all the image sizes generated by Bricks, WooCommerce & WP.

Categories: Bricks, Free

Tags: Image Sizes, WooCommerce

Pro

WooCommerce Product Gallery Images in Bricks Query Loop

How to output the images attached to Product gallery on a product page with a query loop

Categories: Bricks, Plugins, Pro

Tags: bricks/element/render, bricks/posts/query_vars, Filters, WooCommerce

Pro

[WooCommerce] Sticky on Scroll Add to Cart section in Bricks

Setting up a sticky section that fades in when scrolling down and fades away when scrolled to the top.

Categories: Bricks, Pro

Tags: JavaScript, sessionStorage

Appending WooCommerce Endpoint Names To My account Page Titles in Bricks

Adding the WooCommerce endpoint names, “Orders”, “Downloads” after the WooCommerce ‘My account’ Page’s title text at the various endpoint URLs.

Categories: Bricks, Free, Plugins

Tags: WooCommerce

Custom WooCommerce Account Dashboard in Bricks

How to build a custom My Account dashboard using the WooCommerce account builder in Bricks.

Categories: Bricks, Free, Plugins

Tags: Dashboard, WooCommerce

How To Remove the Featured Image from WooCommerce Product Gallery

Product Gallery on single product pages in WordPress include the product's featured image by default. If you are looking to exclude it so only the…

Categories: Free, Plugins

Tags: WooCommerce

Pro

Check if the User Purchased Any of the Specified Products

This Pro tutorial provides the steps for setting up a dynamic data condition on any element in Bricks so it can be output only if…

Categories: Bricks, Plugins, Pro

Tags: Conditions, Dynamic Data, WooCommerce

Pro

Single Product Template in Bricks

In this Pro tutorial we share an export of a pre-made Bricks Template for single products.

Categories: Bricks, Pro

Tags: Template Export, WooCommerce

Side-by-side WooCommerce Quantity and Add to Cart in Bricks

Looking to position the quantity input field and Add to cart button next to each other instead of one below the other in Bricks? Add…

Categories: Bricks, Free

Tags: WooCommerce

View All Tutorials