Skip to content
Home > Posts > Alternatives to the WooPack Product Module

Alternatives to the WooPack Product Module

There has been an issue with WooPack’s scripts since the latest update, and it has caused time-out errors and the inability to edit the module’s settings. WooPack is not the only products module available, and until this issue gets resolved, we could replace this with another module and style it to look similar to the WooPack module.

One of the issues discovered by builders during new WooCommerce builds when using the shop layout templates is that the layouts use the WooPack modules that are default set to “custom query”. Since the modules aren’t allowing edits to be made, changing the content source to “main query” isn’t working – which means the layouts aren’t suitable to product archive pages created with beaver themer. If you run across this issue: WooPack modules don’t have to be used – switch them out with other modules as needed.

You can choose any post module as long as:

  • It allows product features and styling
  • It’s content source can be altered to “main query” on archive pages

Two solutions have been outlined below of how to use other modules in place of WooPack.


Solution 1

A good module that can be used to display products on archive pages is – Themer’s WooCommerce module for Products:

  • This module is the default themer module so it is cleaner and lighter than woopack
  • This will show “posts” as the module title when you place on the page, just make sure “main query” is selected under the module’s content tab, and it will show you the products on that archive by default
  • This module will show product ordering drop down when the page is published, but will not allow Quick view and filtering like woopack did

You’ll notice that there’s no way to alter the amount of products shown per page on main query – it inherits the products per page feature from WordPress’s Reading settings in the dashboard – change the amount of posts per page to a multiple of 3 (if you have 3 product/post columns) and they will even out. (Read details on this)

If the columns still doesn’t even out, it could be inheriting settings from the WooCommerce content tab in customizer. If the columns set for the product catalog in the customizer are different from the amount of columns being used in the module, they will clash with each other. Change the columns in customizer to match the number of columns set in the products module. (Read details on this)


Another thing to note: WooCommerce Ordering

  • Woocommerce product ordering dropdown is hidden by default on themer product archive layouts
  • This is because most custom product modules like woopack or content grid don’t support this feature
  • Since we are using the themer woocommerce module for products, and it allows us to enable product ordering, it can work
  • To make it work when using the themer woo product module, find this ordering form in the css and change it from “display: none” to “display: block”
  • If you decide to go with the powerpack content grid layout or any other product module instead, leave the ordering dropdown hidden.

For layouts using the themer woo product module as seen in solution 1, put the following css in the customizer:

/*display woo product ordering*/
.woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {
    display: block;
}

Solution 2

Another good module to use for products is – PowerPack Content Grid:

  • When choosing this module, go to the content tab and select main query
  • Show title, hide content > scroll down and hide author and date from meta settings
  • You can heavily style it as needed, and the posts adjust to masonry layout if they are uneven in height
  • This module will not show product ordering dropdown, nor quick view
  • However, this module has the option to enable filters as seen with the woopack module

You can enable the filters to pull from product categories or product tags – filtering by category would make sense for the main shop product archive page, but it would probably be a good idea to disable filtering on any category product archive page layouts.


Product Heights

Regardless of whether you had kept using WooPack, or if you choose to use the above two solutions, a common issue noticed is that the product images in the grid are all different sizes, causing the products to be very uneven in height. A simple solution to this issue is shown below for both solutions discussed above. This can be used with any module that has a featured image involved and requires even heights, but the classes will change based on what you name the module and based on the module’s own class names for the divs within it.

To solve the issue of the product module’s images being so uneven in height:

  • Give the product module a custom class
  • Save your styled module so you can use it to replace the woopack grid on other product archives/category pages
  • Then use css to adjust the image heights – shown in detail below

When using solution 1 – themer product module

Themer product module has been saved under saved modules as “themer product grid styled” 
It has been given this class: “prodgridstyled”

Place this in the customizer, then publish it and refresh the page with the product grid to see the changes reflected:

/*css to make the images in the Themer product module equal in height*/
.prodgridstyled .fl-post-grid-image {
    background-color: #ffffff;
    padding: 10px;
}
.prodgridstyled .fl-post-grid-image img {
    width: auto !important;
    max-height: 200px;
}

When using solution 2 – powerpack content grid module

PowerPack content grid module has been saved under saved modules as “pp content grid product styled”
It has been given this class: “pp-prodgridstyled”

Place this in the customizer, then publish it and refresh the page with the product grid to see the changes reflected:

/*css to make the images in the powerpack custom grid product module equal in height*/
.pp-prodgridstyled .fl-photo-content {
    background-color: #ffffff;
    padding: 10px;
}
.pp-prodgridstyled .pp-content-grid-image img {
    width: auto !important;
    max-height: 200px;
}
Scroll To Top