logo animé

Toggle Products View (Grid / List) for WooCommerce in WordPress Easily | WordPress Tutorial

  1. Accueil
  2. Blog
  3. Tutoriels WordPress
  4. Toggle Products View (Grid / List) for WooCommerce in WordPress Easily | WordPress Tutorial

How can we toggle products view between grid view and list view in WordPress WooCommerce? By default, WooCommerce shop offers grid view. Depending on WordPress theme, unless it’s a premium WordPress theme. Most themes come with grid view. If your WordPress theme does not provide that option, it is easy to add one. Install a free WordPress plugin called ‘WooCommerce Grid / List Toggle’. Then visit the shop page. You should see two icons to toggle products view that can be used to toggle products view.

And it will retain it’s state. We can navigate away from products page and our selected view will remain same as per our selection. If list view affects CSS styles, that is because you don’t have enough CSS support for this type of products view in WooCommerce. Every theme is built different. You can adjust CSS easily.

If you inspect and go to wrapper for the products, you can see it’s an unordered list. If we toggle products view. It toggles a class for this UL element. You can easily target this class to add additional CSS to adjust elements in list view properly.

This method is a quick way to add a list view to the shop page. We can do it without any plugin as well. All we have to do is to add two icons at the top of shop page. Click at the icons will toggle that class. Now based on the class, we can adjust CSS to show grid or to not show grid. In case of no grid, li tags will be blocks and will push next block to a new line.

As simple as that. We are not dependent on a plugin to do it. But plugin can do it quickly and easily.

If you are new to the channel, subscribe to learn more about web development, web application development, editing wordpress source code, how to create a website using wordpress, developing landing page in wordpress, working with child theme wordpress, custom wordpress theme development, wordpress plugin development, how to build a website with wordpress, create website with wordpress and related web development areas.

– Remove All Unused Images from WordPress Media Library | Clean Media Library with 100% Accuracy

– Bookly PRO Full Overview | Scheduling & Appointment Booking WordPress Site using Bookly PRO

– PayPal Sandbox & Live Setup for WooCommerce & Bookly PRO in WordPress | Complete Guide

– Add Dynamic Country State City Dropdowns in WordPress Contact Form

– Hide All Traces of WP or WordPress | WordPress Security Tips | Hide WordPress Directories | Hide WP

– Convert Images to WebP in WordPress | Bulk Image Optimization to Speed Up WordPress Performance

– Fix Media Library Showing Blank Images in WordPress | WordPress Tutorial

– PayPal Personal, Business & Sandbox Accounts | WordPress, WooCommerce & PayPal Payments

– Fix Schema, Structured Data, Errors & Warnings for WordPress Shopping Store to Improve Business

– UPLOAD FILE WITH ORDER in WooCommerce WordPress | Easy WooCommerce Order Customization

– Proper Redirect After Form Submission in WordPress | Custom & Manual Redirect & 3 WordPress Plugins

– Display Google Reviews for Business in WordPress | Free Google Reviews Slider, Widgets & Grid

– Country Flags in Form Fields | Country Field with Flags | Phone Field with Country Flags | WordPress

– Remove Category and Tag Base from WordPress | WordPress URL Rewriting Tutorial

– Custom Permalink for Post, Page, Custom Post Type & Taxonomy | Ultimate URL Rewriting in WordPress

– Products Visibility Based on Country | WordPress WooCommerce Customization

– Drag & Drop Multiple Files Upload Field in WordPress | Advanced Files Attachment in WP Contact Form

Thank You!

#WooCommerce #WordPress #WordPressTutorial #WordPressTraining #WordPressForBeginners #WordpressPlugin #WebDevelopment #WordpressDeveloper #WebStylePress

Vous devez vous connecter pour publier un commentaire.