How to create custom shortcodes on WooCommerce

Navigate to Appearance > Theme Editor in your WordPress admin dashboard. Select your active theme and locate the functions.php file. Alternatively, access it via FTP or cPanel file manager at /wp-content/themes/your-theme/functions.php. Always use a child theme to prevent losing customizations during theme updates.

Add your custom function at the bottom of functions.php file. Here's a basic structure:

function custom_woo_products_shortcode($atts) {
    $atts = shortcode_atts(array(
        'limit' => 4,
        'category' => '',
        'orderby' => 'date'
    ), $atts);
    
    // Your WooCommerce query logic here
    ob_start();
    // Output your content
    return ob_get_clean();
}

After creating your function, register it as a shortcode by adding this line below your function:

add_shortcode('custom_products', 'custom_woo_products_shortcode');

Replace custom_products with your desired shortcode name and custom_woo_products_shortcode with your function name. The shortcode name should be unique and descriptive.

Inside your function, create a WP_Query or use WooCommerce functions to retrieve products:

$args = array(
    'post_type' => 'product',
    'posts_per_page' => $atts['limit'],
    'orderby' => $atts['orderby']
);

if (!empty($atts['category'])) {
    $args['tax_query'] = array(
        array(
            'taxonomy' => 'product_cat',
            'field' => 'slug',
            'terms' => $atts['category']
        )
    );
}

$products = new WP_Query($args);

Build the HTML output for your shortcode within the ob_start() buffer:

if ($products->have_posts()) {
    echo '
';
    while ($products->have_posts()) {
        $products->the_post();
        global $product;
        echo '
';
        echo '
' . get_the_title() . '
';
        echo '
' . $product->get_price_html() . '
';
        echo '
';
    }
    echo '
';
    wp_reset_postdata();
}

Navigate to Appearance > Customize > Additional CSS or add styles to your theme's style.css file:

.custom-woo-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.product-item {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
}

Create or edit a page/post and add your shortcode: [custom_products limit="6" category="electronics" orderby="price"]. Click Preview or Update to see the results. Test different attribute combinations to ensure your shortcode works as expected. You can also use the shortcode in widgets or template files using do_shortcode().