Customising the Classes Inside <ul> Popular products shortcode [products] in woocommerce


Mon Jul 31 2023 12:02:53 GMT+0000 (Coordinated Universal Time)

Saved by @benjaminb #php

<div class="popular-products">
    <?php echo do_shortcode('[products limit="4" orderby="popularity"]'); ?>

// Customize the classes inside the <ul> element for the products list.
function custom_woocommerce_product_loop_start($loop_output) {
    // Add custom classes to the <ul> element.
    $loop_output = str_replace('products', 'products custom-ul-class', $loop_output);
    return $loop_output;
add_filter('woocommerce_product_loop_start', 'custom_woocommerce_product_loop_start', 10, 1);

/* Custom styles for the popular products list */
ul.products.custom-ul-class {
    /* Add your custom styles here */


To add the [products] shortcode and customize the classes inside the <ul> element, you can use a combination of hooks, filters, and custom CSS. Here's how you can achieve this: