********************************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 */ }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter