helpful.dev

<p>This plugin adds flexible Bootstrap 4 blocks to the WordPress editor for creating custom page layouts with the Bootstrap grid.</p>
<p>Are you using Advanced Bootstrap Blocks? <a href="https://wordpress.org/plugins/advanced-bootstrap-blocks/#reviews">Write a review</a>!</p>
<h3>Blocks</h3>
<p>Advanced Bootstrap Blocks adds the following Bootstrap 4 blocks to the WordPress editor:</p>
<ul>
<li>Container (fixed-width or fluid, with background image settings)</li>
<li>Row</li>
<li>Column</li>
<li>Button and Button Group</li>
<li>Card with Header, Body, Footer</li>
<li>Jumbotron</li>
</ul>
<h3>Block Templates</h3>
<p>Do you need to create standard block layouts for WordPress pages and posts? The WordPress editor lets you define custom block templates inside your theme.</p>
<p>The example below may get you started. Visit the <a href="https://developer.wordpress.org/block-editor/developers/block-api/block-templates/" rel="nofollow ugc">WordpPress Block Editor Handbook</a> to learn more about supercharging your WordPress themes with blocks templates.</p>
<pre><code><?php
if(in_array('advanced-bootstrap-blocks/advanced-bootstrap-blocks.php', apply_filters('active_plugins', get_option('active_plugins')))){ 
    // do stuff only if the Advanced Bootstrap Blocks plugin is active              
    add_action( 'init', 'advancedbootstrapblocks_register_page_template' );
    function advancedbootstrapblocks_register_page_template() {
        $post_type_object = get_post_type_object( 'page' );
        $isFluid = get_theme_mod( 'understrap_container_type' ) === 'container-fluid'; 
        $post_type_object->template = [
            [ 'advanced-bootstrap-blocks/container', 
                ['className'=>'py-5', 'isWrapped' => $isFluid, 'isFluid' => false ], 
                [
                    [ 'advanced-bootstrap-blocks/row', 
                        [],
                        [
                            [ 'advanced-bootstrap-blocks/column', 
                                ['className'=>'col-md-8 offset-md-2 text-center'], 
                                [
                                    ['core/heading', 
                                        [ 'className' => 'display-4', 'level' => 1, 'placeholder' => 'Hello, World!', ], 
                                        []
                                ],
                                    [ 'core/paragraph', 
                                        ['className' => 'lead', 'placeholder' => 'Lorem ipsum dolor sit amet.', ], 
                                        []
                                    ],
                                ]
                            ]
                        ]
                    ]
                ]
            ],
        ];
    }
}
</code></pre>


Advanced Bootstrap Blocks

... and that's not saying much because the others were broken or terrible. Even still, this one is on the right track, and I'm happy to see that at least somebody is getting it right. Thanks for your hard work!

So far the best bootstrap block plugin

This is really well done, it does lack some features to become perfect, and has some issues with the editor (columns chaos if multiple classes are set) but it works perfectly. By far the fastest way to get Bootstrap into Gutenberg : THUMBS UP

Very usable !

Build responsive Bootstrap 4 layouts inside the Gutenberg editor.

BeRocket

Dmytro Holovnia

<p>Simple plugin for WooCommerce which toggle grid / list view of your products and toggle products count per page.</p>
<p>WooCommerce Grid/List View plugin adds buttons to shops page which toggles grid and list products view.<br />
This is simple plugin with advanced customization of list / grid view toggle buttons and list style.<br />
List view products is vertical list of products with additional information.<br />
Grid view products is default WooCommerce view of products.</p>
<h4>🚀 Spring Premium Days is LIVE!</h4>
<p><strong>Save 30%</strong> on Pro features across BeRocket plugins.<br />
<em>Let customers view products their way with fully customizable grid and list layouts. Advanced list styles and layout presets make browsing faster, cleaner, and more enjoyable, boosting conversions.</em><br />
🌿 Improve your store today. <a href="https://berocket.com/woocommerce-grid-list-view/?utm_source=free_plugin&utm_medium=wporg&utm_campaign=spring_2026&utm_content=top_ad_cta&utm_term=list_grid" rel="nofollow ugc"><strong>Limited time offer!</strong></a></p>
<h4>Features:</h4>
<p>✅ Switch list and grid product view style<br />
✅ Simple and advanced customization for products list view<br />
✅ Customization of buttons for list / grid switch<br />
✅ Products per page switcher for Front End using<br />
✅ Customizable position for buttons list/grid view switcher</p>
<h4>Additional Features in Paid Plugin:</h4>
<p>✅ Customization for Product count switch links<br />
✅ Advanced list style for products<br />
✅ Customization for simple products list style<br />
✅ Customization for advanced products list style<br />
✅ Custom CSS styles</p>
<h4>Plugin Links:</h4>
<p><a href="https://berocket.com/woocommerce-grid-list-view/?utm_source=wordpress_org&utm_medium=plugin_links&utm_campaign=list_grid" rel="nofollow ugc">Paid Plugin</a><br />
<a href="https://woocommerce-grid-list.berocket.com/shop/?utm_source=wordpress_org&utm_medium=plugin_links&utm_campaign=list_grid" rel="nofollow ugc">Demo 1</a><br />
<a href="https://woocommerce-terms-popup.berocket.com/?utm_source=wordpress_org&utm_medium=plugin_links&utm_campaign=list_grid" rel="nofollow ugc">Demo 2</a><br />
<a href="https://docs.berocket.com/plugin/woocommerce-grid-list-view?utm_source=wordpress_org&utm_medium=plugin_links&utm_campaign=list_grid" rel="nofollow ugc">Docs</a></p>
<h4>🍬 Wanna try admin side?</h4>
<p><a href="https://berocket.com/woocommerce-grid-list-view/?utm_source=wordpress_org&utm_medium=admin_demo&utm_campaign=list_grid#try-admin" rel="nofollow ugc">Admin Demo</a> – Get access to this plugin’s admin and try it from inside. Change things and watch how they work.</p>
<h4>Premium plugin video</h4>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/LGV7Im4Bfds?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span><br />
<em>we don’t have video with free plugin right now but we are working on it</em></p>
<h4>Compatibility with WooCommerce plugins</h4>
<p>Grid/List View for WooCommerce has been tested and compatibility is certain with the following WooCommerce plugins that you can add to your site:</p>
<p>🔸 <a href="https://wordpress.org/plugins/woocommerce-ajax-filters/" rel="ugc"><strong>Advanced AJAX Product Filters</strong></a><br />
🔸 <a href="https://wordpress.org/plugins/advanced-product-labels-for-woocommerce/" rel="ugc"><strong>Advanced Product Labels for WooCommerce</strong></a><br />
🔸 <a href="https://wordpress.org/plugins/load-more-products-for-woocommerce/" rel="ugc"><strong>Load More Products for WooCommerce</strong></a><br />
🔸 <a href="https://wordpress.org/plugins/product-preview-for-woocommerce/" rel="ugc"><strong>Product Preview for WooCommerce</strong></a><br />
🔸 <a href="https://wordpress.org/plugins/wish-wait-list-for-woocommerce/" rel="ugc"><strong>Wishlist and Waitlist for WooCommerce</strong></a></p>
<h3>Plugin Settings</h3>
<p>Plugin settings can be found in admin area, WooCommerce -> List/Grid View</p>
<h4>Buttons:</h4>
<p>Custom class – set your own class for list / grid view toggle buttons, this removes all stylization<br />
Buttons display – set where list / grid view toggle buttons will be displayed<br />
Buttons position –  list / grid view toggle buttons will be placed from left or right side<br />
Paddings – sets paddings to list / grid view toggle buttons<br />
Presets – predefined styles for list / grid view toggle buttons</p>
<h4>Product Count:</h4>
<p>Use products count – enable products per page buttons<br />
Custom class for buttons – set your own class for products per page buttons, this removes all stylization<br />
Product count value – set list of products per page toggle buttons<br />
Spliter value – set text between products per page toggle buttons<br />
Text – set custom  text before products per page toggle buttons<br />
Buttons display – set where products per page toggle buttons will be displayed<br />
Buttons position – products per page toggle buttons will be placed from left or right side</p>
<h4>List Style:</h4>
<p>Toggle Simple and Advanced style add additional settings to customize list products view.<br />
To edit element of list click on this element on right side of page<br />
Advanced style for list products view have some presets.</p>
<h4>CSS:</h4>
<p>CSS styles – Some custom css styles that adds to page.</p>
<h4>JavaScript:</h4>
<p>Custom JavaScript that executes on some action.</p>
<h4>License:</h4>
<p>Page for adding product key from BeRocket site</p>


Grid/List View for WooCommerce

Simple plugin for WooCommerce which toggle grid / list view of your products and toggle products count per page.

Advanced Bootstrap Blocks vs Grid/List View for WooCommerce