8 Best Product Grid Plugins for WooCommerce (Free + Paid)

Are you looking for a WordPress plugin to show WooCommerce products in a grid?

Showing your products in a grid view provides a better user experience for customers. With the right plugin, you can easily customize and style your product category grid.

In this article, we will show you the best product grid plugins for WooCommerce.

Why Use a Product Grid Plugin for WooCommerce?

When you’re creating an online store, it is important to showcase your best products and make it easier for customers to view them.

With the right WooCommerce plugin, you can easily display multiple products or features from a single product in a grid view. This provides a better user experience and makes it easy for customers to interact with your products.

Besides that, a product grid plugin also offers more flexibility for customization. You can easily adjust the grid, choose the number of rows and columns, change the color, and more.

Some plugins will also let you add category filters. This way, users can simply search for a product and view them in a grid rather than explore each product in your WooCommerce store. It helps boost conversions and increase sales.

That said, let’s look at the best product category grid plugins for WooCommerce.

1. SeedProd

SeedProd is the best WordPress website builder and landing page plugin. It is used by over 1 million professionals.

The plugin offers a drag-and-drop builder that lets you create custom themes and page layouts. You get prebuilt templates and lots of customization options.

In the page builder, SeedProd offers exclusive WooCommerce blocks to customize your product page. You simply drag and drop the products grid block on your template.

The plugin lets you choose the number of columns in the grid. It also offers options to filter products and show all products, best-selling products, top-rated products, and more. Besides that, you can select the order of the products based on date, title, rating, ID, and more.

Other than that, SeedProd offers other blocks for customization. For instance, you can add images, optin forms, countdown timers, contact forms, and more to your product pages.

It also easily integrates with email marketing tools to help you collect leads and grow your email list.

Pricing: SeedProd prices start from $39.50 per year. There is also a free SeedProd Lite version you use to get started.

2. MonsterInsights

MonsterInsights is the best Google Analytics plugin for WordPress. It lets you set up Google Analytics in WordPress without editing code or hiring a developer. Plus, it automatically sets up advanced tracking on your website.

MonsterInsights offers a Popular Posts feature that lets you show your best-selling products in a grid view. You get to choose from prebuilt themes for your product grid.

The plugin also shows a preview of your theme. Besides that, you get plenty of customization options.

For instance, you can change the color and size of the title, prices, and ratings. It also gives you the option to select a layout for your grid, choose product count to display, and more.

Other than that, you can also exclude certain products or product categories from appearing in the MonsterInsights popular post widget on the page.

Pricing: MonsterInsights premium plans start from $99.50 per year. There is also a MonsterInsights Lite version you use for free and set up Google Analytics in WordPress.

3. ProductX

ProductX is another popular product grid plugin for WooCommerce. It lets you create WooCommerce stores using the drag-and-drop builder.

There are different blocks you can use to customize your store. Plus, the plugin offers a template toolkit, so you can quickly select a design and edit it according to your requirements.

ProductX offers different product category grid blocks. You can choose from 3 different variations to display products in a grid view. Besides that, there are multiple settings to edit the design of the product grid.

Other features offered by ProductX include advanced product filters, a progress bar, product comparison, whitelist items, and much more.

Pricing: ProductX is a paid WordPress plugin with prices starting from $49 per year for 1 site.

4. YITH WooCommerce Best Sellers

YITH WooCommerce Best Sellers is a great plugin to have on your online store and display top-selling products in a grid layout.

The plugin is easy to use and offers different options to customize your product category grid. For example, you can change the text, ratings, colors, and other details of any product in the grid. Plus, you can choose the number of rows and columns to display.

Using YITH WooCommerce Best Sellers, you can show your most popular products or top-selling product category. There is also a best-seller badge you can use to highlight a product and get more conversions.

Pricing: YITH WooCommerce Best Sellers will cost you $59.99 per year.

5. Smash Balloon Instagram Feed

Smash Balloon Instagram Feed is the best WordPress social media plugin. You can display content from different social media accounts on your WordPress website using the plugin.

If you’re using Instagram shopping to sell products online, then you can easily display items on your WordPress website using Smash Balloon’s Instagram Feeds plugin.

You can simply connect your Instagram account with the WooCommerce store. After that, display product feeds as grids, carousels, masonry, and other layouts.

The plugin also lets you link each Instagram post to a page on your WooCommere website. This way, users will land on the product page and easily make a purchase.

With Smash Balloon, you get full control over the appearance of your social media feeds. There are options to change the width, height, number of images, and more for your Instagram shoppable feed.

Pricing: You can get Smash Balloon Instagram Feed plugin for $49 per year.

6. Product Carousel Slider & Grid Ultimate for WooCommerce

Product Carousel Slider & Grid Ultimate for WooCommerce is a free WordPress plugin that lets you create attractive product grids, carousels, and sliders.

The plugin offers built-in themes for carousels and grids. Plus, it lets you customize the grid by choosing the number of products to display per page, showing a header title, and controlling the image sizes. The plugin also gives you settings for selecting columns and rows and enabling pagination.

You can then choose which products to show in the grid. There are multiple options to choose from, like the latest products, older products, and featured products. After creating the product grid, you can easily add them anywhere on your WooCommerce store using shortcodes.

Besides that, there are options to show different badges on products. For instance, you display a sales badge, featured badge, discount badge, and sold-out badge in your product grid. You can also edit the style settings and change the product title font, color, ratings, and more.

Pricing: You can use the Product Carousel Slider & Grid Ultimate for WooCommerce plugin for free.

7. Grid/List View for WooCommerce

Grid/List View for WooCommerce is the next product category grid plugin on our list. The plugin is a great free solution for business owners looking to create simple product grids and lists.

You get to choose from 2 default styles, which include a grid or list layout. Besides that, there are basic options to customize your product grid. You can choose how many products to display and where to position the product count.

Sadly, there is no drag-and-drop customization option as you’d get in SeedProd. However, the plugin offers a wide variety of buttons to choose from for your WooCommerce product grid.

Pricing: Grid/List View for WooCommerce is a free-to-use plugin.

8. Product Categories Designs for WooCommerce

Product Categories Designs for WooCommerce is the most basic WordPress plugin for creating product grids and sliders.

If you have different product categories on your WooCommerce store, then all you have to do is install the plugin and use shortcodes to display the products.

There are no customization options or additional settings that you’ll find in your WordPress dashboard. Everything is controlled through shortcodes. You can use different shortcodes for choosing the number of columns, order of product categories, design of the product grid, and more.

However, if you’re looking for more customization features and ease of use, then you can use any other plugin on our list, like SeedProd or MonsterInsights.

Pricing: You can get started with Product Categories Designs for WooCommerce for free.

Which is the Best Product Grid Plugin for WooCommerce?

In our experience, SeedProd is the best product grid plugin for WooCommerce. It is super easy to use because it offers a drag-and-drop builder with lots of template customization for your site and pages.

You can create stunning WooCommmerce pages with customized product grids that will help boost conversions. The plugin also offers tons of options to edit and change the appearance of your product category grids.

That’s not all, SeedProd also integrates with popular email marketing services, which helps grow your email list.

Bonus: If you’re looking to grow your WooCommerce store, then we also recommend that you try FunnelKit. It’s one of the best WooCommerce plugins to grow your store revenue.

We hope this article helped you pick the best product grid plugin for WooCommerce. You may also want to see our guide on WooCommerce SEO made easy and the best live chat software for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 8 Best Product Grid Plugins for WooCommerce (Free + Paid) first appeared on WPBeginner.

April 21, 2023 at 02:40PM

How to Prevent Clients from Deactivating WordPress Plugins

Do you want to prevent clients from accidentally deactivating WordPress plugins?

If you build websites for other people, then you probably have a few important plugins that you install on every client site. If a client accidentally deactivates one of these essential plugins, then it could break their site completely.

In this article, we’ll show you how to stop clients from deactivating WordPress plugins.

Why Prevent Clients from Deactivating WordPress Plugins?

If you create websites for other people, then you may have a list of must-have WordPress plugins that you install on every site. These might be security plugins that protect the client against hackers and malicious code.

You might even use plugins to automate crucial WordPress maintenance tasks such as creating regular backups or deleting spam comments.

If the client accidentally deactivates one of these plugins then it could make their website vulnerable to attack, or affect how it works. In the worst-case scenario, it might even break their website completely.

Even though this isn’t your fault, it’s still a bad client experience and could damage your reputation. With that being said, let’s see how you can stop clients from accidentally deactivating plugins in WordPress.

Simply use the quick links below to jump straight to the method you want to use.

• Method 1. Using the Default WordPress User Roles (No Plugin Required)
• Method 2. Using the Members Plugin (Create a Custom Client Role)
• Method 3. Using Custom PHP (Prevent Clients From Deactivating Specific Plugins)

Method 1. Using the Default WordPress User Roles (No Plugin Required)

WordPress comes with a simple but powerful user management system where each user has different capabilities based on their assigned role.

When you install WordPress, it creates the following user roles automatically: 

• Administrator
• Editor
• Author
• Contributor
• Subscriber

By default, only the Administrator has permission to manage plugins, which includes deactivating plugins. 

With that in mind, we recommend creating a single admin account for your clients so they have a way to manage their sites. You can then create non-admin accounts for anyone else who needs access but doesn’t require admin privileges.

Without admin rights, this means the majority of your clients won’t be able to deactivate plugins.

You can use any role for the non-administrator accounts. However, we recommend using Editor as it allows users to create, edit, publish, and delete content, including content created by other people. They just won’t have access to the higher-level WordPress features.

It’s also a good idea to give the Admin account to someone who has experience with WordPress and understands how to manage a WordPress website.

To create an account for one or more clients, go to Users » Add New in the WordPress dashboard. You can then type in some information about the person including their name and email address.

With that done, open the Role dropdown and choose the role you want to assign this user, such as Admin or Editor.

When you’re happy with the information you’ve entered, click on ‘Add New User.’

To create more accounts, simply follow the same process described above. For more on this topic, please see our guide on how to add new users to your WordPress blog.

Method 2. Using the Members Plugin (Create a Custom Client Role)

Sometimes you may need to stop clients from deactivating plugins without restricting their access to other areas.

With that being said, the built-in user roles may not be right for your website. For example, Editors can’t deactivate plugins, but they also can’t add new users or install WordPress themes, which may be a problem for your clients.

If the default user roles aren’t quite right for your client, then you can create a custom role. This role can have exactly the permissions and capabilities the client needs. You can even create different roles for different teams, or even individual employees.

The easiest way to create custom roles is by using the free Members plugin. This plugin allows you to create new roles and then add and remove capabilities to those user roles, including the ability to activate and deactivate WordPress plugins.

This permission removes the Plugins setting from the left-hand menu, as you can see in the following image.

The first thing you need to do is install and activate the Members plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, go to Members » Add New Role.

In the ‘Enter role name’ field, type in the name you want to use. This will be visible to anyone who has access to the WordPress dashboard.

After that, it’s time to grant and deny permissions.

The left column shows all the different types of content such as reusable blocks and WooCommerce products. Simply click on a tab and you’ll see all the permissions for that content type.

You can then go ahead and check the ‘Grant’ or ‘Deny’ box for each permission. For more detailed instructions, please see our guide on how to add or remove user capabilities.

To stop clients from deactivating plugins, click on the ‘Plugins’ tab on the left.

On this screen, check the ‘Deny’ box on the line that says ‘Activate Plugins.’

When you’re happy with how the user role is set up, click on ‘Add Role.’

You can now assign this role to any user, following the same process described in Method 1.

Method 3. Using Custom PHP (Prevent Clients From Deactivating Specific Plugins)

If you want to stop clients from deactivating all plugins, then you can use one of the methods mentioned above.

However, sometimes you may want to protect essential plugins only, while still giving clients the freedom to deactivate and delete non-essential software.

The best way to protect specific plugins is by adding custom code in WordPress. This allows you to remove the ‘Deactivate’ link for specific plugins.

This is an advanced method, so we don’t recommend it for beginners.

Note: Just be aware that clients can still deactivate any plugin using the Bulk Actions dropdown menu, or with an advanced tool like FTP or phpMyAdmin. However, removing the ‘Deactivate’ link makes it much more difficult for clients to accidentally deactivate an essential plugin.

To start, you’ll need to know the plugin’s file name and where it lives on your server. Typically, these files use the plugin’s name followed by .php, and live inside a folder named after the plugin. For example, the WooCommerce file is named ‘woocommerce.php’ and lives inside a ‘woocommerce’ folder.

However, it’s still worth checking, especially if the plugin has a long, complicated name or multiple words. For example, if you’re using the SR Product 360° View plugin to add interactive 360-degree images in WordPress, then its file is named ‘sr.php.’

You can check the file name and location by connecting to the site’s server using an FTP client such as FileZilla, or you can use the file manager of your WordPress hosting cPanel.

If this is your first time using FTP, then you can see our complete guide on how to connect to your site using FTP.

After that, go to /wp-content/plugins/. Here, you’ll see all the different plugins on your site.

Simply find the plugin that you want to protect, and open its folder.

After that, find the .php file.

Now, make a note of the folder name and .php file, as you’ll be using this information in your code. Simply repeat this process for every plugin you want to protect.

With that done, it’s time to add a code snippet to your site. Often, you’ll find guides asking you to add code to the site’s functions.php file.

However, this isn’t recommended as simple errors can cause countless common WordPress errors. You’ll also lose the custom code when you update your WordPress theme.

That’s where WPCode comes in.

WPCode is the best code snippets plugin used by over 1 million WordPress websites. It makes it easy to add custom CSS, HTML, PHP, and more.

The first thing you need to do is install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head over to Code Snippets » Add Snippet.

Here, hover your mouse over ‘Add Your Custom Code.’

When it appears, click on ‘Use snippet.’

To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.

After that, open the ‘Code Type’ dropdown and select ‘PHP Snippet.’

Now, you’re ready to add the custom PHP. The exact code will vary depending on the plugins you’re protecting, but here’s an template you can use:

add_filter( 'plugin_action_links', 'disable_plugin_deactivation', 10, 4 );
function disable_plugin_deactivation( $actions, $plugin_file, $plugin_data, $context ) {

        if ( array_key_exists( 'deactivate', $actions ) && in_array( $plugin_file, array(
                'wpforms/wpforms.php',
                'woocommerce/woocommerce.php'
        )))
                unset( $actions['deactivate'] );
        return $actions;
}

Hosted with ❤️ by WPCode

1-click Use in WordPress

This snippet disables deactivation for WPForms and WooCommerce. To protect other plugins, simply replace ‘wpforms/wpforms.php’ and ‘woocommerce/woocommerce.php’ with the folders and file names you got in the previous step.

To disable deactivation for more plugins, simply add them to the code. For example:

  'wpforms/wpforms.php',
        'woocommerce/woocommerce.php',
                'service-box/service-box.php'
        
    )))

Hosted with ❤️ by WPCode

1-click Use in WordPress

After that, scroll to the ‘Insertion’ section. WPCode can add your code to different locations, such as after every post, frontend only, or admin only.

We only need to use the PHP code in the WordPress admin area, so click on ‘Auto Insert’ if it isn’t already selected. Then, open the ‘Location’ dropdown menu and choose ‘Admin only.’

After that, you’re ready to scroll to the top of the screen and click on the ‘Inactive’ toggle, so it changes to ‘Active.’

Finally, click on ‘Save Snippet’ to make the PHP snippet live.

Now, if you select Plugins from the left-hand menu, you’ll see the ‘Deactivate’ link has been removed for those plugins.

If you need to restore the ‘deactivate’ links at any point, then you can disable the code snippet. Simply go to Code Snippets » Code Snippet and click the switch next to your snippet to turn it from blue (enabled) to grey (disabled).

You can now deactivate these plugins by heading over to the Plugins menu.

You can also deactivate protected plugins using phpMyAdmin or an FTP client. This may be a good solution if you want to remove a specific plugin, but don’t want to completely disable the code snippet and leave all your protected plugins vulnerable.

To learn more, please see our guide on how to deactivate all plugins when not able to access WP-Admin.

We hope this article helped you learn how to prevent clients from deactivating WordPress plugins. You may also want to see our ultimate guide on how to boost WordPress speed and performance or the best phone services for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Prevent Clients from Deactivating WordPress Plugins first appeared on WPBeginner.

April 20, 2023 at 10:30PM

How to Change Block Height and Width in WordPress

Do you want to change block height and width in WordPress?

By default, WordPress makes it easy to create beautiful content layouts for your posts and pages using blocks. However, sometimes you may want to resize blocks to make them look better.

In this article, we will show you how to easily change block height and width in WordPress.

Why Change Block Height and Width in WordPress?

The block editor enables you to add content to your WordPress website using different blocks, including headings, paragraphs, images, videos, audio, and more.

However, sometimes you may want to change the width or height of a specific block to improve its appearance or the layout of the overall content.

Adjusting block sizes can also ensure that your content is responsive and displays properly on all devices, including phones, tablets, and laptops.

For example, you may have uploaded an image in the content editor, but it is too large and makes the page look unappealing.

Or, you might want to change the size of the heading block to align it better with the content.

By adjusting the width and height of the blocks, you can make your posts and pages look more aesthetically pleasing.

That being said, let’s see how you can easily change block height and width in WordPress.

• Method 1: Change the Block Height and Width Using Block Settings
• Method 2: Change the Block Height and Width Using the Columns Block
• Method 3: Change the Block Height and Width Using the Group Block
• Method 4: Change the Block Height Using the Cover Block
• Bonus: Create Beautiful Pages Using Advanced Blocks in SeedProd

Method 1: Change the Block Height and Width Using Block Settings

For this method, we will show you how to change a block’s height and width using the default settings offered by WordPress.

Currently, WordPress does not offer the same resizing options for all of the blocks. However, the block editor provides many ways to resize the height and width of different blocks.

Let’s start with the Image block in WordPress.

First, you can change the alignment of the Image block by clicking on the ‘Align’ button in the toolbar above the block.

Here, choosing the ‘Wide Width’ option will make the block the same width as the container.

Or, the ‘Full Width’ alignment option will make the block the entire width of the page.

You can also resize a block by going to the ‘Block Settings’ panel on the right and scrolling down to the ‘Settings’ section. From here, you can resize a block from the ‘Image Size’ dropdown menu.

You can also adjust the block’s width and height by typing the preferred pixel size into the ‘Width’ and ‘Height’ boxes in the ‘Image dimensions’ section.

Below that, you can also adjust the block’s size by percentage.

Another way to resize an Image block is by clicking on the image itself to bring up a blue border with circular anchors.

Then, simply drag these anchors to change the height and width of the image block.

Once you are done, click on the ‘Update’ or ‘Publish’ button to store your settings.

Method 2: Change the Block Height and Width Using the Columns Block

If the block you want to resize does not come with alignment buttons or resize settings, then this method is for you.

For this method, we will place our block inside the Columns block. It acts as a container where you can add blocks in each column. Then, you can resize those blocks by adjusting the height and width of the columns.

First, you will need to click on the ‘Add Block’ (+) button in the top left corner of the screen.

From here, simply locate and add the Columns block to the content editor. Then, you will be asked to choose a variation.

After that, the column layout will be displayed on the screen, and you can now add the block you want by clicking on the ‘Add Block (+)’ button inside a column.

Once the block has been added, you can resize it by using the ‘Column settings’ located in the right panel.

Once you are done, simply click the ‘Publish’ button to store your changes.

This is how the content looked on our demo website after resizing and aligning two paragraph blocks inside a two-column block.

Method 3: Change the Block Height and Width Using the Group Block

You can also adjust the width and height of blocks using the Group block. It allows you to group different blocks and style them together.

First, you will need to click on the ‘Add Block’ (+) button at the top. Next, you must locate and add the Group block to the content editor.

Once you do that, the Group block will display three different layout options that you can choose from. For this tutorial, we will use the ‘Group’ layout.

After that, the ‘Add Block’ button will be displayed on the screen. You can now add any block you want.

In this tutorial, we will be adding and resizing a Heading block, a Paragraph block, and an Image block.

To add multiple blocks to the Group, you must click on the ‘Select Group’ button from the block toolbar.

Once the Group is selected, simply click on the ‘Add Block’ button (+) at the bottom.

Clicking on the ‘Select Group’ button also opens up the block settings in the right column. From here, you can easily adjust the layout, justification, and orientation of all the blocks.

Changing the layout will also change the different block sizes. You can configure these settings until you are happy with the result.

Once you are done, click on the ‘Update’ or ‘Publish’ button to store your settings.

This is how the Group block looked on our demo website.

Method 4: Change the Block Height Using the Cover Block

This resizing method is for you if you want to use the Cover block. It enables you to display text and other content on top of an image or video.

First, you will need to click on the ‘Add Block’ (+) button at the top and find the Cover block.

Once you have done that, you will be asked to choose a color or upload an image from the WordPress media library. This image or color will be used as the background for the Cover block.

Next, simply drag and drop any block you want into the Cover block.

After that, you need to click on the Cover block to open up its block settings in the right column.

From here, scroll down to the ‘Dimensions’ panel, where you can adjust the height of the Cover block using pixels.

Finally, don’t forget to click on the ‘Save Changes’ button to store your settings.

For more detailed instructions on how to use the Cover block, you may want to see our beginner’s guide on Cover Image vs. Featured Image in the WordPress block editor.

Bonus: Create Beautiful Pages Using Advanced Blocks in SeedProd

You can easily create beautiful and aesthetically-pleasing pages using the SeedProd plugin.

It is the best WordPress page builder on the market that allows you to create landing pages using blocks. These blocks are also super easy to customize and resize according to your needs.

First, you will need to install and activate the SeedProd plugin. For more details, you can read our guide on how to install a WordPress plugin.

Note: SeedProd also offers a free version, but we will be using the premium version for this tutorial.

Upon activation, you must go to the SeedProd » Settings page from your WordPress dashboard and enter the license key in the ‘License Key’ box.

You can find the license key on your account page on the SeedProd website.

Next, you need to visit the SeedProd » Landing Pages screen from the admin sidebar to start creating a landing page.

From here, just click on the ‘Add New Landing Page’ button.

You will now be taken to the ‘Choose a New Page Template’ page. SeedProd offers many pre-made templates that you can pick from.

After you have selected a template, you will be asked to provide a name and URL for your landing page.

Upon adding these details, simply click on the ‘Save and Start Editing the Page’ button to continue.

This will launch SeedProd’s drag-and-drop page builder, where you can now start editing your page.

For more detailed instructions, please see our guide on how to create a landing page with WordPress.

For this tutorial, we will be adding and resizing an Image block and a Button block.

First, you will need to drag the Image block from the block panel on the left and drop it anywhere you like on the page.

Next, simply click on the Image block to open its block settings in the left column. From here, you can upload an image from your media library.

Next, you can change the block’s height and width using pixels or percentages.

You can also adjust the image size and position by switching to the ‘Advanced’ tab at the top of the settings panel.

Then, just click on the Spacing panel to expand its settings.

Here, simply add values to adjust the block’s margin and padding according to your needs.

You can adjust the margin and padding for the top, bottom, left, and right areas of the block.

With Seedprod, you can also add a Spacer block between two different blocks to put some space between them.

First, you will need to locate and add the ‘Spacer’ block from the left column. Then, click on it to open its settings.

Now, you can control the height of the spacer using the ‘Height’ slider.

The spacer block can help you create a clutter-free website.

You can also change the width and height of other blocks in the same way, including the Video, Heading, and Button blocks.

Simply find the Button block in the left column and drag it onto your page.

Next, you will need to click on the Button to open up its block settings.

From here, switch to the ‘Advanced’ tab from the top. You can change the height of the block by dragging the ‘Vertical Padding’ slider.

To change the width, drag the ‘Horizontal Padding’ slider in the left column.

Once you are done, don’t forget to click on the ‘Save’ button.

We hope this article helped you learn how to change block width and height in WordPress. You may also want to see our article on how to add and align images in the WordPress block editor and our top picks for the must-have WordPress plugins to grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Change Block Height and Width in WordPress first appeared on WPBeginner.

April 20, 2023 at 04:38PM