How to Show 2 Products Per Column on Mobile View in WooCommerce
As an ecommerce store owner, providing a seamless and responsive shopping experience for your customers is crucial. One common challenge is optimizing the product display on mobile devices, where screen real estate is limited. In this article, we'll explore how you can show 2 products per column on the mobile view of your WooCommerce store.
Understanding the Problem
By default, WooCommerce displays products in a grid layout, with the number of columns adjusting based on the screen size. However, sometimes the default layout may not meet your specific design or user experience requirements.
In the case of showing 2 products per column on mobile view, the default WooCommerce layout may display a single column on smaller screens, which can result in a suboptimal shopping experience for your mobile customers.
Identifying the Plugin
The good news is that there are various plugins available that can help you customize the WooCommerce product layout, including the ability to control the number of columns on different screen sizes.
One such plugin is DHVC WooCommerce Products Layouts, which provides a wide range of options for customizing the appearance and behavior of your WooCommerce product listings.
Exploring the DHVC WooCommerce Products Layouts Plugin
The DHVC WooCommerce Products Layouts plugin offers a dedicated "Grid" layout option that allows you to specify the number of columns to display on different screen sizes, including mobile devices.
To set up the 2 products per column on mobile view:
-
Install and activate the DHVC WooCommerce Products Layouts plugin: You can do this through the WordPress plugin repository or by uploading the plugin files to your website's wp-content/plugins
directory.
-
Navigate to the plugin settings: In your WordPress admin dashboard, go to "WooCommerce" > "Products Layouts" to access the plugin's settings.
-
Select the "Grid" layout: Under the "Layout" section, choose the "Grid" option.
-
Customize the column settings: Scroll down to the "Columns" section and set the number of columns to display on different screen sizes. For example, you can set the mobile view to 2 columns, the tablet view to 3 columns, and the desktop view to 4 columns.
Mobile (< 768px): 2 columns
Tablet (≥ 768px): 3 columns
Desktop (≥ 992px): 4 columns
-
Save the changes: Make sure to click the "Save Changes" button at the bottom of the page to apply the new layout settings.
By following these steps, you should now see 2 products displayed per column on the mobile view of your WooCommerce store.
Overriding the CSS (if necessary)
In some cases, you may find that the DHVC WooCommerce Products Layouts plugin's settings don't fully address your needs, and you need to make additional CSS adjustments.
One common issue is that the plugin's "Masonry" layout option can interfere with the ability to control the column display using CSS alone. In this case, you can try using the "Grid" layout option instead, as it provides more flexibility for customizing the column layout.
If you still need to make CSS adjustments, you can try the following:
@media (max-width: 767px) {
/* Masonry sets an absolute defined px based height, overwrite that */
.dhvc-woo-row-fluid.dhvc-woo-masonry-list {
height: auto !important;
}
/* Masonry sets absolute, top, and left, overwrite those
as well as setting them to have a small gutter */
.dhvc-woo-item.dhvc-woo-masonry-item {
position: relative !important;
top: auto !important;
left: auto !important;
width: 50%;
width: calc(50% - 10px);
float: left;
}
/* Scooch every second item over 10px */
.dhvc-woo-item.dhvc-woo-masonry-item:nth-child(2n) {
margin-left: 10px;
}
}
This CSS code addresses the issues caused by the "Masonry" layout option by overriding the height, position, and width of the product items. It also adds a small gutter between the products. Remember to test this CSS on your specific setup and make any necessary adjustments.
Conclusion
Providing a responsive and visually appealing product display is essential for enhancing the user experience on your WooCommerce store, especially on mobile devices. By leveraging the DHVC WooCommerce Products Layouts plugin and, if necessary, fine-tuning the CSS, you can easily show 2 products per column on the mobile view of your ecommerce website.
If you encounter any further issues or need additional assistance, be sure to consult the plugin's documentation or reach out to the plugin developer for support. Optimizing your WooCommerce store's layout and responsiveness is a crucial step in creating a seamless shopping experience for your customers.
For more insights on how to improve your website's performance and user experience, visit Flowpoint.ai
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.