Archived topic
WooCommerce Hover effects and content breakpoints also on Products by Category
2 replies · Started by Michael on November 21, 2022
Hi,
I hope you can guide me in the right direction here :-)
I'm using the latest GeneratePress, Wordpress Version and WooCommerce. Also I based my site on the Niche Theme from the Site Library.
The WooCommerce Shop page has a hover effect displaying the second product picture on hover. Also the WooCommerce Shop Page will always atleast display two products side by side when reducing browser width (or when on mobile).
The "Products by Category" Block which I use in my home site for example doesn't have these hover effects and will only display one product per line on mobile.
(I'm using the Products by Category Block instead of the WooCommerce Shop page as it was easier for me to establish the sorting and styling I wanted for the website than to modify the WooCommerce Shop Page styling)
I guess modifying the content breakpoints would just be any css change which I wasn't successful in changing correctly. The hover effect might probably require a hook but i'm also stranded on that issue currently :(
Home Site: https://capitalism.industries/
WooCommerce Shop Page: https://capitalism.industries/shop/
Is there an easy way to get the "Products by Category" Block to display atleast two products side-by-side when in mobile or reduced browser width?
Getting the hover effects to work would also be nice to have :-)
Any help would be appreciated!
Thank you and Best Regards
Michael
I added the following code to the CSS in the customizer which seems to have fixed my two products side-by-side issue on mobile.
@media (max-width: 480px) {
.wc-block-grid.has-4-columns .wc-block-grid__products {
display: flex;
}
.wc-block-grid.has-4-columns .wc-block-grid__product {
flex: 1 0 50%;
max-width: 50%;
padding: 0;
margin: 0 0 24px;
}
}
I would still need help with the hover effects :-)
Hi there,
my suggestion would be to NOT use the Woocommerce blocks.
instead use the Woo Shortcodes: https://woocommerce.com/document/woocommerce-shortcodes/
Those use the same templates as the woo archive pages.
So they will display the same way your other content is displayed
