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

PHOTO EMBED

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

Saved by @benjaminb #php

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

********************************function.php********************************
// 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);
********************************style.css********************************

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

content_copyCOPY

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: