Woocommerce by itself has a lot of shortcodes that we can use and can really help us with building our shop.
But, sometimes we just need a simple list of products without all information, let’s say we want to show the title, price, and product image as a simple table view.
Let’s imagine that we also want to have a possibility for custom attributes in that shortcode as well as custom ordering (e.g. most sellable products).
After that, we can use that shortcode on pages, widgets, etc.
First, we will create a custom shortcode in our functions.php file:
// Woocommerce get custom product list
function cs_get_product_list($atts) {
$attributes = shortcode_atts( array(
'product_number' => '-1',
'post_status' => 'publish',
'id' => 'false',
'title' => 'true',
'total_sales' => 'true',
'stock_status' => 'true',
'price' => 'true',
'default_style' => 'true'
), $atts );
ob_start();
// Define arguments
$args = [
'post_type' => 'product',
'posts_per_page' => $attributes['product_number'],
'fields' => 'ids',
'post_status' => $attributes['post_status'],
];
// Get all product IDS
$products_ids = new WP_Query($args);
// Save product info
$products_config = [];
if ( ! empty( $products_ids->posts ) ) {
foreach ( $products_ids->posts as $product_id ) {
$product = new WC_Product($product_id); // Woocommerce product object
// Prepare product array
$prepare = [
'id' => $product->get_id(),
'title' => $product->get_title(),
'total_sales' => $product->get_total_sales(),
'stock_status' => $product->get_stock_status(),
'price' => $product->get_price_html(),
];
// Add prepared product to array
$products_config[] = $prepare;
}
}
// html ouptut
$output = '';
if ( ! empty( $products_config ) ) {
if ( $attributes['default_style'] == 'true' ) {
$output .= '
<style>
ul.cs-product-list {
list-style-type: none;
margin-left: 0;
display: grid;
grid-template-columns: auto auto auto;
column-gap: 22px;
row-gap: 22px;
}
ul.cs-product-list li {
border: 1px solid #d1d1d1;
padding: 10px;
border-radius: 3px;
}
</style>
';
}
$output .= '<ul class="cs-product-list">';
foreach ( $products_config as $product_info ) {
$output .= '<li>';
if ( $attributes['id'] == 'true' ) $output .= __('ID: ') . $product_info['id'] . '<br>';
if ( $attributes['title'] == 'true' ) $output .= __('Name: ') . $product_info['title'] . '<br>';
if ( $attributes['price'] == 'true' ) $output .= __('Price: ') . $product_info['price'] . '<br>';
if ( $attributes['total_sales'] == 'true' ) $output .= __('Total sales: ') . $product_info['total_sales'] . '<br>';
if ( $attributes['stock_status'] == 'true' ) $output .= __('Stock status:') . $product_info['stock_status'] . '<br>';
$output .= '</li>';
}
$output .= '</ul>';
}
echo $output;
return ob_get_clean();
}
add_shortcode( 'cs_product_list', 'cs_get_product_list' );
To call shortcode use this:
[cs_product_list]
But, this shortcode accepts arguments so below is the documentation:
/**
* Documentation
*
* [cs_product_list] -> will show list of all products
* [cs_product_list product_number="-1"] -> Number of products you want to show - default: -1 (all)
* [cs_product_list post_status="publish|draft|any"] -> Choose post status - default:publish
* [cs_product_list id="true|false"] -> show ID or not - default:false
* [cs_product_list title="true|false"] -> show title or not - default:true
* [cs_product_list total_sales="true|false"] -> show total sales or not - default:true
* [cs_product_list stock_status="true|false"] -> show stock status or not - default:true
* [cs_product_list price="true|false"] -> show price or not - default:true
* [cs_product_list default_style="true|false"] -> use default style or not - default:true
*
* We can combine:
* [cs_product_list product_number="6" id="true" title="true" total_sales="false" stock_status="true" default_style="true" price="true"]
*
*/
Here is an example: https://work.co-nic.com/woocommerce-get-custom-product-list/
If you have any questions feel free to ask 🙂