• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Replace Masonry With CSS Grid In Outfitter Pro

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:

Register for full access

CSS Grid Columns Outfitter Pro Theme WooCommerce

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.