Here’s a plugin I have written that extends the Bricks theme, specifically it allows you to use Masonry.js (built into WordPress) with the Product Element. I was surprised this wasn’t a built-in option and created this lightweight plugin to achieve integration. All you need to do is install the plugin and add a custom id to the product element.
The plugin is straightforward enough, you will find a settings panel where you may customise the style sheet. It is important you add the id `#masonry-for-bricks` to the relevant product element via the Bricks builder for the masonry effect to work.
Masonry for Bricks Product Elements – Download Plugin 1.1
Custom Bricks Masonry requires the Bricks theme to be installed and activated. Upon activation, it adds the necessary scripts and styles to enable the Masonry.js functionality, and provides a settings page where you can customise the CSS.
All you need to do – add the id `#masonry-for-bricks` to your Product Element via the Bricks builder for the masonry layout to take effect.
=== Custom Bricks Masonry ===
Contributors: callumalden
Tags: bricks, masonry, woocommerce, grid layout
Requires at least: 5.0
Tested up to: 5.8
Requires PHP: 7.0
Stable tag: 1.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Adds a masonry layout to the Bricks theme WooCommerce Product module.
== Description ==
**Custom Bricks Masonry** enhances the Bricks theme by integrating the Masonry.js library, enabling a beautiful and flexible masonry grid layout for your WooCommerce product modules. This plugin requires the Bricks theme to be installed and activated. Upon activation, it adds the necessary scripts and styles to enable the Masonry.js functionality, and provides a settings page where you can customize the CSS. Remember to add the class `.custom-bricks-masonry` to your Product Module via the Bricks builder for the masonry layout to take effect.
== Installation ==
1. Upload the plugin files to the `/wp-content/plugins/bricks-product-masonry` directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress.
3. Ensure the Bricks theme is installed and activated.
4. Go to 'Settings' > 'Custom Bricks Masonry' to customize the CSS if needed.
5. Add the id `#masonry-for-bricks` to your Product Module via the Bricks builder.
== Frequently Asked Questions ==
= Does this plugin work without the Bricks theme? =
No, this plugin requires the Bricks theme to be installed and activated.
= How do I apply the masonry layout to my product module? =
After activating the plugin, add the id `#masonry-for-bricks` to your Product Module via the Bricks builder.
== Screenshots ==
1. Settings page to customize CSS.
2. Example of a WooCommerce product module with masonry layout.
== Changelog ==
= 1.1 =
* Changed requirement for id #masonry-for-bricks rather than class.
== Upgrade Notice ==
= 1.0 =
* Initial release.
== License ==
This plugin is licensed under the GNU General Public License v2 or later. See the LICENSE.txt file for more details.
== Additional Terms ==
1. Non-Commercial Use: You may use, distribute, and modify this software for any purpose, but you may not use it for commercial purposes.
2. Attribution: You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
== Credits ==
Custom Bricks Masonry was developed by Callum Alden.
== Donations ==
If you like this plugin or find it useful, please consider a small contribution to its continued development. [Click here for more](https://callumalden.com/donate).
Leave a Reply