WooCommerce

WooCommerce Shortcode: Product Links & Custom Class

This function creates a short-code that you can use for generating a WooCommerce href product link, which will also add a class based on if the the product is out of stock or in stock.

Essentially, this can be used to link a specific product (based on the product’s ID), and be able to change the styling of that link (based on if the product is in stock).

Usage Example:

Adding the short-code to your content:

[stock_product_link id="123"]Check out this product![/stock_product_link]

That short-code would output this, if the product was out of stock:

<a href="https://www.example.com/product/cool-product/" class="piece-out">Check out this product!</a>

Using that “piece-out” class, you could then change the color of the link to red, or set the cursor to be not-allowed.

The Code

Add this to the Code Snippets plugin, without the opening <?php bit:

<?php 

/* 
Create a shortcode that will wrap content, and will return a product link
based on the product ID that is added to the shortcode
Usage: [stock_product_link id="123"]The text, image, etc. you want to link[/stock_product_link]
*/
if( !function_exists('custom_shortcode_stock_product_link') ) {
	function custom_shortcode_stock_product_link( $atts, $content = null ) {
		// Shortcode Attributes
		$atts = shortcode_atts(
			array(
				'id' => '',
			),
			$atts, 'stock_product_link'
		);
		$product_id = $atts['id'];
		// Get an instance of the WC_Product object
		$product = wc_get_product( $product_id );
		// Display custom class, based on if product is in or out of stock
		$class = $product->is_in_stock() ? ' class="piece-in"' : ' class="piece-out"';
		// The product link
		$product_link = $product->get_permalink();
	  	// The product add-to-cart link
		$product_cart_link = $product->add_to_cart_url();
		// The output
		return '<a xlink:href="'.$product_cart_link.'"'.$class.'>'.$content.'</a>';
	}
	add_shortcode( 'stock_product_link', 'custom_shortcode_stock_product_link' );
}

/* 
Create a shortcode that will wrap content, and will return an SVG group element
with a specific class, based on if the product ID that is added to the shortcode is IN STOCK
Usage: [stock_product_piece id="123"]The text, image, etc. you want to link[/stock_product_piece]
*/
if( !function_exists('custom_shortcode_stock_product_piece') ) {
	function custom_shortcode_stock_product_piece( $atts, $content = null ) {
		// Shortcode Attributes
		$atts = shortcode_atts(
			array(
				'id' => '',
			),
			$atts, 'stock_product_piece'
		);
		$product_id = $atts['id'];
		// Get an instance of the WC_Product object
		$product = wc_get_product( $product_id );
		// Display custom class, based on if product is in or out of stock
		if ( $product->is_in_stock() ) {
			return $content;
		}
	  	else {
		 	return;
		}
	}
	add_shortcode( 'stock_product_piece', 'custom_shortcode_stock_product_piece' );
See our featured website design work

Check out some of the beautiful websites we’ve built for over 2,000 clients.

We offer WordPress support & maintenance

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related articles