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
********************************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:
Comments