Outfitter Pro is the latest StudioPress child theme for WooCommerce which uses a masonry layout on the front page.
This tutorial shows you how to use pure CSS instead of Masonry to feature WooCommerce products in the front page 2 widget area.
Here’s the front page using CSS Grid to display WooCommerce featured products :
This method uses grid area names for placement of each grid item as opposed to line numbers which are used in this example. This enables you to display any item in any order in the grid by name rather than number using pure CSS which you might find easier to work with especially if you want to modify the shape of each item.
Demo’s
Compare the StudioPress demo which uses Masonry with CSS Grid used in the demo video.
Simple Installation
There’s 2 simple steps :
Step 1 : Remove the following 2 lines of code which load the masonry from lines 49 & 50 in the Outfitter Pro themes front-page.php file :
wp_enqueue_script( 'jquery-masonry', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'outfitter-masonry-args', get_stylesheet_directory_uri() . '/js/masonry-args.js', array( 'jquery-masonry', 'jquery' ), '1.0.0', true );Step 2 : From the download file, which logged in members can access below, copy & paste the CSS to the end of the Outfitter Pro themes style-front.css file and clear caching.
Here’s the download file for logged in members:
Leave a Reply
You must be logged in to post a comment.