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
• Remove All Unused Images from WordPre...
- Bookly PRO Full Overview | Scheduling & Appointment Booking WordPress Site using Bookly PRO
• Bookly PRO Full Overview | Scheduling...
- PayPal Sandbox & Live Setup for WooCommerce & Bookly PRO in WordPress | Complete Guide
• PayPal Sandbox & Live Setup for WooCo...
- Add Dynamic Country State City Dropdowns in WordPress Contact Form
• Add Dynamic Country State City Dropdo...
- Hide All Traces of WP or WordPress | WordPress Security Tips | Hide WordPress Directories | Hide WP
• Hide All Traces of WP & WordPress | W...
- Convert Images to WebP in WordPress | Bulk Image Optimization to Speed Up WordPress Performance
• Convert Images to WebP in WordPress |...
- Fix Media Library Showing Blank Images in WordPress | WordPress Tutorial
• Fix Media Library Showing Blank Image...
- PayPal Personal, Business & Sandbox Accounts | WordPress, WooCommerce & PayPal Payments
• PayPal Personal, Business & Sandbox A...
- Fix Schema, Structured Data, Errors & Warnings for WordPress Shopping Store to Improve Business
• Fix Schema, Structured Data, Errors &...
- UPLOAD FILE WITH ORDER in WooCommerce WordPress | Easy WooCommerce Order Customization
• UPLOAD FILE WITH ORDER in WooCommerce...
- Proper Redirect After Form Submission in WordPress | Custom & Manual Redirect & 3 WordPress Plugins
• Proper Redirect After Form Submission...
- Display Google Reviews for Business in WordPress | Free Google Reviews Slider, Widgets & Grid
• Display Google Reviews for Business i...
- Country Flags in Form Fields | Country Field with Flags | Phone Field with Country Flags | WordPress
• Country Flags in Form Fields | Countr...
- Remove Category and Tag Base from WordPress | WordPress URL Rewriting Tutorial
• Remove Category and Tag Base from Wor...
- Custom Permalink for Post, Page, Custom Post Type & Taxonomy | Ultimate URL Rewriting in WordPress
• Custom Permalink for Post, Page, Cust...
- Products Visibility Based on Country | WordPress WooCommerce Customization
• Products Visibility Based on Country ...
- Drag & Drop Multiple Files Upload Field in WordPress | Advanced Files Attachment in WP Contact Form
• Drag & Drop Multiple Files Upload Fie...
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: / webstylepress
Website: https://www.webstylepress.com
FaceBook: / webstylepress
Twitter: / webstylepress
GitHub: https://github.com/webstylepress
#WooCommerce #WordPress #WordPressTutorial #WordPressTraining #WordPressForBeginners #WordpressPlugin #WebDevelopment #WordpressDeveloper #WebStylePress
Смотрите видео Toggle Products View (Grid / List) for WooCommerce in WordPress Easily | WordPress Tutorial онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь WebStylePress 22 Апрель 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 7,74 раз и оно понравилось 4 людям.